Vue3 入门教程 computed和watch

<template>
  <div>
    <input type="text" v-model="user.firstName" placeholder="姓" />
    <input type="text" v-model="user.lastName" placeholder="名" />
    <br />
    <h1>姓名：{{ name1 }}</h1>
    <span>修改名字</span
    ><input type="text" v-model="lastName" placeholder="名" />

    <br>
    <p>watch</p>
    <button @click="onClick">修改</button>
    <p>{{user1}}</p>
    <p>{{user2}}</p>
    <p>{{count}}</p>
  </div>
</template>

<script>
import { reactive, computed ,watch,watchEffect, ref} from "vue";
export default {
  setup() {
    const user = reactive({
      firstName: "张",
      lastName: "三",
    });

    const user1 = reactive({
      name:'李四',
      age:20
    })

    const user2 = reactive({
      name:'王五',
      age:27
    })

    // 计算属性如果只传入一个函数，表示是 getter 的回调
    const name1 = computed(() => {
      return user.firstName + user.lastName;
    });

    // 也接受一个配置对象
    const lastName = computed({
      get() {
        return user.lastName;
      },
      set(value) {
        user.lastName = value;
      },
    });

    // 侦听器数据源   -- 响应式对象  
    watch(user,(value)=>{
      console.log(value);
    },{
      immediate:true,  // 初始化执行
      deep:true
    });
    // 响应式对象中的一个属性
    watch(()=>user.lastName,(value)=>{
      console.log(value);
    },{
      immediate:true,  // 初始化执行
      deep:true
    });

    // 侦听多个源
    watch([user1,user2],([newUser1,newUser2],[prevUser1,prevUser])=>{
      console.log(newUser1,prevUser1); 
      console.log(newUser2,prevUser);
    },{immediate:true})

    const onClick = () => {
      user1.age++
      user2.age++
      count.value++
    }

    //watchEffect 与 watch 区别
    // 不需要手动传入依赖,自动手机函数内部的变量
    // 每次初始化时会执行一次回调函数来自动获取依赖
    // 无法获取到原值，只能得到变化后的值
    const count  = ref(0);
    watchEffect(()=>{
      console.log(count.value);
    })

    return {
      user,
      name1,
      lastName,
      user1,
      user2,
      onClick,
      count
    };
  },
};
</script>

<style lang="scss" scoped>
</style>