Vue 3.0 实例方法 详解

#$watch

1. 参数：

1. {string | Function} source

1. {Function | Object} callback

1. {Object} [options]

1. {boolean} deep
2. {boolean} immediate
3. {string} flush

1. 返回：{Function} unwatch

1. 用法：

侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 data、prop 或 computed property 名作为字符串传递。对于更复杂的表达式，用一个函数取代。

1. 示例：

  const app = Vue.createApp({
    data() {
      return {
        a: 1,
        b: 2,
        c: {
          d: 3,
          e: 4
        }
      }
    },
    created() {
      // 顶层property 名
      this.$watch('a', (newVal, oldVal) => {
        // 做点什么
      })
      // 用于监视单个嵌套property 的函数
      this.$watch(
        () => this.c.d,
        (newVal, oldVal) => {
          // 做点什么
        }
      )
      // 用于监视复杂表达式的函数
      this.$watch(
        // 表达式 `this.a + this.b` 每次得出一个不同的结果时
        // 处理函数都会被调用。
        // 这就像监听一个未被定义的计算属性
        () => this.a + this.b,
        (newVal, oldVal) => {
          // 做点什么
        }
      )
    }
  })

当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为它们引用相同的对象/数组：

  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: {
      // 这些方法不会触发侦听器，因为我们只更改了Object/Array的一个property，
      // 不是对象/数组本身
      changeArticleText() {
        this.article.text = 'Vue 3 is awesome'
      },
      addComment() {
        this.comments.push('New comment')
      },
      // 这些方法将触发侦听器，因为我们完全替换了对象/数组
      changeWholeArticle() {
        this.article = { text: 'Vue 3 is awesome' }
      },
      clearComments() {
        this.comments = []
      }
    }
  })

$watch 返回一个取消侦听函数，用来停止触发回调：

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

1. 选项：deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

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

1. 选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

  vm.$watch('a', callback, {
    immediate: true
  })
  // 立即以 `a` 的当前值触发 `callback`

注意，在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

  // 这会导致报错
  const unwatch = vm.$watch(
    'value',
    function() {
      doSomething()
      unwatch()
    },
    { immediate: true }
  )

如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：

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

1. Option: flush

flush选项允许更好地控制回调的时间。它可以设置为pre、post或sync。

默认值为pre，它指定在呈现之前应调用回调。这允许回调在模板运行之前更新其他值。

值post可用于将回调延迟到呈现之后。如果回调需要通过$refs访问更新的DOM或子组件，则应使用此选项。

如果flush设置为sync，则只要值发生更改，就会同步调用回调。

对于pre和post，回调都使用队列进行缓冲。回调只会添加到队列一次，即使关注的值更改多次。临时值将被跳过，不会传递给回调。

缓冲回调不仅可以提高性能，而且有助于确保数据一致性。在执行数据更新的代码完成之前，不会触发监视程序。

sync观察者应该谨慎使用，因为他们没有这些好处。

有关`flush`的详细信息，请参见[效果刷新计时](https://www.w3cschool.cn/vuejs3/vuejs3-35qs3f4h.html)。

1. 参考 Watchers

#$emit

1. 参数：

1. {string} eventName
2. [...args]

触发当前实例上的事件。附加参数都会传给监听器回调。

1. 示例：

只配合一个事件名使用 $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')

配合额外的参数使用 $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>
    `
  })

1. 参考

1. emits 选项

1. 事件抛出一个值

#$forceUpdate

1. 用法：

迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

#$nextTick

1. 参数：

1. {Function} [callback]

1. 用法：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

1. 示例：

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()
      })
    }
  }
})

1. 参考 nextTick