vue3之计算机属性（computed）和监视（watch，watchEffect）

vue3中computed，watch和vue2中的配置一样，vue3中新增watchEffect，更好的监视数据的变化。

基础代码：

<template>
  fistName: <input v-model="user.firstName"/><br>
  lastName: <input v-model="user.lastName"/><br>
</template>
<script lang="ts">
//先引入
import {rective,computed,watch,watchEffect}
export default {
setup(){
 const user = reactive({
      firstName: "熊大",
      lastName: "熊二",
    });
}
</script>

一.computed

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

<template>
fullName1: <input v-model="fullName1" /><br />
</template>

setup()
{// 
    const fullName1 = computed(() => {
      console.log("fullName1");
      return user.firstName + "-" + user.lastName;
    });
    return{fullName1}
    }

由于fullName1只有getter方法（只读），不能设置新的值，只能获取

改变user.lastName

• 有getter和setter

<template>
<fullName2: <input v-model="fullName2" /><br />
</template>

// 有getter与setter的计算属性
setup()
{    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];
      },
    });
    return{fullName2}
    }

get方法在获取的时候调用，set方法在值改变的时候调用

二.watch

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

监视一个数据：

<template>
fullName3: <input v-model="fullName3" /><br />
</template>

const fullName3 = ref("");
  watch(fullName3, (value) => {
      console.log('watch')
      const names = value.split('-')
      user.firstName = names[0]
      user.lastName = names[1]
    },{
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // 是否是深度监视, 默认是false
    })

watch监视多个数据:
使用数组来指定
如果是ref对象, 直接指定
如果是reactive对象中的属性, 必须通过函数来指定

//监视user.firstName和user.lastName,fullName3
 watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
     console.log('监视多个数据', values)
   })

三.watchEffect

• 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据

• 默认初始时就会执行第一次, 从而可以收集需要监视的数据

• 监视数据发生变化时回调

setup（）{
// watchEffect: 监视所有回调中使用的数据
    watchEffect(() => {
      console.log("watchEffect");
      fullName3.value = user.firstName + "-" + user.lastName;
    });
    return {fullName3}
    }