Vue 3.0 實(shí)例方法

#$watch

• 參數(shù)：

• {string | Function} source

• {Function | Object} callback

• {Object} [options]

• {boolean} deep
• {boolean} immediate
• {string} flush

• 返回：{Function} unwatch

• 用法：

偵聽(tīng)組件實(shí)例上的響應(yīng)式 property 或函數(shù)計(jì)算結(jié)果的變化?；卣{(diào)函數(shù)得到的參數(shù)為新值和舊值。我們只能將頂層的 data、prop 或 computed property 名作為字符串傳遞。對(duì)于更復(fù)雜的表達(dá)式，用一個(gè)函數(shù)取代。

• 示例：

  const app = Vue.createApp({
    data() {
      return {
        a: 1,
        b: 2,
        c: {
          d: 3,
          e: 4
        }
      }
    },
    created() {
      // 頂層property 名
      this.$watch('a', (newVal, oldVal) => {
        // 做點(diǎn)什么
      })
  
      // 用于監(jiān)視單個(gè)嵌套property 的函數(shù)
      this.$watch(
        () => this.c.d,
        (newVal, oldVal) => {
          // 做點(diǎn)什么
        }
      )
  
      // 用于監(jiān)視復(fù)雜表達(dá)式的函數(shù)
      this.$watch(
        // 表達(dá)式 `this.a + this.b` 每次得出一個(gè)不同的結(jié)果時(shí)
        // 處理函數(shù)都會(huì)被調(diào)用。
        // 這就像監(jiān)聽(tīng)一個(gè)未被定義的計(jì)算屬性
        () => this.a + this.b,
        (newVal, oldVal) => {
          // 做點(diǎn)什么
        }
      )
    }
  })

當(dāng)偵聽(tīng)的值是一個(gè)對(duì)象或者數(shù)組時(shí)，對(duì)其屬性或元素的任何更改都不會(huì)觸發(fā)偵聽(tīng)器，因?yàn)樗鼈円孟嗤膶?duì)象/數(shù)組：

  const app = Vue.createApp({
    data() {
      return {
        article: {
          text: 'Vue is awesome!'
        },
        comments: ['Indeed!', 'I agree']
      }
    },
    created() {
      this.$watch('article', () => {
        console.log('Article changed!')
      })
  
      this.$watch('comments', () => {
        console.log('Comments changed!')
      })
    },
    methods: {
      // 這些方法不會(huì)觸發(fā)偵聽(tīng)器，因?yàn)槲覀冎桓牧薕bject/Array的一個(gè)property，
      // 不是對(duì)象/數(shù)組本身
      changeArticleText() {
        this.article.text = 'Vue 3 is awesome'
      },
      addComment() {
        this.comments.push('New comment')
      },
  
      // 這些方法將觸發(fā)偵聽(tīng)器，因?yàn)槲覀兺耆鎿Q了對(duì)象/數(shù)組
      changeWholeArticle() {
        this.article = { text: 'Vue 3 is awesome' }
      },
      clearComments() {
        this.comments = []
      }
    }
  })

$watch 返回一個(gè)取消偵聽(tīng)函數(shù)，用來(lái)停止觸發(fā)回調(diào)：

  const app = Vue.createApp({
    data() {
      return {
        a: 1
      }
    }
  })
  
  const vm = app.mount('#app')
  
  const unwatch = vm.$watch('a', cb)
  // later, teardown the watcher
  unwatch()

• 選項(xiàng)：deep

為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，可以在選項(xiàng)參數(shù)中指定 deep: true。注意監(jiān)聽(tīng)數(shù)組的變更不需要這么做。

  vm.$watch('someObject', callback, {
    deep: true
  })
  vm.someObject.nestedValue = 123
  // callback is fired

• 選項(xiàng)：immediate

在選項(xiàng)參數(shù)中指定 immediate: true 將立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)：

  vm.$watch('a', callback, {
    immediate: true
  })
  // 立即以 `a` 的當(dāng)前值觸發(fā) `callback`

注意，在帶有 immediate 選項(xiàng)時(shí)，你不能在第一次回調(diào)時(shí)取消偵聽(tīng)給定的 property。

  // 這會(huì)導(dǎo)致報(bào)錯(cuò)
  const unwatch = vm.$watch(
    'value',
    function() {
      doSomething()
      unwatch()
    },
    { immediate: true }
  )

如果你仍然希望在回調(diào)內(nèi)部調(diào)用一個(gè)取消偵聽(tīng)的函數(shù)，你應(yīng)該先檢查其函數(shù)的可用性：

  let unwatch = null
  
  unwatch = vm.$watch(
    'value',
    function() {
      doSomething()
      if (unwatch) {
        unwatch()
      }
    },
    { immediate: true }
  )

• Option: flush

flush選項(xiàng)允許更好地控制回調(diào)的時(shí)間。它可以設(shè)置為pre、post或sync。

默認(rèn)值為pre，它指定在呈現(xiàn)之前應(yīng)調(diào)用回調(diào)。這允許回調(diào)在模板運(yùn)行之前更新其他值。

值post可用于將回調(diào)延遲到呈現(xiàn)之后。如果回調(diào)需要通過(guò)$refs訪問(wèn)更新的DOM或子組件，則應(yīng)使用此選項(xiàng)。

如果flush設(shè)置為sync，則只要值發(fā)生更改，就會(huì)同步調(diào)用回調(diào)。

對(duì)于pre和post，回調(diào)都使用隊(duì)列進(jìn)行緩沖?；卣{(diào)只會(huì)添加到隊(duì)列一次，即使關(guān)注的值更改多次。臨時(shí)值將被跳過(guò)，不會(huì)傳遞給回調(diào)。

緩沖回調(diào)不僅可以提高性能，而且有助于確保數(shù)據(jù)一致性。在執(zhí)行數(shù)據(jù)更新的代碼完成之前，不會(huì)觸發(fā)監(jiān)視程序。

sync觀察者應(yīng)該謹(jǐn)慎使用，因?yàn)樗麄儧](méi)有這些好處。

有關(guān)`flush`的詳細(xì)信息，請(qǐng)參見(jiàn)[效果刷新計(jì)時(shí)](http://www.o2fo.com/vuejs3/vuejs3-35qs3f4h.html)。

• 參考 Watchers

#$emit

• 參數(shù)：

• {string} eventName
• [...args]

觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

• 示例：

只配合一個(gè)事件名使用 $emit：

  <div id="emit-example-simple">
    <welcome-button v-on:welcome="sayHi"></welcome-button>
  </div>

  const app = Vue.createApp({
    methods: {
      sayHi() {
        console.log('Hi!')
      }
    }
  })
  
  app.component('welcome-button', {
    template: `
      <button v-on:click="$emit('welcome')">
        Click me to be welcomed
      </button>
    `
  })
  
  app.mount('#emit-example-simple')

配合額外的參數(shù)使用 $emit：

  <div id="emit-example-argument">
    <advice-component v-on:give-advice="showAdvice"></advice-component>
  </div>

  const app = Vue.createApp({
    methods: {
      showAdvice(advice) {
        alert(advice)
      }
    }
  })
  
  app.component('advice-component', {
    data() {
      return {
        adviceText: 'Some advice'
      }
    },
    template: `
      <div>
        <input type="text" v-model="adviceText">
        <button v-on:click="$emit('give-advice', adviceText)">
          Click me for sending advice
        </button>
      </div>
    `
  })

• 參考

• emits 選項(xiàng)

• 事件拋出一個(gè)值

#$forceUpdate

• 用法：

迫使組件實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

#$nextTick

• 參數(shù)：

• {Function} [callback]

• 用法：

將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 nextTick 一樣，不同的是回調(diào)的 this 自動(dòng)綁定到調(diào)用它的實(shí)例上。

• 示例：

Vue.createApp({
  // ...
  methods: {
    // ...
    example() {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function() {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})

• 參考 nextTick