Vue实例方法/生命周期

- 日理万妓 2024-04-17 05:58 67阅读 0赞

### Vue实例方法/声明周期 ###

*  vm.$mount( \[elementOrSelector\] )
 *  vm.$forceUpdate()
 *  vm.$nextTick( \[callback\] )
 *  vm.$destroy()

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

# vm.$forceUpdate() #

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

# vm.$nextTick( \[callback\] ) #

*  参数：`{Function} [callback]`
 *  用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 `Vue.nextTick` 一样，不同的是回调的 this 自动绑定到调用它的实例上。  
    2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不是原生支持 Promise (IE：你们都看我干嘛)，你得自行 polyfill。

示例：

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

# vm.$destroy() #

用法：

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。  
触发 `beforeDestroy` 和 `destroyed` 的钩子。  
在大多数场景中你不应该调用这个方法。最好使用 `v-if` 和 `v-for` 指令以数据驱动的方式控制子组件的生命周期。