vue深入响应式原理

141 阅读1分钟

深入响应式原理 由于 Vue 不允许动态添加根级响应式 property,所以你必须在初始化实例前声明所有根级响应式 property,哪怕只是一个空值:

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 通过getter和setter函数来

直接通过赋值操作数据或者对象,property不是响应式的,

vm= new Vue({mydata})

1.vm对data 做了一层proxy代理, 对vm.n 也就是等价与mydata.n,通过也是通过this 2.会对mydata的所有属性监控。为什么要监控,为了防止mydata的属性变了,vm不知道 vm知道了话会怎样? 就可以调用render(data)函数了。

你有看过源码吗 进入github 切入到2.6分支 进入src文件里的instance文件core文件 声明了vue函数 然后初始化了options。 对state进行了初始化、用下划线data存储写入的data对,传过来的state进行了一层proxy代理。通过代理可以访问原始的data。 通过observe函数进行监听

vue.set()

Vue 不能检测数组和对象的变化 为了解决这个问题 就是通过vue.$set()

异步更新队列 在vue中更新dom操作的时候 使用vue.nextTick() 异步执行 使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0)