data 和 computed 的区别
这样看来，data 和 computed 在功能上似乎没有任何区别。
data 和 computed 最核心区别
先一言以蔽之，data 和 computed 最核心的区别在于 data 中的属性并不会随赋值变量的改动而改动，而computed 会。（赋值变量类似：num: aaa.bbb,直接赋值是 num: 123）。下面有两个例子来佐证。
第一个例子
<div id="app"> <h2>num1是data中的变量，其初始值为：{{num1}}</h2> <h2>点击按钮后，data中的num1变化为：{{num1}}</h2> <h2>点击按钮后，computed中的c_num1变化为：{{c_num}}</h2> <button @click="outerNumChange">给num1+10</button> <hr> <h1>1.data定义的属性不会因为它的赋值变量的变化而变化</h1> <h1>2.computed定义的属性会随它的赋值变量的变化而变化</h1> </div> <script> let outer_obj = {num: 30} let app = new Vue({ el: "#app", data: { temp: outer_obj, // 这一句一定要加，必须在 data 对象上存在才能让 Vue 将它转换为响应式的，见下图官方文档 num1: outer_obj.num }, computed: { c_num () { return outer_obj.num } }, methods: { outerNumChange () { outer_obj.num += 10 } }, }) </script>
第二个例子
- 父组件改变 props，子组件如果直接使用 props，会触发子组件更新
2. 父组件改变 props，子组件如果将 props 放进 data 中 再使用，不会触发子组件更新
3. 父组件改变 props，子组件如果将 props 放进 computed 中再使用，会触发子组件更新
代码的例子如下
<div id="app"> <h2>父组件的 msg---{{msg}}</h2> <button @click="handleClick">父组件改变 props</button> <temp-comp :father-msg="msg"></temp-comp> </div> <script> Vue.component('temp-comp', { template: ` <div> <h2>直接使用 props---{{fatherMsg}}</h2> <h2>将 props 放进 data 再使用---{{dataFatherMsg}}</h2> <h2>将 props 放进 computed 再使用---{{computedFatherMsg}}</h2> </div> `, props: ['fatherMsg'], data () { return { dataFatherMsg: this.fatherMsg } }, computed: { computedFatherMsg () { return this.fatherMsg } } }) let app = new Vue({ el: "#app", data: { msg: "hello" }, methods: { handleClick () { this.msg += " world" } } }) </script>再回到第一张图，这里 data 里声明函数的话，其实就和 methods 一模一样了，根据官网的描述，计算属性是基于它们的响应式依赖进行缓存的。这句话比较抽象，意思就是只要计算属性依赖的那个数据不变，计算属性就不会重新计算，而 methods 是只要页面有任何数据变化导致数据的更新，methods 就会重新计算。官网没有给出实例，这里给出一个简短的例子。
<div id="app"> {{now()}}-----{{now2}}-----{{num}} <br> <button @click="hancleClick">改变 num</button> </div> <script> let app = new Vue({ el: "#app", data: { num: 10, now () { return Date.now() } }, computed: { now2 () { return Date.now() } }, methods: { hancleClick () { this.num += 10 } } }) </script>换一个角度来理解 data 和 computed 之间的区别
考虑一下特殊情况
data: { foo () { return this.bar() + 1 }, bar () { return this.foo() + 1 } } // 这样的话就是循环引用，无解 为了解决这个问题，Vue 把数据抽象成了两层，第一层就是简单的数据（data），第二层就是 computed （依赖于 data，也就是依赖于前一层）。第二层可以引用第一层的数据，而第一层却不能引用第二层的数据。这也是为什么在 data 中不能引用 computed 中的数据的原因。
其实归根结底就是一个 Vue 实例在渲染的时候数据解析的顺序问题，结论是props->methods->data->computed->watch->created。官网的源码也写的很清楚，见下图
源码的链接在这里Vue源码
https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L48-L62