案例 總體代碼

<template>
  <!-- <h2>fullName1:{{fullName1}}</h2> -->
  <h2>計(jì)算屬性演示</h2>
  <fieldset>
    <legend>輸入姓名</legend>
    姓氏 <input type="text" v-model="user.firstName"><br>
    名字 <input type="text" v-model="user.lastName">
  </fieldset>
    <fieldset>
    <legend>計(jì)算屬性演示</legend>
    全名：<input type="text" v-model="fullName2">
  </fieldset>
</template>

<script lang="ts">
import {defineComponent,reactive,
  ref,
  computed,
  watch,
  watchEffect} from 'vue'
  export default defineComponent({
    setup(){
      const user = reactive({
        firstName:'',
        lastName:''
      })

      //vue3中的計(jì)算屬性
      //如果計(jì)算屬性的函數(shù)中如果只傳入一個(gè)回調(diào)函數(shù)缨硝，表示的是get
      const fullName1 = computed(()=>{
        //返回的是ref對象
        return user.firstName + user.lastName
      })


      const fullName2 = computed({
        get(){
          return user.firstName + user.lastName
        },
        set(value: string){
          console.log('當(dāng)前傳入的全名===',value)
          const value1 = value.substring(0,1)
          const value2 = value.substring(1)
          user.firstName = value1
          user.lastName = value2
        }
      })

      const fullName3 = ref('')
      //監(jiān)視---監(jiān)視指定的數(shù)據(jù)
      /*
        第一個(gè)值監(jiān)聽對象，第二個(gè)值監(jiān)聽的回調(diào)函數(shù)，第三個(gè)值：watch屬性(immediate,deep)
      */
      // watch(user,({firstName,lastName})=>{
      //   fullName3.value = user.firstName + user.lastName
      //   console.log('fullName3改變了==',fullName3.value)
      // },{immediate:true,deep:true})


      //vue3新加入的監(jiān)聽
      //不需要配置屬性
      //第一次默認(rèn)監(jiān)聽，可以不寫immediate屬性
      watchEffect(()=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改變了==',fullName3.value)

      })

      return{
        user,
        fullName1,
        fullName2,
        fullName3
      }
    }

  })
</script>

<style>

</style>

vue3中的計(jì)算屬性

如果計(jì)算屬性的函數(shù)中如果只傳入一個(gè)回調(diào)函數(shù)，表示的是get

      const user = reactive({
        firstName:'',
        lastName:''
      })
      
    const fullName1 = computed(()=>{
        //返回的是ref對象
        return user.firstName + user.lastName
      })

computed 需要設(shè)置set方法時(shí)

      const fullName2 = computed({
        get(){
          return user.firstName + user.lastName
        },
        set(value: string){
          console.log('當(dāng)前傳入的全名===',value)
          const value1 = value.substring(0,1)
          const value2 = value.substring(1)
          user.firstName = value1
          user.lastName = value2
        }
      })

vue3中的watch及watchEffect

watch監(jiān)聽

//在setup函數(shù)中寫法與vue2不同
      const fullName3 = ref('')
      //監(jiān)視---監(jiān)視指定的數(shù)據(jù)
      /*
        第一個(gè)值監(jiān)聽對象嘱丢，第二個(gè)值監(jiān)聽的回調(diào)函數(shù)，第三個(gè)值：watch屬性(immediate,deep)
      */
      watch(user,({firstName,lastName})=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改變了==',fullName3.value)
      },{immediate:true,deep:true})
      
      
    //監(jiān)聽多個(gè)響應(yīng)式數(shù)據(jù)
    watch([user1,user2,user3,user4],({firstName,lastName})=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改變了==',fullName3.value)
      },{immediate:true,deep:true})

watch監(jiān)聽非響應(yīng)式數(shù)據(jù)時(shí)

//監(jiān)聽非響應(yīng)式數(shù)據(jù)的時(shí)候使用回調(diào)函數(shù)形式
    watch([()=>user1,()=>user2,()=>user3,()=>user4],({firstName,lastName})=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改變了==',fullName3.value)
      },{immediate:true,deep:true})

watchEffect監(jiān)聽

      //vue3新加入的監(jiān)聽
      //不需要配置屬性
      //第一次默認(rèn)監(jiān)聽祠饺，可以不寫immediate屬性
      watchEffect(()=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改變了==',fullName3.value)

      })