Vue生命周期

时间 2019-12-11

标签 vue 生命周期繁體版

原文原文链接

生命周期的钩子 LifeCycle hookshtml

执行顺序:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

</head>
<body>
<div id="app">
    <p>{{message}}</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({ el: "#app", data: { message: "hello gaoxin!!" }, beforeCreate: function () { console.group("beforeCreate 建立实例以前==========="); console.log("el: " + this.$el); // undefined
            console.log("data: " + this.$data); // undefined
            console.log("message: " + this.message); }, created: function () { console.group("Created: 建立实例完成==========="); console.log("el: " + this.$el); // undefined
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
 }, beforeMount: function () { console.group("beforeMount 挂载前状态=========="); console.log("el: " + this.$el); // 已被初始化
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
 }, mounted: function () { console.group("Mounted 挂载结束状态============="); console.log("el: " + this.$el); // 已被初始化
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
 }, beforeUpdate: function () { console.group("beforeUpdate 更新前状态========="); console.log("el: " + this.$el); console.log("data: " + this.$data); console.log("message: " + this.message); }, updated: function () { console.group("Updated 更新完成状态"); console.log("el: " + this.$el); console.log("data: " + this.$data); console.log("message: " + this.message); }, beforeDestroy: function () { console.group("beforeDestroy 实例销毁以前"); console.log("el: " + this.$el); console.log("data: " + this.$data); console.log("message: " + this.message); }, destroyed: function () { console.group("Destoryed 实例销毁以后"); console.log("el: " + this.$el); console.log("data: " + this.$data); console.log("message: " + this.message); } }) </script>


</body>
</html>

create 和 mounted 相关:

执行上面代码, 能够看到:vue

　　　　beforecreated: el和data并未初始化npm

　　　　created: 完成了data数据的初始化 el没有浏览器

　　　　beforeMount: 完成了 el 和data 的初始化app

　　　　mounted: 完成了挂载函数

也就是说~挂载前的状态是虚拟DOM技术,先把坑站住了, 挂载以后才真正的把值渲染进去~ui

update相关:

　　咱们在浏览器console里执行命令:this

　　　　app.message = "hello~"spa

　　咱们就出发了update相关的钩子函数, 也就是说data里的值被修改会触发update操做.net

destroy 相关

　　咱们在浏览器console里执行命令:

　　　　app.message = "hello~"

　　咱们就出发了update相关的钩子函数,也就是说组件被销毁

　　更改message的值 , DOM中的值不变, 也就是说DOM元素依然存在只是不受Vue控制了