Vue框架学习04

• 一、Vue的生命周期
• • 1、钩子函数
  • 2、实例创建
  • 3、页面挂载
  • 4、数据更新
  • 5、实例销毁

一、Vue的生命周期

1、钩子函数

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

2、实例创建

下面的代码将展示beforeCreate和created钩子函数的使用：

<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存在，就会进行页面挂载。下面的代码将展示beforeMount和mounted钩子函数的使用：

<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 实例挂载完成后，当数据发生变化时，会执行beforeUpdate和updated钩子函数。下面的代码将展示beforeUpdate和updated钩子函数的使用：

<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、实例销毁

生命周期的最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数。

<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实例在beforeDestroy和destroyed函数执行时都存在，但是实例销毁之后获取不到页面的div元素。因此，实例销毁以后无法操作 DOM 元素。