computed计算属性和data_data 和 computed 的区别

这样看来，data 和 computed 在功能上似乎没有任何区别。

data 和 computed 最核心区别

先一言以蔽之，data 和 computed 最核心的区别在于 data 中的属性并不会随赋值变量的改动而改动，而computed 会。(赋值变量类似：num: aaa.bbb,直接赋值是 num: 123)。下面有两个例子来佐证。

第一个例子

num1是data中的变量，其初始值为：{{num1}}

点击按钮后，data中的num1变化为：{{num1}}

点击按钮后，computed中的c_num1变化为：{{c_num}}

给num1+10

---

1.data定义的属性不会因为它的赋值变量的变化而变化

2.computed定义的属性会随它的赋值变量的变化而变化

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

}

},

})

第二个例子

父组件改变 props，子组件如果直接使用 props，会触发子组件更新

2. 父组件改变 props，子组件如果将 props 放进 data 中 再使用，不会触发子组件更新

3. 父组件改变 props，子组件如果将 props 放进 computed 中再使用，会触发子组件更新

代码的例子如下

父组件的 msg---{{msg}}

父组件改变 props

Vue.component('temp-comp', {

template: `

直接使用 props---{{fatherMsg}}

将 props 放进 data 再使用---{{dataFatherMsg}}

将 props 放进 computed 再使用---{{computedFatherMsg}}

`,

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"

}

}

})

再回到第一张图，这里 data 里声明函数的话，其实就和 methods 一模一样了，根据官网的描述，计算属性是基于它们的响应式依赖进行缓存的。这句话比较抽象，意思就是只要计算属性依赖的那个数据不变，计算属性就不会重新计算，而 methods 是只要页面有任何数据变化导致数据的更新，methods 就会重新计算。官网没有给出实例，这里给出一个简短的例子。

{{now()}}-----{{now2}}-----{{num}}

改变 num

let app = new Vue({

el: "#app",

data: {

num: 10,

now () {

return Date.now()

}

},

computed: {

now2 () {

return Date.now()

}

},

methods: {

hancleClick () {

this.num += 10

}

}

})

换一个角度来理解 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源码