VUE之计算属性和监听器

vue中对于数据的处理最常用的有计算属性以及监听器。计算属性和监听器都是vue实例的一个属性。本文就来聊一聊计算属性和监听器。

计算属性

什么是计算属性？

计算属性（computed）是vue实例的一个属性。计算属性通俗点讲就是某个元素数据的值不是直接获取，而是依赖其他元素数据的值来获取。比如下面这个场景：有三个元素：姓、名、姓名，其中姓和名的值是通过数据绑定直接在输入框中获取或设置，而姓名的值是通过拼接元素姓以及元素名的值来获取的，一旦元素姓或者元素名有变化，那么元素姓名的值也要跟着变化。那么这种情况下，元素姓名的值就用计算属性来获取就比较合适。

计算属性中有set和get两种方法，这两种方法适用的情况不一样，get用来获取属性值，set用来监听属性值的变化，需要注意的是计算属性存在缓存，多次获取属性值只执行一次get计算。就拿上面那个例子来讲，第一种情况：如果是单向绑定，也就是元素姓和元素名的变化会影响元素姓名的值，但是元素姓名的值变化不会影响到元素姓和元素名的值，那么就用计算属性的get方法就行，例如：

computed: {

//第一种写法：

xingming: function () {

return this.xing + this.ming

}

//第二种写法：

xingming () {

return this.xing + this.ming

}

//第三种写法：

xingming ：{

get（）{

return this.xing + this.ming

}

}

}

第二种情况：如果是双向绑定，也就说，元素姓和元素名的变化会影响到元素姓名，反过来元素姓名的变化同样会影响到元素姓和元素名，这时候就同时用到计算属性的get和set方法了，例如：

computed: {

xingming ：{

get（）{

return this.xing + this.ming

}

//set用来监听属性值的变化，参数value就是元素的最新值

set（value）{

const names = value.split（‘ ’）

this.xing = names[0]

this.ming = names[1]

}

}

}

监听器

什么是监听器？

监听器（watch）也是vue实例的一个属性，其主要就是用来监听元素值的变化从而来做各种相应的处理，比如上面例子中监听元素姓或元素名的变化从而去提示用户，这时候就可以用监听器去实现。例如：

watch: {

// 如果 `xing` 发生改变，这个函数就会运行，就会提示用户元素值的现值和原值

xing: function (newQuestion, oldQuestion) {

alert('姓原值：'+ oldQuestion)

alert('姓现值：'+ newQuestio)

}

}

以上就是计算属性和监听器的相关概念及运用，如有错误欢迎指正！谢谢！