高频面试题 Vue02
哈哈哈哈哈哈哈
我是麦菜，又宅又菜的麦菜
话不，我直接进入正题
一、Vue的基本原理 ？
二、双向数据绑定的原理 ？
四、MVVM、MVC、MVP的区别 ？
三、使用 Object.defineProperty() 来进行数据 劫持有什么缺点 ？
五、Computed 和 Watch 的区别 ?
六、 Computed 和 Methods 的区别 ？
一、Vue的基本原理 ？
当一个Vue实例创建时
Vue会遍历data中的属性
用 Object.defineProperty（vue3.0使用proxy ）
将它们转为 getter/setter
并且在内部追踪相关依赖
在属性被访问和修改时通知变化
每个组件实例都有相应的 watcher 程序实例
它会在组件渲染的过程中把属性记录为依赖
之后当依赖项的setter被调用时
会通知watcher重新计算
从而致使它关联的组件得以更新
二、双向数据绑定的原理 ？
Vue.js 是采用
数据劫持结合发布者-订阅者模式的方式
通过Object.defineProperty()来劫持
各个属性的setter、getter
在数据变动时发布消息给订阅者
触发相应的监听回调
原理步骤主要分为：
（1）需要observe的数据对象进行递归
遍历包括子属性对象的属性
都加上setter和getter这样的话
给这个对象的某个值赋值
就会触发setter
那么就能监听到了数据变化
（2）compile解析模板指令步骤
将模板中的变量替换成数据
然后初始化渲染页面视图
并将每个指令对应的节点绑定更新函数
添加监听数据的订阅者
一旦数据有变动
收到通知
更新视图
（3）Watcher订阅者是Observer和Compile之间
通信的桥梁
主要做的事情是:
①在自身实例化时往属性订阅器(dep)里面添加自己
②自身必须有一个update()方法
③待属性变动dep.notice()通知时
能调用自身的update()方法
并触发Compile中绑定的回调
则功成身退
（4）MVVM作为数据绑定的入口
整合Observer、Compile和Watcher三者
通过Observer来监听自己的model数据变化
通过Compile来解析编译模板指令
最终利用Watcher搭起Observer和Compile之间的
通信桥梁
达到数据变化 -> 视图更新；
视图交互变化(input) -> 数据model变更的
双向绑定效果
三、使用 Object.defineProperty() 来进行数据劫持
有什么缺点？
在对一些属性进行操作时
使用这种方法无法拦截
比如通过下标方式修改数组数据或者给对象
新增属性
这都不能触发组件的重新渲染
因为 Object.defineProperty 不能拦截到
这些操作
更精确的来说
对于数组而言
大部分操作都是拦截不到的
只是 Vue 内部通过重写函数的方式解决了
这个问题
在 Vue3.0 中已经不使用这种方式了
而是通过使用 Proxy 对对象进行代理
从而实现数据劫持
使用Proxy 的好处是它可以完美的监听到
任何方式的数据改变
唯一的缺点是兼容性的问题
因为 Proxy 是 ES6 的语法
四、MVVM、MVC、MVP的区别 ？
MVC、MVP 和 MVVM 是三种常见的
软件架构设计模式
主要通过分离关注点的方式来组织代码结构
优化开发效率
在开发单页面应用时
往往一个路由页面对应了一个脚本文件
所有的页面逻辑都在一个脚本文件里
页面的渲染、数据的获取
对用户事件的响应所有的应用逻辑
都混合在一起
这样在开发简单项目时
可能看不出什么问题
如果项目变得复杂
那么整个文件就会变得冗长、混乱
这样对项目开发和后期的项目维护是
非常不利的
（1）MVC ：
MVC 通过分离
Model、View 和 Controller
的方式来组织代码结构
其中 View 负责页面的显示逻辑
Model 负责存储页面的业务数据
以及对相应数据的操作
并且 View 和 Model 应用了观察者模式
当 Model 层发生改变的时候它会通知
有关 View 层更新页面
Controller 层是 View 层和 Model 层的纽带
它主要负责用户与应用的响应操作
当用户与页面产生交互的时候
Controller 中的事件触发器就开始工作了
通过调用 Model 层
来完成对 Model 的修改
然后 Model 层再去通知 View 层更新
（2）MVVM：
MVVM 分为
Model、View、ViewModel：
Model代表数据模型
数据和业务逻辑都在Model层中定义；
View代表UI视图
负责数据的展示；
ViewModel负责监听Model中数据的改变
并且控制视图的更新
处理用户交互操作；
Model和View并无直接关联
而是通过ViewModel来进行联系的
Model和ViewModel之间有着
双向数据绑定的联系
因此当Model中的数据改变时
会触发View层的刷新
View中由于用户交互操作而改变的数据
也会在Model中同步
这种模式实现了 Model和View的数据
自动同步
因此开发者只需要专注于数据的
维护操作即可
而不需要自己操作DOM
（3）MVP：
MVP 模式与 MVC 唯一不同的在于
Presenter 和 Controller
在 MVC 模式中使用观察者模式
来实现当 Model 层数据发生变化的时候
通知 View 层的更新
这样 View 层和 Model 层耦合在一起
当项目逻辑变得复杂的时候
可能会造成代码的混乱
并且可能会对代码的复用性造成一些问题
MVP 的模式通过使用 Presenter 来实现
对 View 层和 Model 层的解耦
MVC 中的Controller 只知道 Model 的接口
因此它没有办法控制 View 层的更新
MVP 模式中
View 层的接口暴露给了 Presenter
因此可以在 Presenter 中将 Model 的变化
和 View 的变化绑定在一起
以此来实现 View 和 Model 的同步更新
这样就实现了对 View 和 Model 的解耦
Presenter 还包含了其他的响应逻辑
五、Computed 和 Watch 的区别 ?
对于Computed：
它支持缓存
只有依赖的数据发生了变化
才会重新计算 不支持异步
当Computed中有异步操作时
无法监听数据的变化 computed的值会
默认走缓存
计算属性是基于它们的响应式依赖进行
缓存的
也就是基于data声明过
或者父组件传递过来的props中的数据
进行计算的
如果一个属性是由其他属性计算而来的
这个属性依赖其他的属性
一般会使用computed 如果computed属性
的属性值是函数
那么默认使用get方法
函数的返回值就是属性的属性值；
在computed中
属性有一个get方法和一个set方法
当数据发生变化时
会调用set方法
对于Watch：
它不支持缓存
数据变化时
它就会触发相应的操作 支持异步监听
监听的函数接收两个参数
第一个参数是最新的值
第二个是变化之前的值 当一个属性发生
变化时
就需要执行相应的操作
监听数据必须是data中声明的或者父组件
传递过来的props中的数据
当发生变化时
会触发其他操作
函数有两个的参数：
immediate：
组件加载立即触发回调函数 deep：
深度监听
发现数据内部的变化
在复杂数据类型中使用
例如数组中的对象发生变化
需要注意的是
deep无法监听到数组和对象内部的变化
当想要执行异步或者昂贵的操作以
响应不断的变化时
就需要使用watch
总结：
computed 计算属性 : 依赖其它属性值
并且 computed 的值有缓存
只有它依赖的属性值发生改变
下一次获取 computed 的值时才会
重新计算 computed 的值
watch 侦听器 : 更多的是观察的作用
无缓存性
类似于某些数据的监听回调
每当监听的数据变化时都会执行回调
进行后续操作
运用场景：
当需要进行数值计算,并且依赖于其它
数据时
应该使用 computed
因为可以利用 computed 的缓存特性
避免每次获取值时都要重新计算
当需要在数据变化时执行异步或开销
较大的操作时
应该使用 watch
使用 watch 选项允许执行
异步操作 ( 访问一个 API )
限制执行该操作的频率
并在得到最终结果前
设置中间状态
这些都是计算属性无法做到的
六、 Computed 和 Methods 的区别 ?
可以将同一函数定义为一个 method
或者一个计算属性
对于最终的结果
两种方式是相同的 不同点：
computed: 计算属性是基于它们的
依赖进行缓存的
只有在它的相关依赖发生改变时才会重新求值；
method 调用总会执行该函数
我是麦菜，能不能点个赞
感谢你的观看
