computed, watch, update 的使用和区别

watch 监听 data 中的数值，需要先在watch：{ } 中绑定要监听的值，监听的数值只要变化，就执行 watch
1. 默认情况下，变量被初始化的时候，watch 不会立即执行，如果想要立即执行，使用 watch 的immediate 属性。
2. 如果watch监听的是一个对象，则对象中的属性值变化，watch无法监听到。如果想要监听，使用 watch 的 deep 属性。

updated 监听 template中绑定的值，要监听的数值只要变化，就执行 updated
1. 不用额外添加监听方法，只要在 template 中绑定，update 自动监听

计算属性 VS 侦听器
1. computed 属性侧重监听多个数据的变化，并返回一个计算出的新值
2. watch 属性侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值

计算属性 VS 普通方法
1. 计算属性中不应该改变 data 中的变量值（会报错：Unexpected side effect in "plus" computed property）
2. methods 中的方法可以改变 data 中的变量值
3. computer 有缓存，数字不变时只执行1次，性能高
4. methods中的函数无缓存，数字不变时也执行3次，性能不如computer

computed.vue

 watch.vue

<template>
  <div>
    <h2>{{ msg }}h2>
    
    <input type="text" v-model.number="username" />
  div>
template>

<script>
import axios from "axios";
export default {
  name: "WatchAttribute",
  props: {
    msg: String,
  },
  data() {
    return {
      username: "",
    };
  },
  computed: {
      /* 
        计算属性 VS 侦听器
        侧重的应用场景不同：
            1. computed 属性侧重监听多个数据的变化，并返回一个计算出的新值；
            2. watch 属性侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值。
      */
  },
  /* 
    watch 监听 data 中的数值，要监听的数值只要变化，就执行watch
        1. 默认情况下，变量被初始化的时候，watch不会立即执行，如果想要立即执行，使用 watch 的immediate 属性。
        2. 如果watch监听的是一个对象，则对象中的属性值变化，watch无法监听到。如果想要监听，使用 watch 的 deep 属性。
  */
  watch: {
    /* watch 基本使用 */
    //   username(newValue, oldValue){
    //       console.log('new:',newValue);
    //       console.log('old:',oldValue);
    //   }

    /* 
        使用 axios 检查用户名是否可用
        1. 安装 axios : npm i axios -S
        2. axios 返回一个 promise 对象，可以用 await 简化成真正的数据对象
        3. 有 await ，函数名前面必须加 async 修饰
     */
    async username(newValue) {
      console.log("newvalue:", newValue);
      //   axios 返回一个 promise 对象，可以用 await 解构成真正的数据对象
      //   const res = await axios.get("https://www.escook.cn/api/finduser/" + newValue);
      //   返回的数据对象中只有 data 属性有意义，我们可以用 {data} 来结构赋值，用{data ：res} 给data部分重命名
      if (newValue) {
        const { data: res } = await axios.get(
          "https://www.escook.cn/api/finduser/" + newValue
        );
        console.log("res:", res);
      }
    },
  },
  methods: {},
  updated() {
      /* 
        template中绑定的值变化了就会触发 updated
      */
     console.log('updated');
  },
};
script>
<style scoped>style>

 watch 和 updte 对比

<template>
  <div>
    <h2>{{ msg }}h2>
    <input type="text" v-model.number="count" />
    <span>count:{{ count }}span>
    <input type="text" v-model.trim="user" />
    <span>user:{{ user }}span>
  div>
template>

<script>
export default {
  name: "LifeCycle",
  components: {},
  props: {
    msg: String,
  },
  data() {
    return {
      count: 0,
      user: "",
    };
  },
  watch: {
    /* 
        watch 监听 data 中的数值，要监听的数值只要变化，就执行watch
        在本例中：
        1. 监听了 count ，所以count发生变化会执行 watch
        2. 没有监听 user，所以 user 发生变化也不会执行 watch
      */
    count(newvalue) {
      console.log("watch:", newvalue);
    },
  },
  updated() {
    /* 
        template中绑定的值变化了就会触发 updated
        在本例中：
        1. count 改变会触发 update
        2. user 改变也会触发 update
      */
    console.log("update");
  },
  activated() {},
  beforeUnmount() {},
  unmounted() {},
};
script>
<style scoped>style>