vue总结（一）

1、vue中数据发生变化，vm却知道数据发生改变（mvvm双向绑定的原理）

1. Vue在创建vm时，会将数据配置到实例中，内部通过Object.defineProperty方法，对数据进行get与set方法的绑定，当获取数据的时候会触发get方法，修改数据的时候会触发set方法，当set执行结束，内部会进一步触发watcher进行监听，从而数据改变，试图重新渲染

   Object.defineProperty：es5新增特性，但是IE678不支持，所以Vue只能应在IE9+的浏览器上

2. vue内部通过数据劫持&发布订阅模式实现数据的双向绑定：

   通过Object.defineProperty方法对所有的数据进行数据劫持，就是给这些数据动态的添加了getter与setter方法。

   在数据变化的时候发布消息给订阅者（Watcher），触发响应的监听回调。

   \1. 数据被vm管理，数据劫持，（Object.defineProperty） 动态添加get与set

   \2. 数据发生改变了 vm.msg = “你好” 触发其自身上面的set方法

   \3. set触发成功后，数据改变完成了，然后通知watcher触发响应的监听回调

2、Vue的特点

1. vue是渐进式javascript框架：用到什么功能引入什么功能模块
2. 易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）
3. （1）Vue是一个mvvm的js框架，但是，Vue的核心库只关注视图层，开发者关注的只是m-v的映射

3、mvc/mvp/mvvm区别

（1）mvc（反馈慢）：用户对view操作以后，view捕捉到这个操作会把处理权交给Controller进行处理，Controller会对来自View数据进行预处理、决定调用哪个Model的接口；然后由Model执行相关的业务逻辑（数据请求）； 当Model变更了以后， View通过观察者模式收到Model变更的消息以后，然后重新更新界面

【注】缺点：Vue强依赖与model

（2）mvp：mvp将mvc中的controller改名为presenter同时改变方向

基础操作与mvc一样，在通过观察者模式后将消息传递给presenter而不是传给view，presenter获取到model通过view提供的接口更新界面

【注】缺点：view层非常薄，但是presenter非常的厚所有逻辑部署都在presenter

（3）mvvm（时刻反馈）：双向绑定原理牛

【mvvm是从mvc中衍生出来的实现数据双向绑定的 viewmodel相当于中间件在view和model中做一个相互的传递 view做视图model做数据 其余所有操作都在viewmodel中进行 】

mVVM的调用关系和MVP一样。但是，在ViewModel当中会有一个叫 Binder。你只需要在View的模版语法中，指令式地声明View上的显示的内容是和Model的哪一块数据进行绑定即可。 当ViewModel对Model进行更新的时候，Binder会自动把数据更新到View上去；当用户对View进行操作（例如表单输入），Binder也会自动的把数据更新到Model上去。这种方式称为：双向数据绑定。

4、V-for为什么加key

（key的值是唯一的，不变的，尽量不要使用index下标，除非知道index不会改变）

1. 虚拟DOM进行对比的时候，添加、删除元素key值可以提高效率
2. 如果没有key，内部添加节点会进行卸载、装载的过程，效率太低
3. 添加key以后，本着key值相同DOM节点复用的原则

5、虚拟DOM与diff算法

（1）如果节点类型改变，直接将旧节点卸载，替换成新的节点，旧节点包括下面的子节点都将卸载，如果新节点和旧节点仅是类型不同，这样做效率就会很低

（2）节点类型不变属性或属性值改变，不会卸载节点执行节点更新操作

（3）文本改变直接修改文字内容

（4）移动、增加、删除子节点时：就会进行卸载、装载的过程效率很低在没有key值时就会进行这个操作

（5）有key值时：Vue就能根据key值 直接找到具体的位置进行操作，效率很高