• 两者都可监听 data 属性变化
    • watch 需要明确出要被监听的属性
    • watchEffect 会根据其中的属性，自动监听其变化
    1. <template>
    2.   <p>watch watchEffect</p>
    3.   <p>{{numRef}}</p>
    4.   <p>{{name}} {{age}}</p>
    5. </template>
    7. <script>
    8. import { reactive, ref, toRefs, watch } from 'vue';
    10. export default {
    11.   name: 'watch',
    12.   setup() {
    13.     const numRef = ref(100);
    14.     const state = reactive({
    15.       name: "zwx",
    16.       age: 26
    17.     })
    19.     watch(numRef, (newNum, oldNum) => console.log('监听到了watch的变化', newNum, oldNum), {
    20.       immediate: true // 初始化即监听
    21.     })
    23.     // setTimeout(() => {
    24.     //   numRef.value = 101
    25.     // }, 1000)
    27.     watch(
    28.       // 确定要监听的属性
    29.       () => state.age,   
    30.       (newStateAge, oldStateAge) => {
    31.         console.log('state watch', newStateAge, oldStateAge)
    32.       },
    33.       {
    34.         immediate: false,
    35.         deep: false // 深度监听
    36.       }
    37.     )
    39.     setTimeout(() => {
    40.       state.age = 27;
    41.     }, 1000)
    43.     setTimeout(() => {
    44.       state.name = 'pw';
    45.     }, 3000)
    47.     return {
    48.       numRef,
    49.       ...toRefs(state)
    50.     }
    51.   }
    52. }
    53. </script>
    // 初始化时 一定会执行一次 (原因：收集要监听的数据)
watchEffect(() => {
  console.log('hello')
})

watchEffect(() => { // 初始化和在 state.name 改变时会触发
  console.log('state.name', state.name)
})