vue的计算属性computed 的理解 以及与methods, watch 的区别和使用场景

1、methods,computed的区别

例子:

var vm = new Vue({
 el: '#app',
 data: {
    msg: 'nihao',
    text: 'byebye'
 },
 computed: {
    getmsg: function () {
       return this.msg
    }
 },
 methods:{
    gettext:function () {
       return this.msg
    }
}  
})
<p>msg:{{getmsg}}</p>  
<p>text:{{gettext()}}</p> 
在这个例子中,只要msg值发生变化,getmsg方法就会触发,而text的值发生变化,只要没有调用gettext方法,显示的值不会动态改变。就是说,methods中就是普通的方法,通过调用执行,computed中的方法会监听自己的依赖,依赖发生变化方法会自动执行。

1. computed 和methods 达到的效果是相同的

2. 计算属性computed和methods都不应该使用箭头函数来定义计算属性 因为箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向Vue
不同点是:

1. 计算属性compute是基于他们的依赖(如果是实例范畴之外的依赖,比如非响应式的not reactive是不会触发属性更新的)进行缓存(计算属性的结果会被缓存),只有相关依赖会发生改变时才会重新求值,未改变只会返回只之前的结果,不在执行函数 .原值与新值一样不会触发,函数的返回值就是最终获取的值.
2.  computed是响应式的,methods并非响应式。
3.  调用方式不一样,computed定义的成员像属性一样访问,methods定义的成员必须以函数形式调用。
4.  computed是带缓存的,只有其引用的响应式属性(属性绑定)发生改变时才会重新计算(如果引用的属性没有改变,则调用上一次缓存值),而methods里的函数在每次调用时都要执行
5. computed中的成员可以只定义一个函数作为只读属性,也可以定义get/set变成可读写属性,这点是methods中的成员做不到的。 computed 计算属性的方法在用属性时不用加(),而methods 方法在使用时要像方法一样去用,必须必须要加(){{ mes() }}

默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。

watch适合处理的场景是,侦听一个数的变化,当该数据变化,来处理其他与之相关数据的变化(该数据影响别的多个数据)==当数据发生变化时,执行异步操作或较大开销操作的情况。如图所示:

computed适合处理的场景是,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性。如图所示:

猜你喜欢

转载自blog.csdn.net/liuliu3636/article/details/88072267