watchEffect自动监视数据

<script setup lang="ts">
import { ref, watchEffect } from 'vue'

let person = ref({ name: '张三', age: 18 })
const changeName = () => {
  person.value.name += '='
}
const changeAge = () => {
  person.value.age += 1
}

const changePerson = () => {
  person.value = { name: '李四', age: 20 }
}

//watchEffect项目一启动就先执行一次
//watchEffect：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数
//watch 对比watchEffect
//都能监听响应式数据的变化，不同的是监听数据变化的方式不同
//watch：要明确指出监视的数据
//watchEffect：不用明确指出监视的数据(函数中用到哪些属性，那就监视哪些属性)
watchEffect(() => {
  console.log('启动就执行')
  if (person.value.name == '李四') {
    console.log('我是李四')
  }
})
</script>

<template>
  <div>
    <h1>情况二：watchEffect自动监视数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
<style scoped>
button {
  margin: 0 10px;
}
</style>