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只基于依赖项进行改变。