Vue中computed属性和vm.$data数据绑定原理如何相互关联并实现高效数据响应？

本文共计2715个文字，预计阅读时间需要11分钟。

目录 + 官方一个最简单的例子如下 + 先看看 + initData + 这条线 + 我们具体看看defineReactive的源代码 + 在初始化computed时，有两个地方需要去关注 + 我们看看Watcher的构造函数 + 使用vuex中store中的数据

目录

• 官方一个最简单的例子如下
• 先看看 initData 这条线
• 我们具体看看defineReactive的源代码
• 在初始化computed时，有2个地方需要去关注
• 我们看看Watcher的构造函数

使用vuex中store中的数据，基本上离不开vue中一个常用的属性computed。

官方一个最简单的例子如下

var vm = new Vue({   el: '#example',   data: {     message: 'Hello'   },   computed: {     // 计算属性的 getter     reversedMessage: function () {       // `this` 指向 vm 实例       return this.message.split('').reverse().join()     }   } })

不知大家有没有思考过，vue的computed是如何更新的，为什么当vm.message发生变化时，vm.reversedMessage也会自动发生变化？

我们来看看vue中data属性和computed相关的源代码。