vue3计算属性（computed）与监听（watch）

Posted 2021-12-10 web半晨

<template>
	<h2>App</h2>
	fistName: <input v-model="user.firstName"/><br>
	lastName: <input v-model="user.lastName"/><br>
	fullName1: <input v-model="fullName1"/><br>
	fullName2: <input v-model="fullName2"><br>
	fullName3: <input v-model="fullName3"><br>
</template>

---

computed函数

1、与computed配置功能一致。
2、只有getter的函数。
3、有getter和setter的computed函数。

---

watch函数

1、与watch配置功能一致。
2、监听指定的一个或多个响应式数据，一旦数据变化，就自动执行监听回调。
3、默认初始时不执行回调，但可以通过配置immediate为true，来指定初始时立即执行第一次。
4、通过配置deep为true，来指定深度监听。

---

watchEffect函数

1、不用直接指定要监听的数据，回调函数中使用的哪些响应式数据就监听哪些响应式数据。
2、默认初始时就会执行第一次，从而可以收集需要监视的数据。
3、监听数据发生变化时回调。

---

import {
  reactive,
  ref,
  computed,
  watch,
  watchEffect
} from 'vue';

export default {
  setup () {
    const user = reactive({
      firstName: 'A',
      lastName: 'B'
    });

    // 只有getter的计算属性
    const fullName1 = computed(() => {
      console.log('fullName1');
      return user.firstName + '-' + user.lastName;
    });

    // 有getter与setter的计算属性
    const fullName2 = computed({
      get () {
        console.log('fullName2 get');
        return user.firstName + '-' + user.lastName;
      },
      set (value: string) {
        console.log('fullName2 set');
        const names = value.split('-');
        user.firstName = names[0];
        user.lastName = names[1];
      }
    });

    const fullName3 = ref('');

    /* 
    watchEffect: 监视所有回调中使用的数据
    */
    /* 
    watchEffect(() => {
      console.log('watchEffect')
      fullName3.value = user.firstName + '-' + user.lastName
    }) 
    */

    /* 
    使用watch的2个特性:
      深度监视
      初始化立即执行
    */
    watch(user, () => {
      fullName3.value = user.firstName + '-' + user.lastName;
    }, {
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // 是否是深度监视, 默认是false
    });

    /* 
    watch一个数据
      默认在数据发生改变时执行回调
    */
    watch(fullName3, (value) => {
      console.log('watch');
      const names = value.split('-');
      user.firstName = names[0];
      user.lastName = names[1];
    });

    /* 
    watch多个数据: 
      使用数组来指定
      如果是ref对象, 直接指定
      如果是reactive对象中的属性,  必须通过函数来指定
    */
    watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
      console.log('监视多个数据', values);
    });

    return {
      user,
      fullName1,
      fullName2,
      fullName3
    };
  }
}