Vue 3.0 實例方法

#$watch

• 參數(shù)：

• {string | Function} source

• {Function | Object} callback

• {Object} [options]

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

• 返回：{Function} unwatch

• 用法：

偵聽組件實例上的響應式 property 或函數(shù)計算結果的變化。回調(diào)函數(shù)得到的參數(shù)為新值和舊值。我們只能將頂層的 data、prop 或 computed property 名作為字符串傳遞。對于更復雜的表達式，用一個函數(shù)取代。

• 示例：

  const app = Vue.createApp({
    data() {
      return {
        a: 1,
        b: 2,
        c: {
          d: 3,
          e: 4
        }
      }
    },
    created() {
      // 頂層property 名
      this.$watch('a', (newVal, oldVal) => {
        // 做點什么
      })

  
      // 用于監(jiān)視單個嵌套property 的函數(shù)
      this.$watch(
        () => this.c.d,
        (newVal, oldVal) => {
          // 做點什么
        }
      )

  
      // 用于監(jiān)視復雜表達式的函數(shù)
      this.$watch(
        // 表達式 `this.a + this.b` 每次得出一個不同的結果時
        // 處理函數(shù)都會被調(diào)用。
        // 這就像監(jiān)聽一個未被定義的計算屬性
        () => this.a + this.b,
        (newVal, oldVal) => {
          // 做點什么
        }
      )
    }
  })

當偵聽的值是一個對象或者數(shù)組時，對其屬性或元素的任何更改都不會觸發(fā)偵聽器，因為它們引用相同的對象/數(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: {
      // 這些方法不會觸發(fā)偵聽器，因為我們只更改了Object/Array的一個property，
      // 不是對象/數(shù)組本身
      changeArticleText() {
        this.article.text = 'Vue 3 is awesome'
      },
      addComment() {
        this.comments.push('New comment')
      },

  
      // 這些方法將觸發(fā)偵聽器，因為我們完全替換了對象/數(shù)組
      changeWholeArticle() {
        this.article = { text: 'Vue 3 is awesome' }
      },
      clearComments() {
        this.comments = []
      }
    }
  })

$watch 返回一個取消偵聽函數(shù)，用來停止觸發(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()

• 選項：deep

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

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

• 選項：immediate

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

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

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

  // 這會導致報錯
  const unwatch = vm.$watch(
    'value',
    function() {
      doSomething()
      unwatch()
    },
    { immediate: true }
  )

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

  let unwatch = null

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

• Option: flush

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

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

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

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

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

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

sync觀察者應該謹慎使用，因為他們沒有這些好處。

有關`flush`的詳細信息，請參見[效果刷新計時](http://www.o2fo.com/vuejs3/vuejs3-35qs3f4h.html)。

• 參考 Watchers

#$emit

• 參數(shù)：

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

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

• 示例：

只配合一個事件名使用 $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 選項

• 事件拋出一個值

#$forceUpdate

• 用法：

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

#$nextTick

• 參數(shù)：

• {Function} [callback]

• 用法：

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

• 示例：

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