0
点赞
收藏
分享

微信扫一扫

Vue框架学习(四)

GhostInMatrix 2022-01-13 阅读 87

Vue框架学习04


一、Vue的生命周期

1、钩子函数

钩子函数用于描述 Vue实例从创建到销毁的整个生命周期,具体如下表所示:

钩子说明
beforeCreate创建实例对象之前执行
created创建实例对象之后执行
beforeMount页面挂载成功之前执行
mounted页面挂载成功之后执行
beforeUpdate组件更新之前执行
updated组件更新之后执行
beforeDestroy实例销毁之前执行
destroyed实例销毁之后执行

2、实例创建

下面的代码将展示beforeCreatecreated钩子函数的使用:

<div id="app">{{msg}}</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: { msg: '张三' },
      beforeCreate () {
        console.log('实例创建之前')
        console.log(this.$data.msg)
      },
      created () {
        console.log('实例创建之后')
        console.log(this.$data.msg)
      }
    })
</script>
// 运行结果:
// “实例创建之前”
// error: Cannot read property 'msg' ...
// “实例创建之后”
// “张三”

上述代码中,beforeCreate钩子函数输出msg时出错,这是因为此时数据还没有被监听,同时页面没有挂载对象。而created钩子函数执行时,数据已经绑定到了对象实例,但是还没有挂载对象

3、页面挂载

Vue 实例创建后,如果挂载点el存在,就会进行页面挂载。下面的代码将展示beforeMountmounted钩子函数的使用:

<div id="app">{{msg}}</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: { msg: '张三' },
      beforeMount () {
        console.log('挂载之前')
        console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素
      },
      mounted () {
        console.log('挂载之后')
        console.log(this.$el.innerHTML)
      }
    })
</script>
// 运行结果
// “挂载之前”
// {{msg}}
// “挂载之后”
// “张三”

上述代码中,在挂载之前,由于数据并没有被关联到$el对象上,所以页面无法展示页面数据;在挂载之后,获得了msg数据,并通过插值语法展示到页面中。

4、数据更新

Vue 实例挂载完成后,当数据发生变化时,会执行beforeUpdateupdated钩子函数。下面的代码将展示beforeUpdateupdated钩子函数的使用:

<div id="app">
	<div v-if="isShow" ref="self">test</div>
	<button @click="isShow=!isShow">更新</button>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			isShow: false
		},
		beforeUpdate() {
			console.log('更新之前')
			console.log(this.$refs.self)
		},
		updated() {
			console.log('更新之后')
			console.log(this.$refs.self)
		}
	})
</script>
// 第一次点击‘更新’按钮:
// 更新之前
// undefined
// 更新之后
// <div>test</div>

// 第二次点击‘更新’按钮:
// 更新之前
// <div>test</div>
// 更新之后
// undefined

上述代码中,ref用来给元素注册引用信息,设为self表示引用自身

5、实例销毁

生命周期的最后阶段实例的销毁,会执行beforeDestroydestroyed钩子函数。

<div id="app">
	<div ref="self">test</div>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: '张三'
		},
		beforeDestroy() {
			console.log('销毁之前')
			console.log(this.$refs.self)
			console.log(this.msg)
			console.log(vm)
		},
		destroyed() {
			console.log('销毁之后')
			console.log(this.$refs.self)
			console.log(this.msg)
			console.log(vm)
		}
	})
</script>
// 在控制台中执行vm.$destroy()函数

// 运行结果:
// 销毁之前
// <div>test</div>
// 张三
// Vue{......}

// 销毁之后
// undefined
// 张三
// Vue{......}

从运行结果可以看出,vm实例在beforeDestroydestroyed函数执行时都存在,但是实例销毁之后获取不到页面的div元素。因此,实例销毁以后无法操作 DOM 元素。
 


参考资料: 1、《Vue.js 前端开发实战》,黑马程序员.
举报

相关推荐

0 条评论