vue响应式原理

发表于 | 分类于

vue响应式原理 vuejs

原理

1
2
3
4
5
6
var vw = new Vue({
  el:'#app',
  data:{
    message:'123'
  }
});
  • 先把data封装 可以getter、setter
  • 通过watch观察数据变化 告诉 renderFun() 改变 dom
  • dom => touch => data => watch => renderFun => dom

声明响应式属性

  • vue不允许动态添加根级响应式属性

  • 可以通过set(this.someObj,key,value) 给根级响应式属性 添加属性

  • 添加一些属性

    1
    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

异步更新队伍

  • oldvalue => newvalue => 异步(promise.then)(去除重复) => 更新dom
  • nextTick() 数据更新 dom更新完成 调用回调函数