关于 vue 生命周期钩子函数事件

今天药忘吃喽~ 2021-11-09 13:28 404阅读 0赞

vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、卸载等一系列过程，我们称这是vue的生命周期。

通俗的将就是vue实例从创建到销毁的过程，就是生命周期。

生命周期 钩子函数就是这些事件

beforecreat创建前状态，created创建完毕状态，beforemount挂载前状态，mounted挂载结束状态，beforeupdate更新前状态，updataed更新后状态，beforedestory销毁前状态，destory销毁后状态。

<!DOCTYPE html >
    　　<html>
    　　　　<head>
    　　　　　　<div id='div1' v-bind:title="div_title">{
        {hello_message}}</div>
    　　　　</head>
    　　<body>
    　　　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    　　　　<script>
    　　　　　　var v1 = new Vue({
        
    　　　　　　　　　　　　　　　　　　el: "#div1",
    　　　　　　　　　　　　　　　　　　data: {
        
    　　　　　　　　　　　　　　　　　　　　　　hello_message: "Hello, there welcome to VueJS world",
    　　　　　　　　　　　　　　　　　　　　　　div_title: "This is my intro div",
    　　　　　　　　　　　　　　　　　　},
    　　　　　　　　　　　　　　　　　　beforeCreate: function(){alert('Before Create');},
    
    　　　　　　　　　　　　　　　　　　created: function(){alert('Created');},
    
    　　　　　　　　　　　　　　　　　　beforeMount: function(){alert('Before Mount');},
    
    　　　　　　　　　　　　　　　　　　mounted: function(){alert('Mounted');},
    
    　　　　　　　　　　　　　　　　　　beforeUpdate: function(){alert('Before Update');},
    
    　　　　　　　　　　　　　　　　　　updated: function(){alert('Updated');},
    
    　　　　　　　　　　　　　　　　　　beforeDestroy: function(){alert('Before Destroy');},
    
    　　　　　　　　　　　　　　　　　　destroyed: function(){alert('Destroyed');}});//To fire updatev1.$data.hello_message = "New message";
    　　　　　　　　　　　　　　　　// This can be invoked to destroy the object, which will fire the destroy hook//v1.$destroy();
    　　　　</script>
    　　</body>
    　　</html>

beforeCreate（新对象诞生）

Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问 。我们可以在这个钩子中插入我们的代码，在对象初始化之前执行。

Create（具有默认特性的对象,实例创建成功，此时 data 中的数据显示出来了）

在这个生命阶段，对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。

beforeMounted（数据中的 data 在模版中先占一个位置）

这个钩子被调用 beforeMounted。在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。

Mounted（模版中的 data 数据直接显示出来了）

一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。

beforeUpdate（更改已完成，但尚未准备好更新DOM）

在外部事件/用户输入beforeUpdate发生更改时，此钩子即 在反映原始DOM元素的更改之前被触发。

为了解决这个问题 beforeUpdated，我添加了下面的代码。它通过更新DOM来更改运行时中的hello\_message。

// To fire updatev1.$data.hello_message="New message";