vue3计算属性(computed)与监听(watch)

Posted web半晨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3计算属性(computed)与监听(watch)相关的知识,希望对你有一定的参考价值。

<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
    };
  }
}

以上是关于vue3计算属性(computed)与监听(watch)的主要内容,如果未能解决你的问题,请参考以下文章

Vue3的computed用法

vue3中的computed和watch

vue3中computed计算属性函数

vue计算属性computed与监听属性watch的基本使用

vue3 setup 计算属性 computed

vue计算属性与watch监听