Vue中的声明周期是什么？
vue实例从创建到销毁的过程称之为vue的生命周期
用Vue框架，熟悉它的生命周期可以让开发更好的进行。
首先先看看官网的图，详细的给出了vue的生命周期:
接下来我们就根据上面那张图来分析分析模拟一下执行生命周期
它可以总共分为8个阶段：
beforeCreate（创建前）,
created（创建后）,
beforeMount(载入前),
mounted（载入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（销毁前）,
destroyed（销毁后）
<!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>life cycle</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div class="container">
<button @click = "msg = '我是updated周期'"></button>
{{ msg }}
</div>
</body>
<script>
// 我们可以看图
// https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
let vue = new Vue({
el : ".container",
data : {
msg : "咳咳咳，lifecycle"
},
methods : {
show() {
return "我是lifecycle methods";
}
},
// ##### 组件创建的生命周期
// 1.首先我们创建了一个vue 实例new Vue var vue = new Vue
// 2.我们遇到的第一个生命周期
// beforeCreate 初始化vue 实例 只有默认的一些生命周期函数和
// 默认事件，其它都为创建好
// 在beforeCreate的时候 data和methods还没有初始化
beforeCreate () {
console.log(this.msg);
console.log(this.show);
// 输出undefined
},
// 3.遇到第二个生命周期created data和methods都已经初始化完毕
// 如果要操作data和methods的数据最好在created中操作
created() {
console.log(this.msg);//输出 咳咳咳，lifecycle
console.log(this.show()); //输出 我是lifecycle methods
} ,
// 4.我们进入判断，有 `el` 吗？ 有 在继续问有template吗?
// 有 将模板编译成function
// 没有 自动编译成模板
// 这个编辑模板 把vue的指令都执行完毕形成一个最终的字符串模板存放在
// 内存当中，只是渲染好了模板，并没有挂载到DOM树上面
// 5.我们遇到第三个生命周期函数 beforeMount
// 这个时候我们的模板还在内存当中，并没有渲染到页面当中
// 所以这个时候的数据还是旧的
beforeMount() {
console.log(document.querySelector(".container").innerText);
//输出 {{ msg }}
// 这个时候页面是之前的html数据
// 并没有渲染新的数据
},
// 6.我们遇到了第四个生命周期函数 Mounted
// 这个时候我们的页面数据已经render最新的了
// 表示实例化完毕
// 组件创建生命周期结束
// 开始执行生命周期阶段
mounted() {
console.log(document.querySelector(".container").innerText);
//输出 哈哈，我是lifecycle
},
// 7.##########我们开启 执行组件生命周期阶段(数据更新才执行)
// 执行生命周期可以执行次数 0 - 正无求大
// 因为数据没更新就不会执行 而且数据可以一直更新
// 7.1 首先我们要判断数据有没有进行 页面之间的数据的传递 数据发生改变了吗
// 经历了数据执行了吗
// beforeUpdate生命周期阶段
// 这个时候我们的数据进行了改变
// 但是beforeUpdate阶段的页面上的数据还是旧的 并没有渲染新数据
beforeUpdate() {
console.log(document.querySelector(".container").innerText);
// 页面上的数据是： 哈哈哈，lifecycle
console.log(this.msg);
// 而组件里面的数据是： 我是updated周期
},
// 8.我们遇到的生命周期 updated
// 这个时候页面上的数据是最新的 进行了更新
// 进行了 M层 -> V层的更新
updated() {
console.log(document.querySelector(".container").innerText);
// 页面上的数据是： 我是updated周期
console.log(this.msg);
// 而组件里面的数据是： 我是updated周期
},
// 9.我们的组件执行生命周期结束
// #########开始执行销毁生命周期
/*
beforeDestroy 当执行已经进行了销毁lifecycle阶段
但是data,methods,filters,directives等等还并没有销毁
都是出于可执行状态
destroyed 当执行到destroyed周期函数的时候，组件已经完全被销毁了
data,methods,filters,directives等等都不可用
*/
});
</script>
</html>这就是我对生命周期的理解，很简单吧。
想看更多点击我的博客