[Vue3学习笔记]computed+watch+watchEffect

计算属性与监视

computed函数

- 如果传入一个回调，表示是get

    const fullName1= computed(()=>{
      return user.firstName+'_'+user.lastName
    })

- 如果要有get和set，那需要传入一个对象

    const fullName2= computed({
      get(){
          return user.firstName+'_'+user.lastName
      },
      set(val:string){
        const names=val.split('_')
        user.firstName=names[0]
        user.lastName=names[1]
      }
    })

---

watch函数

和vue2的区别可以：监听自身属性了？
可以深度监听是真的方便

    // 监视指定的数据
    const fullName3=ref('')
    watch(user,({firstName,lastName})=>{
        fullName3.value=firstName+'_'+lastName
    },{immediate:true,deep:true})

---

watch可以监听多个数据，如果监听非响应式数据要加()=>

    watch([()=>user.firstName,()=>user.lastName],()=>{
      console.log('++++');
    })

---

watchEffect函数

    // 不需要配置immediate，本身默认会进行监视
    watchEffect(()=>{
      fullName3.value=user.firstName+'_'+user.lastName
    })

通过watchEffect实现监听改变firstName和lastName

    watchEffect(()=>{
      const names=fullName3.value.split('_')
      user.firstName=names[0]
      user.lastName=names[1]
    })

完整代码

<!--
 * @Author: 41
 * @Date: 2021-12-07 17:12:43
 * @LastEditors: 41
 * @LastEditTime: 2021-12-14 16:31:25
 * @Description: 
-->
<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 {computed, defineComponent, reactive,watch,ref, watchEffect} from 'vue'
export default defineComponent({
  name:'App',
  setup(){
    const user=reactive({
      firstName:'1',
      lastName:'2'
    })
    // 通过计算属性的方式，实现第一个姓名的显示
    // vue3中的计算属性
    // 计算属性的函数中如果只传入一个回调函数，表示get
    // 第一个姓名返回的时一个Ref类型对象
    const fullName1= computed(()=>{
      return user.firstName+'_'+user.lastName
    })
    // 第二个姓名：
    const fullName2= computed({
      get(){
          return user.firstName+'_'+user.lastName
      },
      set(val:string){
        const names=val.split('_')
        user.firstName=names[0]
        user.lastName=names[1]
      }
    })
    // 监视指定的数据
    const fullName3=ref('')
    watch(user,({firstName,lastName})=>{
        fullName3.value=firstName+'_'+lastName
    },{immediate:true,deep:true})
    // immediate默认自动执行一次 deep深度监视

    // 不需要配置immediate，本身默认会进行监视
    watchEffect(()=>{
      const names=fullName3.value.split('_')
      user.firstName=names[0]
      user.lastName=names[1]
    })
    watch([()=>user.firstName,()=>user.lastName],()=>{
      console.log('++++');
    })
    return{
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
})
</script>