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

在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>