1.data和computed的区别
1.data属性不会随着赋值属性的改动而改动（赋值属性类似 num：obj.num 直接赋值：num：3333）
2.computed属性属于持续变化跟踪。在computed属性定义的时候，这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量，computed属性值会随之改变。
<template>
<div class>
<h2>这是data中的num:{{ num1 }}</h2>/* 不会递增 */
<h2>这是computed中的num:{{ num2 }}</h2> /* 会递增 */
<button @click="changeNum">点击改变obj.num</button>
</div>
</template>
<script>
let obj = {
num: 2
};
export default {
data() {
return {
num1: obj.num,
t: obj //这一句一定要，这样组卷复用的时候num2共享状态。没有这句，computed中的num2也不跟踪状态。
};
},
computed: {
num2() {
return obj.num;
}
},
methods: {
changeNum() {
++obj.num;
console.log(obj.num);
}
}
};
</script>
2.computed和method的区别
- 区别一：
computed调用是属性调用，不需要加括号，
methods是函数调用，需要加括号
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Reversed message: "{{ reversedMessage2() }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
- 区别二：
computed是 当下次所依赖的函数没有发生改变时，再次调用时，会从缓存中读取数据；
methods是 没有缓存存数据，每次调用每次执行，无论值有没有改变
- 优缺点
两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
网友评论