VUE watchEffect

作用：watchEffect 会自动收集其执行过程中访问到的所有响应式属性，并在这些属性变化时重新运行这个函数。与 watch 不同，watchEffect 在其依赖的响应式数据变化时会立即重新执行，无需明确指定要观察的数据源。

​
<template>
    <div>
        姓名：{{ name }}
        年龄：{{ age }}
        <br>
        <!-- 增加修改全名按钮 -->
        <button @click="changeName">修改名字</button> 
        <button @click="changeAge">修改年龄</button> 
    </div>
</template>
<script lang="ts" setup>
    import { ref, watch, watchEffect } from 'vue'
    let name = ref('张三')
    let age = ref(18)
    
    //方法
    function changeName(){
        name.value +='~'
    }
    function changeAge(){
        age.value += 1
    }
    watchEffect(() => {
        console.log('姓名变化了', name.value)
        console.log('年龄变化了', age.value)
    })
</script>