Vue3 — 计算属性与监视

计算属性与监视

• computed函数:

  • computed是一个函数
  • 传入一个回调函数，只有getter
  • 传入一个对象有getter和setter
  • 返回值为一个Ref对象

• watch函数

  • 监听单个数据时，第一个为要监听的数据，第二个回调函数，第三个参数为对象{immediate, deep}
  • 监听多个数据(响应式的不需要箭头函数，非响应式需要)，第一个参数为数组[()=>val1, ()=>val2, …]，第二个为回调函数
  • 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
  • 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
  • 通过配置deep为true, 来指定深度监视

• watchEffect函数

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

<template>
  <h1>计算属性和监听器</h1>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏：<input
      type="text"
      placeholder="请输入姓氏"
      v-model="user.firstName"
    />
    <br /><br />
    名字：<input type="text" placeholder="请输入名字" v-model="user.lastName" />
  </fieldset>
  <fieldset>
    <legend>计算属性和监视演示</legend>
    姓名：<input type="text" placeholder="显示名字" v-model="fullName1" />
    姓名：<input type="text" placeholder="显示名字" v-model="fullName2" />
    姓名：<input type="text" placeholder="显示名字" v-model="fullName3" />
    姓名：<input type="text" placeholder="显示名字" v-model="fullName4" />
  </fieldset>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, watchEffect } from "vue";

export default defineComponent({
  name: "App",

  setup() {
    // 定义一个响应式对象
    const user = reactive({
      firstName: "东方",
      lastName: "不败",
    });

    // computed方式，传入一个回调函数
    let fullName1 = computed(() => {
      return user.firstName + user.lastName;
    });
    console.log(fullName1);

    // computed方式，传入一个对象
    let fullName2 = computed({
      get() {
        return user.firstName + "_" + user.lastName;
      },
      set(val: string) {
        let names = val.split("_");
        user.firstName = names[0];
        user.lastName = names[1];
      },
    });
    console.log(fullName2);

    // watch 方式
    let fullName3 = ref("");
    watch(user, ({firstName, lastName}) => {
      fullName3.value = firstName + '-' + lastName
    }, {
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // 是否是深度监视, 默认是false
    })

    // watch 可以监视多个数据  user.firstName、user.lastName非响应式  fullName3响应式
    watch([() => user.firstName, () => user.lastName, fullName3],() => {
      console.log("监听到了多个数据");
    })

    // watchEffect方式，不需要设置immediate，默认会执行
    let fullName4 = ref('')
    watchEffect(() => {
      fullName4.value = user.firstName + user.lastName
    })

    // 使用watchEffect来监听fullName3
    watchEffect(() => {
      const names = fullName3.value.split("-")
      user.firstName = names[0]
      user.lastName = names[1]
    })

    return {
      user,
      fullName1,
      fullName2,
      fullName3,
      fullName4
    };
  },
});
</script>