第二章：vue 生命周期
2018-12-10 本文已影响0人
锋叔
当我们建立起一个项目之后，我们首先要了解的是vue的生命周期。也就是vue的生命过程，你就当你是上帝，而vue就是你创造的生命，赋予他一个生死循环是第一步应该做的事情。
八个生命周期
一个new Vue()我们叫一个实例。
实例创建之前——>实例创造之后——>编译，挂载之前——>编译，挂载之后——>更新之前——>更新之后——>销毁之前——>销毁之后。
基础环境-基于以后我们在此学习。
- 第一步：随便那个文件下新建一个项目，随便命名。我命名vue
- 第二步：然后再新建一个文件夹，oneDay(生命周期)
- 第三步： 新建一个名为js的文件夹
-
第四步： 从第一章建立的项目中的module文件目录下的vue，复制这两个文件放入js文件夹。
image.png
- 第五步：新建一个create.html
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue | 生命周期</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/vue.js"></script>
</head>
<body>
<div id="myApp" :style="style">
<p>{{msg}}</p>
<p>Vue 的生命周期分为八个阶段，分别是:
<br><br><br>实例创建之前——>实例创造之后——>编译，挂载之前——>编译，挂载之后——>更新之前——>更新之后——>销毁之前——>销毁之后。</p>
<button @click="updateFun">更新组件</button>
<button @click="destroyFun">销毁组件</button>
</div>
<script>
var vm = new Vue({
el: "#myApp",
data: {
style: "textAlign:center;marginTop:250px;",
msg: "welcome to myWebHome"
},
methods: {
// 更新组件
updateFun(){
this.msg = '欢迎来到张天师的程序界面。'
},
// 销毁组件
destroyFun(){
vm.$destroy();
}
},
beforeCreate(){
alert("组件实例刚刚创建，还未进行数据观测和事件配置！");
},
//这是我们比较常用的。一般用来初始化数据。
created(){
alert("实例刚刚创建完成，已经进行数据观测和事件配置");
},
beforeMount(){
alert("编译之前，还没挂载。");
},
//这个我们也比较常用的。
mounted(){
alert("模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上的数据展示");
},
beforeUpdate(){
alert("组件更新之前");
},
updated(){
alert("组件更新之后,更新完之后数据才会发生变化。");
},
beforeDestroy(){
alert("销毁实例之前。");
},
destroyed(){
alert("组件销毁之后");
}
});
</script>
</body>
</html>
简单粗暴一点儿，你自己复制过去吧。用浏览器直接打开就可以看到了效果了。
重点关注两个钩子created() 和 mounted()
created() 创建完成。
此时可以调用事件和数据了。也就是实例中的data: {}和methods: {} 里面的内容。
mounted() 渲染之后
此时界面已经渲染了，你可以找到里面的元素了。
PS
this.$refs的应用都必须在这个钩子后才能使用，否则找不到的。
$refs()是什么？
类似于<div id = "myDiv"></div> === <div ref = "myDiv" ></div>
var id = document.getElementById('myDiv')
var id = this.$refs.myDiv
