Skip to content

实例方法/生命周期

vm.$mount([elementOrSelector])

参数:

{Element | string} [elementOrSelector] {boolean} [hydrating] 返回值:vm - 实例自身

用法:

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

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

这个方法返回实例自身,因此可以链式调用其他实例方法

js
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)

vm.$forceUpdate()

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

vm.$nextTick([callback])

参数:

{Function} [callback] 用法:

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

js
new Vue({
  // ...
  methods: {
    example() {
      // 修改数据
      this.message = 'changed'
      // DOM还没有更新
      this.$nextTick(function() {
        // DOM现在更新了
        this.doSomething()
      })
    }
  }
})

vm.$destroy()

用法:

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

触发 beforeDestroy 和 destroyed 的钩子。

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

共 20 个模块,1301 篇 Markdown 文档。