总结vue响应式原理

183 阅读1分钟
  vue 数据响应式
    遍历data里面所有的property,并且使用Object.defineProerty把property转换为getter/setter。

    getter/setter的作用是为了在vue内部能够追踪依赖,在property被访问和修改时通知变更。

    每一个组件实例都对应一个watcher实例,会在组件被渲染时把接触的数据property记录为依赖,
    如果依赖想的setter改变时,会通知watcher然后使组件重新渲染;

    就相当于是在vue data里面的数据,在页面上展示,如果data里面的数据进行改变,那么页面的数据也会重新渲染


    由于JavaScript的限制,Vue不能检测数组和对象的变化,所以在复制数据和对象时,经常会有数据刷新页面不刷新的情况,
    这种情况下数组可以使用push,splice等操作,或者遍历数据通过this.$set()去改变页面数据,
    对象也可以使用this.$set()去触发页面刷新