vue生命周期

最新推荐文章于 2022-07-08 17:11:45 发布

原创最新推荐文章于 2022-07-08 17:11:45 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue.js的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段，并通过示例展示了各阶段的数据访问和操作。在创建Vue实例时，beforeCreate和created阶段用于数据初始化；挂载过程中，beforeMount和mounted分别处理模板解析和DOM绑定；更新阶段的beforeUpdate和updated涉及虚拟DOM的更新和页面渲染；最后，beforeDestroy和destroyed标志着组件的销毁和资源清理。

vue生命周期：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
使用：
1.创建vue实例：
beforeCreate：初始化的时候调用，完成vue初始化；
created：完成了vue数据注入及数据监听操作，可以进行数据的访问
2.挂载并渲染：
beforeMount：vue会判断实例中是否含有el属性，如果没有会调用vm.$mount(el) ,接着会判断是否含有template属性，如果有将其解析为一个render function ，如果没有将el指定的外部html进行解析
mounted：数据的绑定操作
3.更新阶段：
beforeUpdate：更新虚拟dom节点
updated：完成了页面的重新渲染
4.销毁阶段：
beforeDestroy：销毁之前调用
destroyed：完成了监听器，子组件，事件监听等移除，销毁vue实例对象
js中：

var app = new Vue({
                el: "#app",
                data: {
                    name: 'tom'
                },
                beforeCreate: function() {
                    alert("beforeCreate" + this.name);
                },
                created: function() {
                    alert("created" + this.name)
                },
                beforeMount: function() {
                    alert("beforeMount" + this.name)
                },
                mounted: function() {
                    alert("mounted" + this.name)
                },
                beforeUpdate: function() {
                    alert("beforeUpdate" + this.name)
                },
                updated: function() {
                    alert("updated" + this.name)
                },
            });