美文网首页
vue-实例方法 / 生命周期

vue-实例方法 / 生命周期

作者: JK丶帝 | 来源:发表于2020-02-26 23:18 被阅读0次

vm.$mount( [elementOrSelector] )

参数

{Element | string} [elementOrSelector]

{boolean} [hydrating]

返回值:vm - 实例自身

用法

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

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

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

示例

varMyComponent = Vue.extend({template:'<div>Hello!</div>'})// 创建并挂载到 #app (会替换 #app)newMyComponent().$mount('#app')// 同上newMyComponent({el:'#app'})// 或者,在文档之外渲染并且随后挂载varcomponent =newMyComponent().$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。

示例

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

参考

Vue.nextTick

异步更新队列

vm.$destroy()

用法

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

触发 beforeDestroy 和 destroyed 的钩子。

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

参考生命周期图示

相关文章

  • 2018-03-16--Vue2.0 探索之路——生命周期和钩子

    vue-生命周期中的钩子 一、vue的生命周期:实例从创建到销毁的过程wKioL1mv4wbSkajYAAr2x7...

  • vue-实例方法 / 生命周期

    vm.$mount( [elementOrSelector] ) 参数: {Element | string} [...

  • vue-实例方法 / 数据

    vm.$watch( expOrFn, callback, [options] ) 参数: {string | F...

  • vue-实例方法 / 事件

    vm.$on( event, callback ) 参数: {string | Array } event(数组只...

  • 02-Spring中Bean的生命周期

    Bean的生命周期 一个简单的Bean的生命周期: 推断构造方法(确定使用哪个构造方法来实例化对象) 实例化 填充...

  • React 学习笔记

    生命周期 16.3生命周期变动说明 实例化 实例化完成后的更新这些方法会在组件实例被创建和插入DOM时被调用 co...

  • 10、Vue_生命周期

    实例的生命周期 实例的生命周期图示(选项/生命周期钩子)实例生命周期 解释1.var v = new Vue{}:...

  • 2018-07-11

    vue-声明周期钩子函数 1、created 实例被创建后调用 var data = { a: 50}; var ...

  • vue-实例

    创建vue实例 创建vue实例时,可接收如下几个对象 data 作用:实例的数据对象类型:object|Funct...

  • JSP基础(二)

    1.Servlet生命周期创建servlet实例当servlet实例化后,将调用这个对象的init()方法进行初始...

网友评论

      本文标题:vue-实例方法 / 生命周期

      本文链接:https://www.haomeiwen.com/subject/qkzgchtx.html