1、计算属性缓存 vs 方法
基础例子
1、computed
用来监控自己定义的变量,该变量不在data
里面声明,直接在computed
里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
2、computed
比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed
属性来进行计算是最好的选择
3、与watch
之间的区别:刚开始总是傻傻分不清到底在什么时候使用watch
,什么时候使用computed
。这里大致说一下自己的理解:
4、watch
主要用于监控vue
实例的变化,它监控的变量当然必须在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('')
}
}
})