vue3中计算属性与监视

Posted 2021-09-06 嘴巴嘟嘟

computed 函数:

• 与 computed 配置功能一致
• 只有 getter
• 有 getter 和 setter

watch 函数

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

watchEffect 函数

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

	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 />

	import {
	  defineComponent,
	  computed,
	  watch,
	  watchEffect,
	  reactive,
	  ref,
	} from "vue";
	setu(){
		const user = reactive({
      firstName: "A",
      lastName: "B",
    });

    //  使用计算属性
    const fullName1 = computed(() => {
      return user.firstName + "-" + user.lastName;
    });
    const fullName2 = computed({
      set(value) {
        console.log("fullName2 set");
        const names = value.split("-");
        user.firstName = names[0];
        user.lastName = names[1];
      },
      get() {
        console.log("fullName2 get");
        return user.firstName + "-" + user.lastName;
      },
    });
    // 监听
    const fullName3 = ref("");
    // 通过改变user，来监听其他数据
    watch(
      user,
      () => {
        fullName3.value = user.firstName + user.lastName;
      },
      {
        immediate: true, // 是否初始化立即执行一次, 默认是false
        deep: true, // 是否是深度监视, 默认是false
      }
    );


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

    // 通过监听fullName3 改变 其他的数据
    // watch(fullName3, (value) => {
    //   console.log(value);
    //   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 { btn, user, fullName1, fullName2, fullName3 };
	}