Vue - 计算属性，侦听器的使用

短命女 2021-07-25 16:15 484阅读 0赞

##        在Vue中，模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 ##

##        下面来简单讲解一下computed计算属性，watch侦听器的使用。 ##

--------------------

## 一. Vue 侦听器（watch） ##

侦听器是用来检测数据变化从而添加自己自定义逻辑的代码,这一点和计算属性很相似,计算属性一般作用于简单的一些小逻辑代码,如果逻辑比较复杂可以使用侦听器,注意的是侦听器性能方面比不上计算属性。

<template>
      <div>
        <el-row>watch侦听器执行结果：{
       {msg_Watch}}{
       {years}}</el-row>
        <el-divider></el-divider>
        <el-button @click="btnByWatch">改变侦听器值</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg1_Watch: "hello",
          msg2_Watch: "world ",
          msg_Watch: "hello world ",
    
          years: "2020"
        };
      },
      //侦听器
      //存在缓存机制，当侦听的值没有发生变化，不会执行侦听器
      watch: {
        //监听 msg1_Watch ，当 msg1_Watch 发生变化的时候执行
        msg1_Watch(curVal, oldVal) {
          if (curVal) {
            console.log("侦听器执行一次，改变结果为：", curVal);
            this.msg_Watch = this.msg1_Watch + " " + this.msg2_Watch;
          }
        },
        //监听 msg2_Watch ，当 msg2_Watch 发生变化的时候执行
        msg2_Watch(curVal, oldVal) {
          if (curVal) {
            console.log("侦听器执行一次，改变结果为：", curVal);
            this.msg_Watch = this.msg1_Watch + " " + this.msg2_Watch;
          }
        }
      },
      methods: {
        btnByWatch() {
          this.msg1_Watch = "改变";
          this.msg2_Watch = "成功";
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

## 二. Vue 计算属性（computed） ##

对于任何复杂逻辑，你都应当使用计算属性。  
       在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。只要其中任一数据变化，计算属性就会重新执行，视图也会更新。  
       计算属性具有缓存机制，当计算属性中所有依赖的变量没有发生改变的时候，计算属性不会重新执行；会一直用上一次计算完成的结果，便于提高性能。只有当计算属性中依赖的变量发生变化时，才会重新执行计算属性。

<template>
      <div>
        <el-row>computed计算属性执行结果：{
       {msg_computed}}{
       {years}}</el-row>
        <el-divider></el-divider>
        <el-button @click="btnByComputed">改变计算属性值</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg1_computed: "hello",
          msg2_computed: "world ",
    
          years: "2020"
        };
      },
      //计算属性
      computed: {
        //如下面的 msg_computed 计算属性中：依赖了两个变量 msg1_computed msg2_computed ，依赖的变量不改变时候 msg_computed 不会重新计算
        msg_computed() {
          console.log("计算属性执行一次");
          return this.msg1_computed + " " + this.msg2_computed;
        }
      },
      //不会有缓存机制，每次页面重新渲染，方法都会执行一次
      methods: {
        btnByComputed() {
          this.msg1_computed = "改变";
          this.msg2_computed = "成功";
        }
      }
    };
    </script>
    
    <style scoped>
    </style>