Vue calculated attribute vs listener vs function method
new Vue({
el: '#app',
data: {
num: 1, //被监听，被函数调用，被属性调用
msg: 'hello', //页面中的无关数据
watchNum: ''
},
watch：{
//监听器
num:{
//监听值
immediate:true, //初始化的时候也会执行一次
handler(newValue,oldValue){
//固定封装函数名
this.watchNum = newValue*2 //只有监听值发生改变才执行
}
}
}
computed: {
//计算属性
computedNum():{
return this.num * 2 //依赖项
}
},
methods:{
//函数方法
doubleNum(){
//当无关数据更改时，方法会被调用
return this.num * 2 //如果数据没有声明，值为NaN
}
}
})
1. Calculated attribute The
written method of calculated attribute is a function, which is called as an attribute. The calculated attribute will generate a new data based on the existing data, and the two will be related to establish a permanent cache, and when irrelevant data changes At the time, the calculated attribute will not be recalculated internally, but can be used directly from the cache.
Calculated properties only have getters by default, but you can also provide a setter when needed:
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
2. Watch
watch can monitor the changes of existing data, and then when the existing data changes, then implement the corresponding business logic.
Monitor the change of a specific value. When a value changes, the corresponding callback function will be recalculated.
3. Function
methods can encapsulate some function methods in methods, and methods can modify data. But when irrelevant data is used in the page and the irrelevant data is changed, this method will also call to recalculate.
The difference between computed vs watch?
1. The monitor of watch can only be a single monitor, each monitor can only monitor the modification of one variable, and cannot monitor the modification of multiple variables at the same time. The
computed can depend on the changes of multiple data (and only be associated with the items it depends on)
2. When you need to perform asynchronous or expensive operations when the data changes, you can only use watch
What is the difference between the function method in computed vs methods?
1. When irrelevant data changes, the functions in methods are called again and recalculated. The computed will not be called, and the value will be taken from the cache
. 2. When the same method is called multiple times, the function in the methods is called multiple times and calculated multiple times. The computed is only calculated once, and then the value is retrieved from the cache, and the calculated is only changed based on the dependencies.