2020 vuejs 组件生命周期(Lifecycle)
2020-05-11 本文已影响0人
zidea
vuejs-logo.png
组件生命周期(Lifecycle)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{count}}</h1>
<button @click="updateEvent">Update</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
updateEvent: function () {
this.count += 1;
}
},
beforeCreate() {
console.log('beforeCreate - this.count', this.count)
console.log('beforeCreate - this.count', this.$el)
}
})
</script>
</body>
</html>
图中 beforeCreate 和 created 是创建 hook 方法，提供这些方法让我们根据组件创建过程不同阶段去干不同的事。
-
beforeCreate
-
Observe Data
-
Init Events
-
created
注意我们通常是请求数据更新视图，那么在 before create 时候还没有完成数据和视图依赖关系，这时候是拿不到数据，所以请求数据这一步通常放到 created 这个 hook 函数来做，也可以写作 mount 这个 hook 函数中。
如果在创建阶段即使我们没有通过 el 属性来指定将 vue 组件绑定到哪个 dom 元素上也没有关系，我们可以随后通过vm.$mount(el)来绑定组件。那么如果在定义组件时没有指定要挂载的元素，随后也没有调用vm.$mount(el)指定要挂载哪一个元素上，这个组件就会被浏览器回收掉。 -
如果有 template 属性值，就将模板编译为 render 方法执行，如果没有 template 就会将 outerHTML 作为模板使用
-
beforeMount 和 mounted 是我们通过 render function 渲染出 dom 和要挂载元素之间结合的前后阶段，beforeMount 拿到，关于 beforeMount 和 mounted 不同可以通过下图一目了然
屏幕快照 2020-05-11 上午5.19.06.png
- beforeUpdate 和 update 是更新数据到视图的两个 hook 函数，这两函数区别是当数据更新是否通过 re-render 方法更新到其他dom上，例如一个文本输入框，输入框旁边有一个显示输入内容元素，beforeUpdate 是在输入框输入文字还没有更新到旁边dom之前的 hook 函数。
屏幕快照 2020-05-11 上午5.22.13.png
- 移除元素
vm.$destroy()调用就会移除组件，beforeDestroy 是在执行移除前通知开发人员要开始移除组件，移除 watcher 子组件和事件监听器
document.getElementById('del').addEventListener('click', function () {
vm.$destroy();
})
进入 destroy 并不会移除 html 元素，而是将 vue 组件实体与其之前绑定 html 元素脱离，不再有任何关系。
