687 vue3 Composition API：computed，watchEffect，watch

computed

---

01_computed的使用.vue

<template>
  <div>
    <h2>{{ fullName }}</h2>
    <button @click="changeName">修改firstName</button>
  </div>
</template>

<script>
  import { ref, computed } from "vue";

  export default {
    setup() {
      const firstName = ref("Kobe");
      const lastName = ref("Bryant");

      // 1.用法一: 传入一个getter函数
      // computed的返回值是一个ref对象
      const fullName = computed(() => firstName.value + " " + lastName.value);

      // 2.用法二: 传入一个对象, 对象包含getter/setter
      const fullName = computed({
        get: () => firstName.value + " " + lastName.value,
        set(newValue) {
          const names = newValue.split(" ");
          firstName.value = names[0];
          lastName.value = names[1];
          // [firstName.value, lastName.value] = names
        },
      });

      const changeName = () => {
        // firstName.value = "James"
        fullName.value = "haha xixi";
      };

      return {
        fullName,
        changeName,
      };
    },
  };
</script>

<style scoped></style>

---

侦听数据的变化

---

watchEffect

---

02_watchEffect基本使用.vue

<template>
  <div>
    <h2>{{ name }}-{{ age }}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
  import { ref, watchEffect } from "vue";

  export default {
    setup() {
      // watchEffect: 自动收集响应式的依赖
      const name = ref("why");
      const age = ref(18);

      const changeName = () => (name.value = "kobe");
      const changeAge = () => age.value++;

      // watchEffect会立即执行一次
      watchEffect(() => {
        console.log("name:", name.value, "age:", age.value);
      });

      return {
        name,
        age,
        changeName,
        changeAge,
      };
    },
  };
</script>

<style scoped></style>

---

watchEffect的停止侦听

---

03_watchEffect停止侦听.vue

<template>
  <div>
    <h2>{{ name }}-{{ age }}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
  import { ref, watchEffect } from "vue";

  export default {
    setup() {
      // watchEffect: 自动收集响应式的依赖
      const name = ref("why");
      const age = ref(18);

      // 【停止监听，但是界面数据继续更新】
      // watchEffect()：返回的是一个函数
      const stop = watchEffect(() => {
        console.log("name:", name.value, "age:", age.value);
      });

      const changeName = () => (name.value = "kobe");
      const changeAge = () => {
        age.value++;
        if (age.value > 25) {
          stop(); // age.value > 25时，停止监听
        }
      };

      return {
        name,
        age,
        changeName,
        changeAge,
      };
    },
  };
</script>

<style scoped></style>

---

watchEffect清除副作用

---

04_watchEffect清除副作用.vue

<template>
  <div>
    <h2>{{ name }}-{{ age }}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
  import { ref, watchEffect } from "vue";

  export default {
    setup() {
      // watchEffect: 自动收集响应式的依赖
      const name = ref("why");
      const age = ref(18);

      const stop = watchEffect((onInvalidate) => {
        // 【这里用定时器模拟网络请求】
        const timer = setTimeout(() => {
          console.log("网络请求成功~");
        }, 2000);

        // 根据name和age两个变量发送网络请求
        // 在这个函数中清除额外的副作用 
        // 【组件销毁，监听器也随着销毁，并执行onInvalidate的回调函数，可在这里做清理相关工作。】
        onInvalidate(() => {
          // request.cancel() // 【取消上次的网络请求】
          clearTimeout(timer);
          console.log("onInvalidate---------");
        });

        console.log("name:", name.value, "age:", age.value);
      });

      const changeName = () => (name.value = "kobe");
      const changeAge = () => {
        age.value++;
        if (age.value > 25) {
          stop();
        }
      };

      return {
        name,
        age,
        changeName,
        changeAge,
      };
    },
  };
</script>

<style scoped></style>

---

setup中使用ref

---

watchEffect的执行时机

---

调整watchEffect的执行时机

---

05_watchEffect执行时机ref引用.vue

<template>
  <div>
    <h2 ref="title">哈哈哈</h2>
  </div>
</template>

<script>
  import { ref, watchEffect } from "vue";

  export default {
    setup() {
      // 【常量名要和ref="title"中的title一致，否则打印的值都是null。】
      const title = ref(null);

      watchEffect(
        // 【副作用函数】
        () => {
          console.log(title.value); // <h2>哈哈哈</h2>
          // 哈哈哈, 通过innerHTML拿到DOM元素的值
          console.log(title.value.innerHTML); 
        },
        {
          // pre: 提前执行；  post：DOM挂载、更新完后执行
          flush: "post",
        }
      );

      return {
        title,
      };
    },
  };
</script>

<style scoped></style>

---

Watch的使用

---

侦听单个数据源

---

06_watch侦听的数据源类型.vue

<template>
  <div>
    <h2 ref="title">{{ info.name }}</h2>
    <button @click="changeData">修改数据</button>
  </div>
</template>

<script>
  import { ref, reactive, watch } from "vue";

  export default {
    setup() {
      // watchEffect是直接在函数里使用即可，不用管有哪些依赖
      const info = reactive({ name: "why", age: 18 });

      // 1.侦听watch时,传入一个getter函数 【() => info.name就是getter函数。】
      watch(
        () => info.name,
        (newValue, oldValue) => {
          console.log("newValue:", newValue, "oldValue:", oldValue);
        }
      );

      // 2.传入一个可响应式对象: reactive对象/ref对象
      // 情况一: reactive对象获取到的newValue和oldValue本身都是reactive对象
      // watch(info, (newValue, oldValue) => {
      //   console.log("newValue:", newValue, "oldValue:", oldValue);
      //   console.log("newValue:", newValue.name, "oldValue:", oldValue.name);
      // })

      // 如果希望newValue和oldValue是一个普通的对象
      watch(
        // 简写：() => ({...info})
        () => {
          return { ...info };
        },
        (newValue, oldValue) => {
          // 【此时，newValue和oldValue是一个普通的对象】
          console.log("newValue:", newValue, "oldValue:", oldValue);
          // console.log("newValue:", newValue.name, "oldValue:", oldValue.name);
        }
      );

      // 情况二: ref对象获取newValue和oldValue是value值的本身
      const name = ref("why");
      // watch(name, (newValue, oldValue) => {
      //   // 【这里不是newValue.value】
      //   console.log("newValue:", newValue, "oldValue:", oldValue);
      // })

      const changeData = () => {
        info.name = "kobe";
      };

      return {
        changeData,
        info,
      };
    },
  };
</script>

<style scoped></style>

---

侦听多个数据源

---

侦听响应式对象

---

07_watch侦听多个数据源.vue

<template>
  <div>
    <h2 ref="title">{{ info.name }}</h2>
    <button @click="changeData">修改数据</button>
  </div>
</template>

<script>
  import { ref, reactive, watch } from "vue";

  export default {
    setup() {
      // 1.定义可响应式的对象
      const info = reactive({ name: "why", age: 18 });
      const name = ref("haha");

      // 2.侦听器watch
      // 【变成普通的对象，如果不加圆括号，编译器就不知道是要返回...info，还是{ ...info}。】
      watch(
        [() => ({ ...info }), name],
        ([newInfo, newName], [oldInfo, oldName]) => {
          console.log(newInfo, newName);
          console.log(oldInfo, oldName);
        }
      );

      const changeData = () => {
        info.name = "kobe";
      };

      return {
        changeData,
        info,
      };
    },
  };
</script>

<style scoped></style>

---

watch的选项

---

08_深度监听.vue

<template>
  <div>
    <h2 ref="title">{{info.name}}</h2>
    <button @click="changeData">修改数据</button>
  </div>
</template>

<script>
  import { ref, reactive, watch } from 'vue';

  export default {
    setup() {
      // 1.定义可响应式的对象
      const info = reactive({
        name: "why", 
        age: 18,
        friend: {
          name: "kobe"
        }
      });

      // 2.侦听器watch
      watch(() => ({...info}), (newInfo, oldInfo) => {
        console.log(newInfo, oldInfo);
      }, {
        // 【默认是可以深度监听的，源码中，当监听的数据源是reactive时，deep=true。】
        deep: true,
        immediate: true
      })

      const changeData = () => {
        info.friend.name = "james";
      }

      return {
        changeData,
        info
      }
    }
  }
</script>

---