初学Vue,对几个钩子函数还是比较模糊,有时候想在钩子函数中做一些事情,但什么时候做,在那个函数中做,还不是很清楚。
于是,开始探索:
生命周期函数:
<body>
<div id="app">
<h3 id="h3">{{msg}}</h3>
<input type="button" value="修改msg" @click="msg='No'">
</div>
<script>
var vm = new Vue({
el:'#app',
data(){
return {msg:'ok'},
},
methods:{
show(){
console.log('执行了show方法')
}
},
**一、组件创建期间的4个钩子函数**
1、beforeCreate:表示实例完全被创建之前,会执行这个函数
在beforeCreate生命周期函数执行的时候,data 和 methods 中的数据还没有被初始化,this也不能用
beforeCreate() {
console.log(this.msg) //undefind
this.show() //is not defind
},
2、created: 实例创建完成
在 created 中,已完成数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化!
如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作。但此时还不能操作DOM
created() {
console.log(this.msg) //ok
this.show() //执行了show方法
},
3、beforeMount:表示模板已经在内存中编译完成,但是尚未把模板渲染到页面中
在beforeMount执行的时候,页面中的元素没有被真正替换过来,只是之前写的一些模板字符串
beforeMount() {
console.log(document.getElementById('h3').innerText) //{{msg}}
},
4、mounted:表示内存中的模板已经真实的挂载到页面中,用户已经可以看到渲染好的页面,并且可以操作DOM
当执行完 mounted 就表示,实例已经被完全创建好了,mounted在整个生命周期中只执行一次
mounted() {
console.log(document.getElementById('h3').innerText) //ok
},
**二、组件运行阶段的2个钩子函数**
5、beforeUpdate:表示 界面还没有被更新,但是数据肯定被更新了
得出结论:当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时data 数据是
最新的,页面尚未和 最新的数据保持同步
beforeUpdate() {
console.log('界面上元素的内容'+ document.getElementById('h3').innerText) //没有执行,因为数据没改变
console.log('data 中的msg数据是:' + this.msg)
},
6、updated:页面和 data 数据已经保持同步了,都是最新的
updated() {
console.log('界面上元素的内容'+ document.getElementById('h3').innerText) //No
console.log('data 中的msg数据是:' + this.msg) //No
},
**三、组件删除阶段**
7、beforeDestroy:表示实例销毁前,此时 实例上所有data和methods,以及过滤器、指令....都
处于可用状态,此时,还没有真正执行销毁的过程。
8、destroyed:当执行到destroyed函数的时候,组件已经被完全销毁了,此时 组件中所有的数据、方法、指令、过滤器...都已经不可用了。
})
</script>
</body>
其他钩子函数:
<body>
<div id="app">
{{fullName}}
</div>
</body>
<script>
var var vm = new Vue({
el: '#app',
data() {
return {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar',
num: 2
}
},
watch: {
//监听数据必须是data中声明过或者父组件传递过来的props中的数据,且只能监听字符串,对字典或数组对象无效
firstName: function (val, oldval) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
},
computed: {
//计算属性顾名思义就是通过其他变量计算得来的另一个属性,fullName在它所依赖firstName,lastName这两个变量变化时重新计算自己的值。
//计算属性具有缓存,只有当所依赖的数据发生改变时,才会重新计算
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
methods: {
add:function(num){
this.num += num
}
}
})
</script>