Vue的响应式原理

Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将他们转为getter/setter 并且在内部追踪相关依赖,在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而它关联的组件进行更新。



Vue监控属性值的变化(watch)

watch: {

    firstName: function (val) {

        this.fullName = val + ' 已发生变化';

    }

}

你可能感兴趣的:(Vue的响应式原理)