傑森前端

watch

先註冊

import { ref, reactive, watch } from "vue";

js

以下分別測試了幾種情況

1. 單個ref監聽

如果是物件陣列類型的時候要使用.value才可以

2.多個ref監聽

多個的時候要使用陣列傳遞

3.單個reactive的監聽

直接監聽

拿不到old Value

不管多深層都能監聽

4.單個reactive監聽裡面的某個屬性

監聽reactvie裡的某個屬性的時候要用func return 裡面的key

5.多個reactive監聽裡面的屬性

使用陣列搭配func return裡面的key

6.監聽reactive裡面屬性為物件的key

若是監聽return出來的還是物件陣列的話要開啟第三個選項deep:true

export default {
  name: 'HelloWorld',
  setup() {
    let sum = ref(0)
    let msg = ref('hi')
    let person = reactive({
      name: 'jason',
      age: '20',
      job: {
        j1: {
          salary: 20
        }
      }
    })
    // 1.單個ref不需.value 除非值是object的ref才需要.value拿到Proxy物件
    watch(sum, (nV, oV) => {
      console.log(nV, oV)
    }, {
      immediate: true
    }) 
    // 2.多個ref不需.value  除非值是object的ref才需要.value 或是開起deep:true才可以使用
    watch([sum, msg], (nV, oV) => {
      console.log(nV, oV)
    }, {
      immediate: true
    })
    // 3.單個reactive
    // 如果用reactive或是ref定義的物件與陣列的話(Proxy)oV無法獲得
    // 如果用reactive或是ref定義的物件與陣列的話的話(Proxy)不管多深都可以監聽而且是必定監聽
    watch(person, (nV, oV) => {
      console.log(nV, oV)
    }, {
      immediate: true
    })
    // 4.監視reactive中的某一個屬性,前面要使用函式
    watch(() => person.age, (nV, oV) => {
      console.log(nV, oV)
    }, {
      immediate: true
    })
    // 5.監視reactive中的某些個屬性,前面要使用陣列搭配函式
    watch([() => person.age, () => person.name], (nV, oV) => {
      console.log(nV, oV)
    }, {
      immediate: true
    })
    // 6.監視reactive中的屬性值為物件或陣列需要開啟deep
    watch([() => person.job, () => person.name], (nV, oV) => {
      console.log(nV, oV)
    }, {
      deep: true
    })
    return {
      sum,
      msg,
      person
    }
  }
}
</script>

模板

<template>
  {{ sum }}
  <button @click="sum++">++</button>
  <hr />
  {{ msg }}
  <button @click="msg += '!'">change</button>
  <hr />
  {{ person.name }}
  {{ person.age }}
  {{ person.job.j1.salary }}
  <button
    @click="person.name += '!'"
  >name</button>
  <button @click="person.age++">age</button>
  <button @click="person.job.j1.salary++">salary</button>
</template>

watchEffect

這個理解起來就比較間單個人理解就是

1. watchEffect的回調有用到的變數有變動就會觸發此回調
2. 只能監聽值不能監聽整個object
3. 感覺有點像computed不會return東西
4. 也可以用於初始的賦予值

先註冊

import { ref, reactive, watchEffect } from "vue";

js

export default {
  setup() {
    let count = ref(0)
    let person = reactive({
      name: 'jason',
      job: {
        name: 'j1'
      }
    })
    // watchEffect全都監視
    // 無法獲得nV oV
    // 只能監聽某個值不能監聽object
    watchEffect(() => {
      // 裡面用到誰就監視誰的變化 監視對象要為普通數據類型
      // 感覺有點像沒有return的computed
      const x1 = count.value
      const x2 = person
      console.log('watchEffect fb')
    })
    return {
      count,
      person
    }
  }
}

模板

<template>
  {{ count }}
  <button @click="count++">count</button>
  <hr />
  {{ person.name }}
  <button @click="person.name += '!'">name</button>
</template>

參考文章

https://juejin.cn/post/6980987158710452231