Vue.js系列(五):Vue的生命周期!
前言
注意本次用cdn形式引入js学习,有node.js的玩家可以用node.js。CDN下载地址:https://vuejs.org/js/vue.min.js以及Node.js:Vue系列: windows下npm安装vue
今天博主将为大家分享Vue.js系列(五):Vue的生命周期!不喜勿喷,如有异议欢迎讨论!
有一个强大的地基才能写出健壮的程序!请先阅读博主关于:Windows10用npm安装Vue!
目标
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
学习Vue对象创建过程中每个时期vue实例对象的状态
在不同的生命周期中vue对象内部各个属性
学习vue对象内部的各个事件初始化顺序
学习各个状态的钩子函数
1.1.1 Vue生命周期图示
每个 Vue应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
var vm = new Vue({
// 选项
})
每个 Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM并在数据变化时更新 DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
1.1.2 beforeCreate
vue实例对象或组件实例被创建,Vue对象数据观测 data数据对象 和 event事件, watcher对象开始初始化但尚未初始化完成时.
此时,vue实例内的对象均是undefined不可访问.
var vm = new Vue({
el: "#app",
data: {
msg: "hello world!"
},
beforeCreate: function() {
console.log(this.$el); // undefined
console.log(this.$data); // undefined
console.log(this.msg); // undefined
//可以在这加个开始loading,设置加载时的提示信息等
//获取屏幕尺寸,设备信息,运行环境等信息
}
});
1.1.3 created
在实例创建完成后被立即调用。在这一步,数据观测 data event watcher 均已被创建。
var vm = new Vue({
el: "#app",
data: {
msg: "hello world!"
},
created: function() {
console.log(this.$el); // undefined
console.log(this.$data); // object
console.log(this.msg); // hello world!
//ajax获取数据,将获取到的数据赋值给 data或data中的对象
}
});
1.1.4 beforeMount
将vue实例挂在到dom对象之前.
vm.$el对象已创建,但未挂载到页面上.
此时获取到的dom对象中的指令尚未被计算.
var vm = new Vue({
el: "#app",
data: {
msg: "hello world!"
},
beforeMount: function() {
console.log(this.$el); // virtual dom
console.log(this.$data); // object
console.log(this.msg); // hello world!
//此时还无法通过document.getElementById等函数获取dom对象.
}
});
1.1.5 mounted
在原dom对象被vue创建的vm.$el替换到页面上之后.此时页面上才会存在相对于的dom节点.
一般理解为dom对象创建完毕.
// jQuery
$(document).ready(function() {
//ready
});
// vue
var vm = new Vue({
el: "#app",
mounted: function() {
//ready
console.log(this.$el); // javascript dom
console.log(this.$data); // object
console.log(this.msg); // hello world!
//在这里可以配合一些 页面加载完毕后的 处理.
//例如: iSlider.js,fancybox.js 等插件初始化.
}
})
1.1.6 beforeUpdate
当数据发生变化时,组件更新之前
调用时机 数据更新时调用,vm.$el替换到页面上之前.
// vue
var vm = new Vue({
el: "#app",
data: {
msg: "hello vue."
},
beforeUpdate: function() {
//当 data 中的属性,发生变化时,
//将现有的变化更新到 html 页面上之前触发此事件
}
})
1.1.7 updated
组件更新之后
调用时机 新的数据更新到dom节点上之后.
// vue
var vm = new Vue({
el: "#app",
data: {
msg: "hello vue."
},
updated: function() {
//当data发生变化并且变化后的内容已经响应到html页面上之后,触发该事件.
// updated 不保证所有的内容全部响应完毕之后才触发.
}
})
1.1.8 beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
// vue
var vm = new Vue({
el: "#app",
data: {
msg: "hello vue."
},
beforeDestroy: function() {
//实例销毁之前调用。在这一步,实例仍然完全可用。
}
})
vm.$destroy();
1.1.9 destroyed
Vue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
// vue
var vm = new Vue({
el: "#app",
data: {
msg: "hello vue."
},
destroyed: function() {
console.log("vue 组件已经被销毁.");
}
})
vm.$destroy();
总结
在本次学习中:
学习Vue创建对象时各生命周期内vue实例内对象的状态
学习常用的vue生命周期回调函数beforeCreate,created,mounted等
勇于尝试(做练习):
- 创建一个html页面,在vue实例创建时显示加载中.实例创建后使用ajax从服务器获取数据绑定到data对象,并关闭加载中.
答案如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>数据状态及函数</title>
</head>
<body>
<div id="app">
<h3>Watch对象</h3>
<p>
请输入搜索关键词:
<input v-model="key">
</p>
<p v-text="result"></p>
</div>
<script src="引入你的Vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
key: '',
result: '请先输入查询条件...',
i: 0
},
watch: {
key: function (newKey, oldKey) {
this.result = '请稍后,正在查询中...';
this.search();
}
},
methods: {
search: function () {
console.log(this.i++);
var vm = this;
setTimeout(function () {
vm.result = "第:" + vm.i + "次搜索完毕.";
}, 500);
}
}
});
</script>
</body>
</html>
Vue.js系列(五):Vue的生命周期!分享完毕了!各位小伙伴快去试试吧!
最后
-
更多参考精彩博文请看这里:《陈永佳的博客》
-
喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!