vue3的计算属性和监听及watch和watchEffect区别

三者区别：

• computed函数:

  • 与computed配置功能一致
  • 内部只有一个方法的时候是getter
  • 有getter和setter

• watch函数

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

• watchEffect函数

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

App.vue文件：

<template>
  <h2>计算属性和监视</h2>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏:<input type="text" placeholder="请输入姓氏" v-model="user.firstname"/><br/>
    名字:<input type="text" placeholder="请输入名字" v-model="user.lastname"/>
  </fieldset>
  <fieldset>
    <legend>计算属性和监视的演示</legend>
    姓名:<input type="text" placeholder="请输入姓名" v-model="fullName1"/><br/>
    姓名:<input type="text" placeholder="请输入姓名" v-model="fullName2"/><br/>
    姓名:<input type="text" placeholder="请输入姓名" v-model="fullName3"/><br/>
  </fieldset>
</template>

<script lang="ts">
import { defineComponent, reactive, computed,watch, ref, watchEffect } from 'vue'
export default defineComponent({
  name: 'App',
  setup(){
    const user = reactive({
      firstname: '东方',
      lastname: '不败'
    })
    // 通过计算属性的方式，实现第一个姓名的显示
    // vue3的计算属性
    // 计算属性的函数中如果只传入一个回调函数，表示的是get

    // 第一个姓名：
    // 返回的是一个Ref类型的对象
    const fullName1 = computed(() => {
      return user.firstname +'_'+user.lastname
    })
    console.log('fullName1',fullName1);
    // 第二个姓名
    const fullName2 = computed({
      get(){
        return user.firstname +'_'+user.lastname
      },
      set(val:string){
        // console.log('====',val);
        const names = val.split('_');
        user.firstname = names[0];
        user.lastname = names[1];
      }
    })

    const fullName3 = ref('')
    // watch在初始的情况下是不会执行的，需要添加immediate:true 去执行一次
    // 监视指定的数据
    watch(user,({firstname,lastname}) => {
      fullName3.value = firstname + '_'+lastname
    },
    {immediate:true,deep:true}
    )
    // immediate默认会执行一次watch，deep深度监视

    // 监视，不需要配置immediate，本身默认就会进行监视（默认执行一次）
    // watchEffect(()=>{
    //   fullName3.value = user.firstname + '_' + user.lastname
    // })

    // 监视fullName3的数据，改变firstname和lastname
    watchEffect(()=>{
      const names = fullName3.value.split('_');
      user.firstname = names[0]
      user.lastname = names[1]
    })

    // watch---可以监视多个数据
    // watch([user.firstname,user.lastname, fullName3],() => {
    //   // 这里的代码就没有执行，fullName3是响应式数据，但是user.firstname和user.lastname不是响应式数据
    //   console.log('==========');
    // })

    // 当我们使用watch监视非响应式数据的时候，代码需要改一下
    watch([()=>user.firstname,()=>user.lastname,fullName3],() => {
      // 这里的代码就没有执行，fullName3是响应式数据，但是user.firstname和user.lastname不是响应式数据
      console.log('==========');
    })
    
    return {
      user, 
      fullName1,
      fullName2,
      fullName3
    }
  }
})
</script>