重学vue2.0(五):计算属性和监听器
luckyatum2021
共 3209字，需浏览 7分钟
·
2021-10-02 18:38
点击前端充电营，关注我们
"app"> {{ message.split('').reverse().join('') }}</div>上述表达式的作用是反转message，它可能不是那么容易阅读，尤其是如果模板中存在很多这样的反转字符串的时候，阅读起来难度会大大增加。这时候就可以使用计算属性，将上述表达式的值重新定义为一个属性，反转属性使用computed定义：
"app"> {{ reverseMessage }}</div>var vm = new Vue({ el: '#app', data: { message: 'Hello' }, computed: { reverseMessage () { return this.message.split('').reverse().join('') } }})
olleH
上面有两个点需要注意，一个是在reverseMessage中的this指向的是vue实例本身，因此可以直接使用this.message访问实例中的data属性；另一个是当reverseMessage中依赖的响应式数据（message）发生变化的时候，reverseMessage会重新进行计算，得到更新后的值。
#计算属性缓存和方法实际上，计算属性能做的事情，方法也可以做。例如上述例子可以修改如下：
<div id="app"> {{ reverseMessage }}div>
var vm = new Vue({ el: '#app', data: { message: 'Hello' }, methods: { reverseMessage () { return this.message.split('').reverse().join('') } }})
olleH
使用方法和使用计算属性最大的不同，在于计算属性是基于它们依赖的响应式数据进行缓存的。也就是说，如果this.message不更新，那么每次访问reverseMessage的值都会立刻返回上次计算后的结果，而不会重新执行计算过程。
但是methods则不一样，每次触发重新渲染时，无论message变化与否，调用方法都会再次执行。所以当我们有一个比较庞大的数组，可能需要消耗较大的性能对它进行处理的时候，不妨考虑使用计算属性。 #计算属性的setter计算属性默认情况下只有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] } }}
现在再运行this.fullName = 'John Doe'时，setter会触发，同时this.firstName和this.lastName也会更新。
监听器watcher是Vue官方提供的用于监测响应式数据变化的特性，当监听的数据发生变化后，监听器的回调函数会触发，可以在函数中执行异步或者其他开销较大的操作。
<div id="app"> <div>{{ fullname}}div> <input v-model="firstname" />div>
var vm = new Vue({ el: '#app', data: { fullname: '', firstname: 'John' }, watch: { firstname (val) { this.fullname = 'Current fullname is: ' + val; } }})
当用户在输入框中修改firstname的值时，watch回调将会触发，回调函数的参数就是最新的firstname值，可以在这里做我们想要的操作。
#计算属性和监听器计算属性和监听器是很类似的，使用哪一个取决于具体的业务场景。从Vue官方的例子我们或许可以直观地感受一下它们的差异：<div id="app">{{ fullname }}div>
var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } }})
上述是使用watch时候的写法，我们写了两个watcher，fitstName和lastName，当它们各自更新时，都需要更新fullName。下面是通过计算属性的写法：
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }})
好得多了，不是吗？
#动态watchVue官方挂载在实例上的方法中，有一个方法用于动态在代码中新增watch和取消watch属性，这个方法叫做$watch，它的用法如下：var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, methods: { addWatch() { if (new Date().getHours() > 10) { var unwatchFirstName = this.$watch('firstName', function (val) { // 这里书写监听回调 this.fullName = val + this.lastName; }) } else { // 取消监听 unwatchFirstName(); } } }})
上面例子做了一件事情：在10点之后，开始监听fitstName的变化然后更新fullName，否则，取消监听。
this.$watch接收监听的key和一个回调函数，它会返回一个取消监听的函数，调用该函数会取消对该key的监听。
记得点个赞点个关注点个收藏！感谢！
关注【前端充电营】
回复【电子书】
获取100+
技术书籍！
往期推荐
浏览
30评论