VIP30/v3_project/7_计算属性和监听属性/App.vue

<template>
  <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="fullName1" /><br />
    姓名: <input type="text" v-model="fullName2" /><br />
    姓名: <input type="text" v-model="fullName3" />
  </fieldset>
</template>

<script lang="ts">
import { defineComponent, computed, watch, ref, reactive ,watchEffect} from "vue";

export default defineComponent({
  setup() {
    const user = reactive({
      firstName: "小猪",
      lastName: "佩奇",
    });
    //通过计算属性的方式
    //vue3中的计算属性
    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深度监视

    //监视
    // watchEffect(()=>{
    //   fullName3.value = user.firstName + '_' + user.lastName
    // })
    //监视fullName3的数据 去改变firstName和lastName
    // watchEffect(()=>{
    //   const names = fullName3.value.split('_')
    //   user.firstName = names[0]
    //   user.lastName = names[1]
    // })
    //fullName3 是响应式数据
    // watch([user.firstName,user.lastName,fullName3],()=>{
    //   console.log('========')
    // })

    //如果非要监听非响应式数据的时候
    watch([()=>user.lastName,()=>user.firstName],()=>{
      console.log('!!!!')
    })
    return {
      user,
      fullName1,
      fullName2,
      fullName3,
    };
  },
});
</script>

<style scoped>
</style>