案例 总体代码

<template>
  <!-- <h2>fullName1:{{fullName1}}</h2> -->
  <h2>计算属性演示</h2>
  <fieldset>
    <legend>输入姓名</legend>
    姓氏 <input type="text" v-model="user.firstName"><br>
    名字 <input type="text" v-model="user.lastName">
  </fieldset>
    <fieldset>
    <legend>计算属性演示</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中的计算属性
      //如果计算属性的函数中如果只传入一个回调函数，表示的是get
      const fullName1 = computed(()=>{
        //返回的是ref对象
        return user.firstName + user.lastName
      })


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

      const fullName3 = ref('')
      //监视---监视指定的数据
      /*
        第一个值监听对象，第二个值监听的回调函数，第三个值：watch属性(immediate,deep)
      */
      // watch(user,({firstName,lastName})=>{
      //   fullName3.value = user.firstName + user.lastName
      //   console.log('fullName3改变了==',fullName3.value)
      // },{immediate:true,deep:true})


      //vue3新加入的监听
      //不需要配置属性
      //第一次默认监听，可以不写immediate属性
      watchEffect(()=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改变了==',fullName3.value)

      })

      return{
        user,
        fullName1,
        fullName2,
        fullName3
      }
    }

  })
</script>

<style>

</style>

vue3中的计算属性

如果计算属性的函数中如果只传入一个回调函数，表示的是get

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

computed 需要设置set方法时

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

vue3中的watch及watchEffect

watch监听

//在setup函数中写法与vue2不同
      const fullName3 = ref('')
      //监视---监视指定的数据
      /*
        第一个值监听对象，第二个值监听的回调函数，第三个值：watch属性(immediate,deep)
      */
      watch(user,({firstName,lastName})=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改变了==',fullName3.value)
      },{immediate:true,deep:true})
      
      
    //监听多个响应式数据
    watch([user1,user2,user3,user4],({firstName,lastName})=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改变了==',fullName3.value)
      },{immediate:true,deep:true})

watch监听非响应式数据时

//监听非响应式数据的时候使用回调函数形式
    watch([()=>user1,()=>user2,()=>user3,()=>user4],({firstName,lastName})=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改变了==',fullName3.value)
      },{immediate:true,deep:true})

watchEffect监听

      //vue3新加入的监听
      //不需要配置属性
      //第一次默认监听，可以不写immediate属性
      watchEffect(()=>{
        fullName3.value = user.firstName + user.lastName
        console.log('fullName3改变了==',fullName3.value)

      })