12. Vue实例中与生命周期相关的方法

1.vm.$mount( [elementOrSelector] )——手动地挂载一个未挂载的实例

• 参数：

  • {Element | string} [elementOrSelector]
  • {boolean} [hydrating]

• 返回值：vm - 实例自身

• 用法：

  如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

  如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

  这个方法返回实例自身，因而可以链式调用其它实例方法。

  

  

• 示例：

  var MyComponent = Vue.extend({
    template: '<div>Hello!</div>'
  })
  
  // 创建并挂载到 #app (会替换 #app)
  new MyComponent().$mount('#app')
  
  // 同上
  new MyComponent({ el: '#app' })
  
  // 或者，在文档之外渲染并且随后挂载
  var component = new MyComponent().$mount()
  document.getElementById('app').appendChild(component.$el)
  

• 参考：

  • 生命周期图示
  • 服务端渲染

2. vm.$forceUpdate()——Vue 实例重新渲染

• 示例：

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

  

  

3. vm.$nextTick( [callback] )—— DOM 更新循环之后执行回调

• 参数：

  • {Function} [callback]

• 用法：

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

  如果vm.$nextTick()没有提供回调且在支持 Promise 的环境中，则它返回一个 Promise。

  

  

  

• 示例：

  new Vue({
    // ...
    methods: {
      // ...
      example: function () {
        // 修改数据
        this.message = 'changed'
        // DOM 还没有更新
        this.$nextTick(function () {
          // DOM 现在更新了
          // `this` 绑定到当前实例
          this.doSomethingElse()
        })
      }
    }
  })
  

• 参考

  • Vue.nextTick
  • 异步更新队列

4. vm.$destroy()—— 完全销毁一个实例

• 用法：

  完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

  触发 beforeDestroy 和 destroyed 的钩子。

  在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

  

• 参考：生命周期图示