vue 数据响应原理

 响应数据原理: 初始化通过Proxy get方法收集依赖(dep对象的作用)---> 数据改变触发set--> set触发notify(更新依赖) 

--> 再更改对应的dom(通过diff算法,patchVnode对比dom,对比根节点再创建等功能)--->重新render(渲染)

// vue2 是通过defineproperty 数据响应绑定
var obj = {
  na: 'liu man',
  age: 666
}
// Object.defineProperty 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
// 缺点不能深度监听,需递归
var _value = obj.na
Object.defineProperty(obj,'na',{
  // value: 'liu man',
  // writable: true,  // 是否可写  默认可写
  // enumerable: true, // 是否可枚举  默认可枚举
  // configurable: true // 是否可删除  默认可删除
  configurable: false,

  get: function() {
    console.log('get');
    return _value
  },
  set: function(newValue) {
    console.log('set');
    return _value = newValue
  }
})

console.log(obj.na = '100');
console.log(obj.na);
console.log('---------');
// 如果在对象中存在,则返回给定的属性的属性描述符
console.log(Obje

你可能感兴趣的:(Vue,vue)