vm.$destroy()
作用：完全销毁一个实例。清理 vm 与其它实例的连接，解绑 vm 的全部指令及事件监听器。
触发： beforeDestroy 和 destroyed 的钩子。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的生命周期钩子</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h3 :style="{opacity}">你好</h3>
<button @click="stop">不要闪烁了</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
opacity: 1
},
methods: {
stop() {
// 销毁 Vue实例
this.$destroy()
}
},
// Vue 完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用 mounted
mounted() {
this.timer = setInterval(() => {
this.opacity -= 0.01
if (this.opacity <= 0) this.opacity = 1
}, 16)
},
// 在 Vue实例 销毁之前被调用，一般做收尾工作
beforeDestroy() {
clearInterval(this.timer)
}
})
</script>
</html>
一个小细节
关于这段 解绑 vm 的全部指令及事件监视器
此处的事件：指的是自定义事件，原生 DOM 事件依然有效
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>n = {{n}}</h2>
<button @click="add">n + 1</button>
<br><br>
<button @click="stop">销毁</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
n: 0
},
methods: {
add() {
alert('触发 add')
this.n += 1
},
stop() {
// 销毁 Vue实例
this.$destroy()
}
}
})
</script>
</html>
运行结果
可以看到
销毁前：可以通过触发 add 正常使 n 值发生变化
销毁后：可以触发 add 但是，n 值不能正常发生变化
因此：可以发现销毁后会使 自定义事件失效，但原生的 DOM 事件依然有效
