vue入门篇（六）：计算属性和侦听器

前言

我们在前面提到，插值表达式里面可以执行JavaScript代码，但是当我们的表达式很复杂时就很难去维护了，而且也不直观。Vue给我们提供了两个十分有用的选项属性：computed和watch，下面我们来看看怎么使用吧。

计算属性computed

计算属性有两种写法，一个是函数，另外一个是对象。当为函数时，默认调用计算属性的get方法，下面我们看一个简单的例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      firstName: <input type="text" v-model="firstName" /><br />
      lastName:<input type="text" v-model="lastName" /><br />
      fullName:<input type="text" v-model="fullName" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          firstName: "Lao",
          lastName: "Cao"
        },
        //计算属性
        computed: {
          // 函数用法，默认调用get方法
          fullName() {
            return `${this.firstName} ${this.lastName}`;
          }
        }
      });
    </script>
  </body>
</html>

我们可以看到fullName的值取决于firtName和lastName的值，而且减轻了模板的负担，并且一目了然。除了函数的用法还有对象的用法：

   computed: {
     // 对象用法，自定义get和set
     fullName: {
       get() {
         return `${this.firstName} ${this.lastName}`;
       },
       set(newValue) {
         let names = newValue.split(" ");
         this.firstName = names[0];
         this.lastName = names[names.length - 1];
       }
     }
   }

这种方式可以自定义computed的行为，比如我们设置fullName的值，可以动态计算出firtName和lastName的值。

那么计算属性解决了什么问题呢，对比methods有什么优势呢?

计算属性解决了模板的复杂逻辑运算问题，当计算属性不变，其他属性发生改变，页面重新渲染后，计算属性不会再执行，因为初始执行后有缓存，计算属性是基于它们的响应式依赖进行缓存的。计算属性可以提升渲染的性能，方法是没有缓存的，调用一次就要计算一次。

当然也不是说methods很不好，当我们不需要缓存的时候就可以使用methods的方式来计算属性的值。

侦听器watch

watch的作用和computed差不多，它监听属性的变化,只有当属性发生变化才去执行，实现起来比前两种要麻烦一点。而且，在相同情况下，使用计算属性的性能比侦听器和方法要好很多，但是它肯定有它存在的理由的，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

比如说当我们需要监听一个数据的变化，并且我们要在它中间变更其他数据的状态，这时使用watch就很合适了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      fullName:<input type="text" v-model="fullName" /><br />
      {{gender}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          fullName: "Lao Cao",
          gender: 'male'
        },
        watch: {
          fullName (newValue) {
              if (newValue === '美女') {
                  this.gender = 'female'
              }
          }
        }
      });
    </script>
  </body>
</html>

上面的例子中，我们输入美女后，fullName监听到了数据变化，从而设置gender属性为female。这个例子虽然简单，但是也能够看到watch的作用了。

总结

这篇文章主要讲述了计算属性computed和侦听器watch的使用场景以及它们的区别，computed适合需要复杂计算表达式的场景，而watch适合一切开销比较大的场景如异步请求。在实际开发中，合理搭配使用会让我们开发效率和代码质量大大提高。

参考

【1】计算属性和侦听器

来源：CSDN

作者：Beyond_630

链接：https://blog.csdn.net/weixin_42429672/article/details/101296843

标签

vue