模板内设计它们的初衷是用于简单运算，对于任何复杂逻辑，你都应当使用计算属性。
计算属性和方法的区别和联系？
- 计算属性会缓存 ，方法不会缓存
- 理论能用计算属性的都可以用方法
计算属性和监听器区别和联系？
- 监听器和计算属性类似，会有缓存
- computed擅长处理的场景：一个数据受多个数据影响
- watch擅长处理的场景：一个数据影响多个数据
- 计算属性在大多数情况下更合适，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
- 计算属性中会用到data里面定义的属性
- 监听器是监听data里面定义的属性
看代码
计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
方法
<p>Reversed message: "{{ fullName() }}"</p>
// 在组件中
methods: {
fullName: function () {
console.log("计算了一次")
return this.firstName + " " + this.lastName;
}
}
监听器
var vm = new Vue({
el: '#app',
data: {
firstName: "王",
lastName: "小智",
age: 28，
fullName
},
// 监听器
watch: {
firstName: function () {
console.log("计算了一次");
this.fullNmae = this.firstName + this.lastName;
},
lastName: function () {
console.log("计算了一次")
this.fullNmae = this.firstName + this.lastName;
}
}
})
