Vue计算属性vs监听器vs函数方法
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.计算属性
计算属性写法是一个函数,以属性的方式进行调用,计算属性会根据现有的数据生成一个新的数据,并且两者会产生关联,建立永久性缓存,并且当无关数据发生改变的时候,计算属性内部不会重新计算,而是直接从缓存里面取值使用即可。
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
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可以监听现有的数据的改变,然后当现有的数据发生改变后,接下来实现对应的业务逻辑。
监听具体的某个值的改变,当某个值发现变化了,对应的回调函数会重新计算。
3.函数方法
methods里可以封装一些函数方法,方法可以修改数据。但是当页面中的使用了无关数据,无关数据改变,该方法也会调用重新计算。
computed vs watch的区别?
1.watch的监听只能是单个的监听,每次监听只能监听一个变量的修改,不能同时监听多个变量的修改
computed可以依赖多个数据的变化(并且只跟他所依赖的项进行关联)
2.当需要在数据变化时执行异步或开销较大的操作时,只能采用watch
computed vs methods中函数方法的区别?
1.无关数据发生变化时,methods中函数重新调用,重新计算。computed不会被调用,从缓存取值
2.多次调用相同方法时,methods中函数调用多次,计算多次。computed就只计算一次,之后从缓存取值,computed只基于依赖项进行改变。