（四）watch与computed

watch

    在Vue框架中，watch监听器是一个非常强大的功能，它允许我们监视数据的变化，并在数据变化时执行一些操作，如异步请求或处理一些较为复杂的逻辑。watch监听器可以看作是一个更通用的方法来响应数据的变化。

    watch监听器的基本用法

    在Vue中，我们可以通过在组件的watch选项中声明一个方法来监听某个数据的变化。当被监听的数据发生变化时，Vue会调用这个方法。例如，以下代码展示了如何监听一个名为text的数据变量：

<script>

export default {
  data() {
    return {
      text: "旧数据"
    }
  },
  methods: {
    clickMe(){
      this.text = "新数据"
    }
  },
  watch: {
    text (newVal, oldVal){
   		 console.log("newVal", newVal)
 		 console.log("oldVal", oldVal)
   	}
  },

}

</script>

<template>

  <div class="card">
    <label>属性的watch</label>
    <span>{{text}}</span>
    <button @click="clickMe">clickMe</button>
  </div>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

深度监听

    在上面的方式中对于单个属性的监听还算有用，但是在面对复杂对象的内部情况改变时候就不在生效
比如我们代码内部是这样的。

export default {
  data() {
    return {
      text: "旧数据",
      textObj: {
		id: 1,
		name: '张三'	
	  }
    }
  },
  methods: {
    clickMe(){
      this.textObj.name = "新数据"
    }
  },
  watch: {
    textObj(newVal, oldVal){
   		 console.log("newVal", newVal)
 		 console.log("oldVal", oldVal)
   	}
  },

}
<template>

  <div class="card">
    <label>对象的watch</label>
    <span>{{textObj.name}}</span>
    <button @click="clickMe">clickMe</button>
  </div>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

我们就会发现控制台并有打印东西。如何更改呢？我们只需要将watch中代码更改为以下代码

    textObj: {
      handler: function (newVal, oldVal){
        console.log("newVal", newVal)
        console.log("oldVal", oldVal)
      },
      // 开启深度监听
      deep: true
    }

    解释：设置deep: true 则可以监听到person.name的变化，此时会给person的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

watch: {
    'textObj.name': {
      handler(newVal,oldVal) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

    其他说明：immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

computed

定义

    computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新。

用法

    一般情况下，computed默认使用的是getter属性

<template>
  <div>
    <div>
      姓：<input type="text" v-model="firstName" />
    </div>
    <div>
      名：<input type="text" v-model="lastName" />
    </div>
    <!-- 调用两次fullName -->
    <div>姓名：{{ fullName }}</div>
    <div>姓名：{{ fullName }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "张",
      lastName: "三",
    };
  },
  computed: {
    fullName() {
        console.log("这是fullName");
        return this.firstName + this.lastName;
    }
  }
};
</script>

computed的响应式依赖(缓存)

• computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。下面代码中，计算属性fullName，它依赖了firstName和lastName这两个属性，只要它们其中一个属性变化，fullName就会重新执行。
• computed计算属性会被缓存，在下面代码中使用了两次fullName，但在控制台只输出了一次 “这是fullName”。

应用场景

    当一个数据受多个数据影响时，可以使用computed

• 本组件计算
• 计算props的值
• 计算vuex的state或者getters值的变化

参考文章

1.vue中computed的详细讲解
2.Vue.js中 watch 用法详解（立即执行，深度监听）