首页 > 代码库 > Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改
Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改
html
<div id="app"> </div> <p><button onclick="destroy()">卸载</button></p> <p><button onclick="reload()">刷新</button></p> <p><button onclick="tick()">修改</button></p>
js
var demo = Vue.extend({ template:`#tmp`, data:function(){ return{ message:"用Vue.extend构造器生成一个组件,并用实例$mount挂载上去" } }, destroyed:function(){ console.log(‘10-destroyed(第十个钩子函数) 销毁之后‘); }, mounted:function(){ console.log(‘4-mounted 被创建‘); }, updated:function(){ console.log("6-updated 被更新后"); } }) var vm = new demo().$mount(‘#app‘) function destroy(){ vm.$destroy() }; function reload(){ vm.$forceUpdate() }; function tick(){ vm.message="原生js操作对象属性" // 当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像。 vm.$nextTick(function(){ console.log(‘原生js操作对象属性,修改后利用$nextTick来检测并输出修改的内容为‘+vm.message) }) }
Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。