VUE面试题汇总(九)

  1. 之间联系(Model 和 ViewModel 的双向数据绑定)

解析:

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象(桥梁)。

在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

85. MVC、MVP 与 MVVM 模式

参考答案:

一、MVC

通信方式如下

  1. 视图(View):用户界面。 传送指令到 Controller

  2. 控制器(Controller):业务逻辑 完成业务逻辑后,要求 Model 改变状态

  3. 模型(Model):数据保存 将新的数据发送到 View,用户得到反馈

二、MVP

通信方式如下

mvp

  1. 各部分之间的通信,都是双向的。

  2. View 与 Model 不发生联系,都通过 Presenter 传递。

  3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter 非常厚,所有逻辑都部署在那里。

三、MVVM

MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。通信方式如下

MVVM

唯一的区别是,它采用双向绑定(data-binding):View 的变动,自动反映在 ViewModel,反之亦然。

86. 常见的实现 MVVM 几种方式

参考答案:

1.发布-订阅者模式(backbone.js) 最早的mvvm框架

一般通过pub、sub的方式来实现数据和视图的绑定 使用起来比较麻烦

2.脏值检查(angular.js)

用定时器轮训检测数据是否发生改变 性能低

3.(vue用什么方式实现的数据绑定?)

数据劫持 Object.defineProperty给对象的属性增加修饰符来劫持各个属性的setter getter(获取值和设置值的时候 你都能知道

然后就可以修改页面的视图了) 此外还结合了发布订阅模式 把所有订阅 指定 统一做更新的处理

IE8以下不支持 Object.defineProperty这个属性的 所以vue只兼容到ie9

87. 解释下 Object. defineProperty()方法

参考答案:

这是 js 中一个非常重要的方法,ES6 中某些方法的实现依赖于它,VUE 通过它实现双向绑定,此方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象

解析:

语法


Object. defineProperty(object, attribute, descriptor)

  • 这三个参数都是必输项

  • 第一个参数为 目标对象

  • 第二个参数为 需要定义的属性或者方法

  • 第三个参数为 目标属性所拥有的特性

descriptor


前两个参数都很明确,重点是第三个参数 descriptor, 它有以下取值

  • value: 属性的值

  • writable: 属性的值是否可被重写(默认为 false)

  • configurable: 总开关,是否可配置,若为 false, 则其他都为 false(默认为 false)

  • enumerable: 属性是否可被枚举(默认为 false)

  • get: 获取该属性的值时调用

  • set: 重写该属性的值时调用

一个例子

var a = {};

Object.defineProperty(a, “b”, {

value: 123

});

console.log(a.b); //123

a.b = 456;

console.log(a.b); //123

a.c = 110;

for (item in a) {

console.log(item, a[item]); //c 110

}

因为 writable 和 enumerable 默认值为 false, 所以对 a. b 赋值无效,也无法遍历它

configurable


总开关,是否可配置,设置为 false 后,就不能再设置了,否则报错, 例子

var a = {};

Object.defineProperty(a, “b”, {

configurable: false

});

Object.defineProperty(a, “b”, {

configurable: true

});

//error: Uncaught TypeError: Cannot redefine property: b

writable


是否可重写

var a = {};

Object.defineProperty(a, “b”, {

value: 123,

writable: false

});

console.log(a.b); // 打印 123

a.b = 25; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)

console.log(a.b); // 打印 123, 赋值不起作用。

enumerable


属性特性 enumerable 定义了对象的属性是否可以在 for… in 循环和 Object. keys() 中被枚举

var a = {};

Object.defineProperty(a, “b”, {

value: 3445,

enumerable: true

});

console.log(Object.keys(a)); // 打印[“b”]

enumerable 改为 false

var a = {};

Object.defineProperty(a, “b”, {

value: 3445,

enumerable: false //注意咯这里改了

});

console.log(Object.keys(a)); // 打印[]

set 和 get


如果设置了 set 或 get, 就不能设置 writable 和 value 中的任何一个,否则报错

var a = {};

Object.defineProperty(a, “abc”, {

value: 123,

get: function() {

return value;

}

});

ES6

  • 列举常用的ES6特性:

  • 箭头函数需要注意哪些地方?

  • let、const、var

  • 拓展:var方式定义的变量有什么样的bug?

  • Set数据结构

  • 拓展:数组去重的方法

  • 箭头函数this的指向。

  • 手写ES6 class继承。

微信小程序

  • 简单描述一下微信小程序的相关文件类型?

  • 你是怎么封装微信小程序的数据请求?

  • 有哪些参数传值的方法?

  • 你使用过哪些方法,来提高微信小程序的应用速度?

  • 小程序和原生App哪个好?

  • 简述微信小程序原理?

  • 分析微信小程序的优劣势

  • 怎么解决小程序的异步请求问题?

其他知识点面试

  • webpack的原理

  • webpack的loader和plugin的区别?

  • 怎么使用webpack对项目进行优化?

  • 防抖、节流

  • 浏览器的缓存机制

  • 描述一下二叉树, 并说明二叉树的几种遍历方式?

  • 项目类问题

  • 笔试编程题:

最后

技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/31294.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐5个AI辅助生成论文、降低查重率的网站【2024最新】

一、引言 对于忙碌的学生来说,毕业论文通常是一项艰巨的任务。幸运的是,随着人工智能技术的发展,现在有一些工具可以帮助学生轻松完成论文。本文将介绍五个免费的AI工具,它们能够一键帮助你生成毕业论文,让你的学术生…

实验一:Ubuntu系统中的USB设备绑定实验

实验一:Ubuntu系统中的USB设备绑定实验 一、实验目的二、实验原理三、实验环境四、实验步骤任务 1:绑定不同USB设备任务 2:绑定多个相同设ID的串口设备 五、注意事项六、拓展练习 一、实验目的 学习Ubuntu中USB设备命名方法;掌握…

ADI Trinamic tmc2209专为3D打印和激光雕刻打造的高性能解决方案

TMC2209-LA是专为3D打印机和激光雕刻机设计的一款高性能、超静音的两相步进电机驱动器IC。该芯片结合了Trinamic公司的先进技术,为设备提供了稳定、可靠且低噪音的动力驱动解决方案 TMC2209-LA与许多传统驱动器以及TMC2208-LA引脚兼容。TRINAMICS先进的StealthChop2…

springboot基于Web的社区医院管理服务系统 LW+ PPT+源码+讲解

3系统需求分析 3.1系统功能 通过前面的功能分析可以将社区医院管理服务系统的功能分为管理员、用户和医生三个部分,系统的主要功能包括首页、个人中心、用户管理、医生管理、预约医生管理、就诊信息管理、诊疗方案管理、病历信息管理、健康档案管理、费用信息管理…

数据结构_二叉树

目录 一、树型结构 二、二叉树 2.1 概念 2.2 特殊的二叉树 2.3 二叉树的性质 2.4 二叉树的存储 2.5 遍历二叉树 2.6 操作二叉树 总结 一、树型结构 树是一种非线性的数据结构,它是由 n(n>0) 个有限结点组成一个具有层次关系的集合,一棵 n 个…

中央空调水系统安装

冷热水管: 空调冷热水管道的材质应由业主或使用方明确: 1、普通焊接钢管; 2、无缝钢管; 3、镀锌钢管; 4、PP-R管; 5、紫铜管; 6、水管内外表面应光洁、无疵孔、裂缝、结疤、层裂或气泡。…

手摸手带你实现一个时间轴组件

这是开头 本文给大家带来一个时间轴的组件开发教程,话不多说,先看动图: 主要功能就是可以拖动时间轴来定位当前时间,可以通过鼠标滚轮来修改当前时间分辨率,也支持显示时间段功能,动图未体现,可…

华为手机怎么找回删除的照片?掌握3个方法,恢复不是梦

由于误删、设备故障、软件更新等原因,我们有时可能会不慎丢失这些宝贵的照片。当面对空空如也的相册时,那种失落感无法言喻。华为手机该怎么找回删除的照片呢?但是,请不要绝望!在科技的帮助下,我们可以采取…

tplink安防监控raw文件转码合成mp4的方法

Tplink(深圳普联)专业的网络设备生产商,属于安防监控市场的后来者。Tplink的安防产品恢复了很多,其嵌入式文件系统也一直迭代更新。今天要说的案例比较特殊,其不仅仅要求恢复,还要求能解析出音频并且要求画面和声音实现“同步”。…

zynq qspi启动、无SD卡、格式化分区emmc、调试全过程

1 背景 使用黑金开发板,全部开发流程避开使用SD卡调试,zynq开发过程中很多资料都是基于SD启动。这样就对新板卡调试带来了一定的困难,因为新板卡基本上没有设计SD卡。这里就一步一步实现qspi启动内核,格式化分区emmc,…

阿里拍卖资产推荐算法 召回进展年中总结

阿里拍卖是阿里巴巴旗下拍卖平台,覆盖房产、机动车、土地、债权等类目。召回策略作为推荐场景的第一环,决定了整个推荐系统的上限,目前包含了包括向量召回、I2I、LBS2I、C2I等多路召回。召回的核心目标是尽可能的返回用户所有可能会感兴趣的商…

DataOps真能“降本增效”?

在各行各业中,越来越多的公司开始重视收集数据,并寻找创新方法来获得真实可行的商业成果,并且愿意投入大量时间和金钱来实现这一目标。 据IDC称,数据和分析软件及云服务市场规模在 2021 年达到了 900 亿美元,随着企业继…

CSDN自定义模块全攻略,DIY系统原有样式打造专属个性化主页!

个人主页:学习前端的小z 个人专栏:HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 文章目录 💯如何通过HTMLCSS自定义模板diy出自己的个性化csdn主页&#x…

明日开考!2024年全国青少年人工智能创新挑战赛及真题

Scratch实验室2024-06-21讯 2024年全国青少年人工智能创新挑战赛【编程创作与信息学专项赛】第二轮将在明天(2024年6月22日)举行,请参加的同学积极备考,参加选拔赛的青少年需通过“人工智能创新挑战赛”专题页面点击“参加选拔赛”…

RocketMQ快速入门:集成spring, springboot实现各类消息消费(七)附带源码

0. 引言 rocketmq支持两种消费模式&#xff1a;pull和push&#xff0c;在实际开发中这两种模式分别是如何实现的呢&#xff0c;在spring框架和springboot框架中集成有什么差异&#xff1f;今天我们一起来探究这两个问题。 1. java client实现消息消费 1、添加依赖 <depen…

正定矩阵(Positive Definite Matrix)

正定矩阵&#xff08;Positive Definite Matrix&#xff09; flyfish Positive&#xff08;正数&#xff09; &#xff1a;在数学和统计学中&#xff0c;通常指大于零的数。在矩阵理论中&#xff0c;一个矩阵被称为正定&#xff0c;是因为它的性质类似于正数的性质。 Defini…

裁员裁到大动脉,是一种什么体验!

大家好啊&#xff0c;我是董董灿。 降本增效是每个当老板的人都喜欢挂在嘴边的口头禅&#xff0c;尤其是行业不景气&#xff0c;公司发展遇到瓶颈的时候。 大部分公司降本增效的手段其实非常相似&#xff0c;比较容易实施的手段也就那几种。 要么搞设备自动化和流程自动化&a…

Anthropic 发布新AI模型Claude 3.5 Sonnet

&#x1f989; AI新闻 &#x1f680; Anthropic 发布新AI模型Claude 3.5 Sonnet 摘要&#xff1a;Anthropic 发布了其最强 AI 模型 Claude 3.5 Sonnet。速度更快、处理细微差别和幽默的能力提升&#xff0c;且支持编写、编辑和执行代码。该模型通过公司网站、iPhone 应用及 A…

数据库系统概念(第八周 第一堂)(规范化关系数据库设计)(强推学习!!!)

目录 前言 E-R模型质量低的深层原因 数据依赖 函数依赖 主属性/非主属性 逻辑蕴含与闭包 Armstrongs Axiom 求解F闭包算法 求解属性集闭包算法 属性集闭包的作用 候选码求解理论和算法 候选码求解理论 无关属性 检验方法 正则覆盖 关系模式的设计 关系…

【深度学习】GPT-2,Language Models are Unsupervised Multitask Learners,【语言建模】

论文&#xff1a;https://d4mucfpksywv.cloudfront.net/better-language-models/language_models_are_unsupervised_multitask_learners.pdf 文章目录 摘要引言方法2.1 训练数据集2.2 输入表示2.3 模型3. 实验3.1 语言建模3.2 Children’s Book Test3.3 LAMBADA3.4 Winograd Sc…