MVVM

  • M：模型（Model）：data
  • V：视图（View）：模板
  • VM：视图模型（ViewModel）：Vue实例对象

Vue收到了MVVM模型的启发，MVVM是vue实现数据驱动视图和双向数据绑定的核心原理，通过ViewModel监听DOM和数据源的变化。

Object.defineProperty

let number = 15let person = {    name: 'zs',    gender: 'male',    age: 20}//此种方式添加的属性，不可被枚举（遍历）Object.defineProperty(person, 'age', {    value: 18,    enumerable: true,//控制是否可枚举（遍历）    writable: true,//控制是否可修改    configurable: false,//控制是否可删除    //读取person的age属性时，get函数就会被调用，返回值是age的值    get() {        return number    },    //修改person的age属性时，set函数就会被调用，返回值是value的值    set(value) {        number = value    }})

数据代理

通过一个对象代理对另一个对象的操作（读/写），更加方便操作data中的数据。

基本原理：

  • 通过Object.defineProperty（）把data对象所有属性添加到vm上。
  • 为每一个添加到vm上的属性，都指定一个getter和setter。
  • 在getter和setter内部去操作data中对应的属性。

Vue监测数据改变的原理

Vue会监视data中所有层次的数据。

“响应式”，这个词你可以已经听过很多遍，简单来说响应式就是：数据发生变化，UI页面做出响应，但Vue是怎么发现数据被修改了？

Vue如何检测对象属性的改变？

将data代理到vm实例，在vm上通过Object.defineProperty（）添加getter和setter，通过setter实现监视，且要在new Vue时就传入要监测的数据。

  • 对象中后添加的数据，Vue默认不做响应式处理；
  • 如需给后添加的属性做响应式，可以使用：
Vue.set(target,propertyName/index,value)vm.$set(target,propertyName/index,value)//vue.set不能直接给data加数据（对象不能是vue实例或Vue实例的根数据对象）,只能给其中的对象添加

Vue如何检测数组的改变？

Vue通过包装数组身上常用的方法来实现（pop、push、shift、unshift、sort、sploce、reverse），当调用以上被包裹的方法时，会触被Vue检测到，也可以使用Vue.set或vm.$set。

第一步：正常调用原生Array.prototype上的方法；

第二步：重新解析模板、生成虚拟DOM…进而更新页面；

当使用（filter、concat、slice），可以用新数组替换旧数组。