计算属性和监听器 (VUE)

概述计算属性和监听器 计算属性 首先我们知道，模版内的表达式非常便利，但是设计他们的初衷时由于简单运算的，在模版中国放入太多的逻辑会这个模版难以维护。因此计算属性应运而生。 如果不适用计算属性带来的复杂程度可以看下面的例子 ```html 对于复杂的逻辑而言，我们更多的应该使用计算属性 下面我们来看一个基础的例子 <div id="app"> <p>{{ msg }}</p> <!-- 计算属性和监听器 计算属性

首先我们知道，模版内的表达式非常便利，但是设计他们的初衷时由于简单运算的，在模版中国放入太多的逻辑会这个模版难以维护。因此计算属性应运而生。

如果不适用计算属性带来的复杂程度可以看下面的例子
```HTML

对于复杂的逻辑而言，我们更多的应该使用计算属性

下面我们来看一个基础的例子

<div ID="app">    <p>{{ msg }}</p>    <!-- 及其复杂的逻辑表达式非常不容易去维护 -->    <p>{{ msg.split('').reverse().join('') }}</p></div>

const vm = new Vue({    el: '#app',data: {        msg: 'hello'    }})

当我们使用计算属性的时候，看看效果的方便

<div ID="app">        <p>{{ msg }}</p>        <p>{{ msg.split('').reverse().join('') }}</p>        <p>{{ reveredMessage }}</p>    </div>

Js

const vm = new Vue({    el: '#app',data: {            msg: 'hello',},computed: {            // 计算属性的getter             reveredMessage: function () {                // this 指向时vm的实例                return this.msg.split('').reverse().join('')                }            }     })

计算属性缓存vs方法

当然我们可以注意到，我们可以在表达式中调用方法来达到同样的效果。

如同下面这个使用方法的例子

<!-- 这个方法直接调用来methods中的方法 --><p> 调用methods中的方法 {{ changeMsg() }} </p>

Js部分

// 直接简写methods: {    changeMsg() {        return this.msg.split('').reverse().join('')    }}

我们可以将同一个函数定义一个方法而不是一个计算属性。两种方式的最终结果确实完全相同的，然而，不同的计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时，他们才会重新求值。这就意味这只要msg还没发生改变，多次访问reveredMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

这样也同样的意味这下面的计算属性将不再更新，因为 Date.Now()不是响应式依赖：

computed: {    Now: function () {        return Date.Now()    }}

相比之下，每当触发重新渲染时，调用方法总会再次执行函数

思考 我们为什么使用computed计算属性，在我看来，简单来说，计算属性可以缓存。

为们为什么需要缓存？假如我们有一个性能开销比较大的计算属性getCount,它需要遍历一个巨大的数组并作出大量的计算。然后我们有可能有其他的计算属性依赖于getCount,如果没有缓存，我们将不可避免的多次去执行getCount的getter！。。。。当然了，如果你不希望有缓存，换一句话来说，你可以使用方法来代替。

计算属性vs侦听属性

Vue提供了一种更为通用的方式来观察和响应Vue实列上的数据变化：侦听属性。当然你有一些数据需要随着其他数据的变化而变动时你很容易滥用wathch，--。
然而呢，我们最好的做法时使用计算属性而不是命令式的watch回调。

下面我们可以想想这个例子

<p> {{ fullname }} </p>

主要看Js代码

cosnt vm = new Vue({    el: '#app',data: {        firstname: '',lastname: '',fullname: '',watch: {        firstname: function (newVal,oldVal) {            this.fullname = newVal + this.lastVal        },lastname: function (newVal,oldVal) {            this.fullname = this.firstname + newVal        }    }})

使用watch的话每次就只能监听到一个属性。而且命令是重复的，将它和计算属性进行对比。

<p> {{ fullname }} </p>

看Js代码

cosnt vm = new Vue({    el: '#app',// fullname: '',computed: {        fullname: {            // 只需要执行一次就OK            return this.firstname + this.lastname        }    }   })

侦听器

虽然计算属性在大多数情况下更加适合，但有时候也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更加通用的方法，来响应数据的变化。当需要在数据变化时执行异步或者开销较大的 *** 作时，这个方法时最有用的。

总结 以上这个例子，使用的watch选项中允许我们执行异步 *** 作（访问一个API），限制我们执行该 *** 作的频率，并在我们最终结果前，设置中间状态／。这些计算属性是无法做到的。

当然我们除了有watch之外，我们还可以使用vm.$watch 这个API。

总结

以上是内存溢出为你收集整理的计算属性和监听器 (VUE)全部内容，希望文章能够帮你解决计算属性和监听器 (VUE)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。