Vue中有哪些生命周期及使用场景
生命周期在vue中分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。1、beforeCreate(创建前)在数据观测和初始化事件还未开始。2、created(创建后)此时状态:Vue里的数据在内存中已经创建完毕,但是还没有渲染到页面上。可做操作:从服务器获取一些初始化的数据,或者通过ajax向服务器发送一些数据。3、beforeMount(载入前)在挂载开始之前被调用,相关的rende
生命周期
在vue中分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。
1、beforeCreate(创建前)
在数据观测和初始化事件还未开始。
2、created(创建后)
此时状态:Vue里的数据在内存中已经创建完毕,但是还没有渲染到页面上。
可做操作:从服务器获取一些初始化的数据,或者通过ajax向服务器发送一些数据。
3、beforeMount(载入前)
在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
4、mounted(载入后)
此时状态: 数据已经渲染在了浏览器的页面上。
可做操作:操作DOM节点
5、beforeUpdate(更新前)
在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
6、updated(更新后)
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7、beforeDestroy(销毁前)
此时状态:奄奄一息。
可做操作:移除定时器或者事件绑定。
但是销毁的时候需要手动销毁:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="root">
{{a}}
<div @click="destroyBtn">销毁</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#root',
data: {
a: 1,
b: 2
},
beforeDestroy() {
alert("gameover")
},
methods: {
destroyBtn: function() {
this.$destroy();
}
}
})
// vm.$destroy()
</script>
</body>
</html>
8、destroyed(销毁后)
在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
使用场景
created: 进行ajax请求异步数据的获取、初始化数据
mounted: 挂载元素dom节点的获取
nextTick: 针对单一事件更新数据后立即操作dom
updated: 任何数据的更新,如果要做统一的业务逻辑处理
watch: 监听数据变化,并做相应的处理
更多推荐
所有评论(0)