计算属性computed与watch以及methods的区别
- methods
首先我们先聊最常见的methods
众所周知他是vue中的方法
里面的函数的特性是随时调用随时执行,简称随叫随到。你叫我三次,我就答应三声 - computed
再说说第二熟悉的computed
使用场景:当一个属性受多个属性影响的时候,需要使用computed
用法如下:<h2>{{fullName}}</h2> data: { firstName: 'Lebron', lastName: 'James' }, // computed: 计算属性() computed: { fullName: function () { return this.firstName + ' ' + this.lastName } },
他和methods不同的地方在于,他有缓存
也就是说,只有当数据变化,并且再次调用他,他才会被执行,两个条件缺一不可
你可以认为这个属性非常懒惰,不给钱不干活
举个例子:当data中数据没有变化时,调用n次,只会执行一次computed,也就是最开始的那次(首次渲染调用),其余n-1次使用缓存 - watch
听名字大概就知道他要干什么了
没错,我就是用来监听你的变化
他和computed的第一个区别就是他没有缓存,数据发生变化,便执行一次
第二个区别就是在watch在第一次渲染页面时不加载,而computed在第一次渲染页面时要加载
watch还有一些高级属性
可以参考链接说明