写在前面的话

面多了，问题五花八门，但也有一些规律，比如，今儿的题就是常考题~

（一）Vue的双向绑定原理

实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

 

 

 

vm.$set()原理

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

vm.$set()在new Vue()时候就被注入到Vue的原型上。

vm.$set()解决了什么问题? 避免滥用

在Vue.js里面只有data中已经存在的属性才会被Observe为响应式数据, 如果你是新增的属性是不会成为响应式数据, 因此Vue提供了一个api(vm.$set)来解决这个问题。

 

 

数据响应式原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，

那么vue是如果进行数据劫持的？？？

1）vue2.0版本是利用了Object.defineProperty()这个方法重新定义对象获取属性值的get和设置属性值set的操作来实现的。

2）vue3.0版本采用了Es6的Proxy对象来实现。

 

Object.defineProperty的缺点 ：不能监听到数组变化

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你直接设置一个项的索引时, 例如： vm.items[indexOfItem] = newValue

当你修改数组的长度时, 例如： vm.items.length = newLength

无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。

https://www.cnblogs.com/YikaJ/p/4278255.html

所以vue才设置了7个变异数组（push、pop、shift、unshift、splice、sort、reverse）的 hack 方法来解决问题。

只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。如果能直接劫持一个对象，就不需要递归 + 遍历了

 

为什么vue3中改用proxy

1）defineProperty只能监听某个属性，不能对全对象监听，所以可以省去for in 提升效率

2）可以监听数组，不用再去单独对数组做操作

3）Proxy只是代理了原对象，不会污染原对象

那么，在vue中从一个数据到发生改变的过程是什么？

 

MVVM和MVC的区别

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

几乎所有的App都只干这么一件事：将数据展示给用户看，并处理用户对界面的操作。

MVC的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

 

MVVM

什么是MVVM

MVVM：Model、View、ViewModel。

你会下意识地把它和MVC来对比，你会发现，MVVM多了一个ViewModel而少了Controller。

首先说一下多出来的ViewModel（VM，不是显存）。

VM的意义，和Model一样，在于数据。

Model负责对数据进行取和存，然而我们对数据的操作除了取和存以外，还有一个非常重要的操作：解析。

 

 

参考链接：

cnblogs.com/renzm0318/p/12289415.html

https://www.cnblogs.com/chenhuichao/p/10818396.html

https://www.cnblogs.com/canfoo/p/6891868.html

https://www.jianshu.com/p/77eaaf34e732

https://blog.csdn.net/qq_42068550/article/details/89480350