Vue3 学习笔记 —— computed 和 watch

<template>
  <div>
    firstName: <input type="text" v-model="user.firstName">
    lastName: <input type="text" v-model="user.lastName">
  </div>
  <div>
    fullName1: <input type="text" v-model="fullName1">
    fullName2: <input type="text" v-model="fullName2">
    fullName3: <input type="text" v-model="fullName3">
  </div>
</template>

<script lang="ts">
// 需要引入 computed、watch
import { defineComponent, reactive, ref, computed, watch, watchEffect} from 'vue';

export default defineComponent({
  name: 'App',
  setup () {
    const user = reactive({
      firstName: 'a',
      lastName: 'b'
    })

	// 传入一个函数时，默认为 get
    const fullName1 = computed(()=>{
      return user.firstName + '_' + user.lastName
    })
	
	// 传入对象时，可以指定 get 和 set
    const fullName2 = computed({
      get() {
        return user.firstName + '_' + user.lastName
      },
      set(val: string) {
        let names = val.split('_')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })
    
    // 监听 user 的变化，变化时执行回调
    let fullName3 = ref('')
    watch(user, ({firstName, lastName})=>{
      fullName3.value = firstName + '_' + lastName
    }, {immediate: true})	// 初始时立即执行
	
	// 当 fullName3 变化时，执行回调
	watchEffect(()=>{
      let names = fullName3.value.split('_')
      user.firstName = names[0]
      user.lastName = names[1]
    })

    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }

  }
});
</script>

• watch 还可以监听基本类型

	// 监听基本类型时，需要写成箭头函数的形式
	// 监听多个类型时，需要传入数组
	// 只能监听响应式数据内的基本类型
    watch([()=>user.firstName, ()=>user.lastName], ()=>{
      console.log(1234)
    })