一.$mount方法
$mount方法是用来挂载我们的扩展的.
二.$destroy销毁方法
1.html写在app外面,注意因为是外面,所以点击要用onclick
<div id="app">
<h3>扩展构造器</h3>
<author></author>
</div>
<!-- 构造器销毁:写在app外面,注意因为是外面,所以要用onclick -->
<p><button onclick="destroy()">点我销毁</button></p>
let jspang = Vue.extend({
template: `<p>{{message}}</p>`,
data: function() {
return {
message: 'hello jspang!'
}
}, //扩展里面也可以加生命周期
destroyed() {
console.log('销毁了')
}
})
let vm = new jspang().$mount('author')
function destroy() {
vm.$destroy() //调用销毁的方法
}
当我们点击时,就会调用destroy里面的方法,执行vm实例里的$destroy()方法,最终在控制台打印如下(点击后才打印销毁,不点击不打印,只打印一次):
三.$forceUpdate方法
更新时触发.
写法跟$destroy类似
1.html里
<div id="app">
<h3>扩展构造器</h3>
<author></author>
</div>
<p><button onclick="reload()">点我刷新</button></p>
2.js里
let jspang = Vue.extend({
template: `<p>{{message}}</p>`,
data: function() {
return {
message: 'hello jspang!'
}
}, //扩展里面也可以加生命周期
destroyed() {
console.log('销毁了')
},
updated() {
console.log("被更新了");
},
})
let vm = new jspang().$mount('author')
function reload(){
vm.$forceUpdate()
}
效果:点击会不停的更新
$nextTick方法
修改数据时触发.
1.html里
<div id="app">
<h3>扩展构造器</h3>
<author></author>
</div>
<p><button onclick="tick()">点我修改</button></p>
2.js
let jspang = Vue.extend({
template: `<p>{{message}}</p>`,
data: function() {
return {
message: 'hello jspang!'
}
}, //扩展里面也可以加生命周期
destroyed() {
console.log('销毁了')
},
updated() {
console.log('被更新了')
}
})
let vm = new jspang().$mount('author')
function tick() {
vm.message = 'update message info '
vm.$nextTick(function() {
console.log('message更新完后我被调用了')
})
}
实现效果: