watch的第一個(gè)參數(shù)直接寫需要監(jiān)聽的數(shù)據(jù)名即可，監(jiān)聽的是其值的變化
    <div>
      <h1>情況一：監(jiān)視【ref】定義的【基本類型】數(shù)據(jù)</h1>
      <h2>當(dāng)前求和為：{{ sum }}</h2>
      <el-button @click="changeSum">點(diǎn)我sum+1</el-button>
    </div>
    
// 數(shù)據(jù)
let sum = ref(0)
// 方法
function changeSum() {
  sum.value += 1
}
// 監(jiān)視，情況一：監(jiān)視【ref】定義的【基本類型】數(shù)據(jù)
const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log('sum變化了', newValue, oldValue)
  if (newValue >= 10) {
    stopWatch()
  }
})

   <div>
      <h1>情況二：監(jiān)視【ref】定義的【對(duì)象類型】數(shù)據(jù)</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年齡：{{ person.age }}</h2>
      <h2>兒子年齡：{{ person.son.age }}</h2>
      <el-button @click="changeName">修改名字</el-button>
      <el-button @click="changeAge">修改年齡</el-button>
      <el-button @click="changePerson">修改整個(gè)人</el-button>
      <el-button @click="changeSonAge">修改兒子年齡</el-button>
    </div>
    
// 數(shù)據(jù)
let person = ref({
  name: '張三',
  age: 18,
  son: { age: 5 }
})
// 方法
function changeName() {
  person.value.name += '~'
}
function changeAge() {
  person.value.age += 1
}
function changePerson() {
  person.value = { name: '李四', age: 90, son: { age: 5 } }
}
function changeSonAge() {
  person.value.son.age += 1
}
watch(
  person,
  (newValue, oldValue) => {
    console.log('person變化了', newValue, oldValue)
  },
  { deep: true }
)

  <div>
      <h1>情況三：監(jiān)視【reactive】定義的【對(duì)象類型】數(shù)據(jù)</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年齡：{{ person.age }}</h2>
      <el-button @click="changeName">修改名字</el-button>
      <el-button @click="changeAge">修改年齡</el-button>
      <el-button @click="changePerson">修改整個(gè)人</el-button>
      <hr />
      <h2>測(cè)試：{{ obj.a.b.c }}</h2>
      <el-button @click="test">修改obj.a.b.c</el-button>
    </div>
    
// 數(shù)據(jù)
let person = reactive({ name: '張三', age: 18 })
let obj = reactive({ a: { b: { c: 666 } } })
// 方法
function changeName() {
  person.name += '~'
}
function changeAge() {
  person.age += 1
}
function changePerson() {
  Object.assign(person, { name: '李四', age: 80 })
}
function test() {
  obj.a.b.c += 888
}

// 監(jiān)視，情況三：監(jiān)視【reactive】定義的【對(duì)象類型】數(shù)據(jù)，且默認(rèn)是開啟深度監(jiān)視的
watch(person, (newValue, oldValue) => {
  console.log('person變化了', newValue, oldValue)
})
watch(obj, (newValue, oldValue) => {
  console.log('Obj變化了', newValue, oldValue)
})

 <div>
      <h1>情況四：監(jiān)視【ref】或【reactive】定義的【對(duì)象類型】數(shù)據(jù)中的某個(gè)屬性</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年齡：{{ person.age }}</h2>
      <h2>汽車：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
      <el-button @click="changeName">修改名字</el-button>
      <el-button @click="changeAge">修改年齡</el-button>
      <el-button @click="changeC1">修改第一臺(tái)車</el-button>
      <el-button @click="changeC2">修改第二臺(tái)車</el-button>
      <el-button @click="changeCar">修改整個(gè)車</el-button>
    </div>
    
// 數(shù)據(jù)
let person = reactive({ name: '張三', age: 18, car: { c1: '奔馳', c2: '寶馬' } })
// 方法
function changeName() {
  person.name += '~'
}
function changeAge() {
  person.age += 1
}
function changeC1() {
  person.car.c1 = '奧迪'
}
function changeC2() {
  person.car.c2 = '大眾'
}
function changeCar() {
  // person.car = { c1: '雅迪', c2: '愛瑪' }
  Object.assign(person.car, { c1: '雅迪', c2: '愛瑪' })
}
// 監(jiān)視，情況四：監(jiān)視響應(yīng)式對(duì)象中的某個(gè)屬性，且該屬性是基本類型的，要寫成函數(shù)式
watch(
  () => person.name,
  (newValue, oldValue) => {
    console.log('person.name變化了', newValue, oldValue)
  }
)
watch(
  () => person.car, // 如果使用 person.car = { ... } 必須要使用函數(shù)寫法；如果使用Object.assign，可以直接寫person.car
  (newValue, oldValue) => {
    console.log('person.car變化了', newValue, oldValue)
  },
  { deep: true }
)

watch(
  [() => person.name, () => person.car],
  (newValue, oldValue) => {
    console.log('person.car變化了', newValue, oldValue)
  },
  { deep: true }
)