Vue 3 - Vue 生命周期

2022-05-10 | 0 浏览

Vue的生命周期

在Vue中，Vue的生命周期是指，Vue实例从开始创建，初始化数据，编译模板，挂在dom->渲染，更新->渲染，卸载等一系列过程.

钩子函数

1, beforeCreate钩子函数

# 在实例初始化之后，this指向创建的实例，不能访问到data,computed,watch，methods上的方法和数据
beforeCreate() {
	console.log('创建前-el', this.$el)
	console.log('创建前-data', this.$data)
},

# 打印结果：
创建前-el undefined
创建前-data undefined

# 挂在数据（属性赋值），包括属性和computed的运算.在beforeCreated和created两个钩子函数之间发生
beforeCreated: {},
computed: {},
created: {},

2, created函数

# 实例创建完成，在created钩子函数这个时期，我们能够访问到data,computed,methods上的方法和数据，但是，这会还没有挂在dom。不能访问到$el，$ref属性内容未空数组
created() {
	console.log('创建时--el', this.$el) # undefined
	console.log('创建时--data', this.message) # 123
	console.log('创建时-computed', this.a)
	console.log('创建时--methods', this.onClick())
}
# 返回结果
创建时--el      undefined
创建时--data    123
创建时-computed 计算属性
创建时--methods 点击事件

3, beforeMount钩子函数

# 在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数。
此时，this.$el上有值，但是数据还没挂载到页面上，即此时页面中的{{}}还没有被替换掉。
beforeMount() {
	console.log('挂在之前调用', this.$el) # undefined
},

4, mounted钩子函数

# 实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问。
mounted () {
	console.log('挂在dom节点', this.$el)
},
# 返回结果
<div>...</div>

5, beforeupdate钩子函数

# 组件更新之前执行,数据更新了，但是，vue（组件）对象内部（innerHTML）没有变
beforeUpdate() {
	console.log('组件更新前--数据', this.message)
	console.log('组件更新前--dom', this.$el.innerHTML)
},

# 实战场景：适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

6, updated钩子函数

# 虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作
updated() {
	console.log('组件更新时--数据', this.message)
	console.log('组件更新时--dom', this.$el.innerHTML)
}

7, beforeDestroy钩子函数

# 实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例
beforeDestroy() {
	console.log('实例销毁前', this.$el)
},

8, destory钩子函数

# 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

9, 总括介绍

<script>
export default {
  // 数据对象
  data() {
    return {
      msg: "你好世界！！",
      arr: [1, 2, 3],
      timer: "",
    };
  },
  // new Vue()之后执行 vue内部给实例添加了一些属性和方法
  // data和methods之前执行
  beforeCreate() {
    console.log("beforeCreate函数执行了");
    // 此时获取不到data中的变量值
    console.log(this.msg);
  },

  methods: {
    add() {
      this.arr.push(Math.floor(Math.random() * 10));
    },
  },
  // data和methods之后执行
  created() {
    console.log("create函数执行了");
    // 此时可以获取到data中的变量值
    console.log(this.msg);

    this.timer = setInterval(() => {
      console.log("哈哈哈哈！");
    }, 1000);
  },

  /**
   * 2、挂载
   */
  //真实DOM挂载之前
  // 使用场景：预处理data，不会触发update钩子函数
  beforeMount() {
    console.log("beforeMount函数执行了----此时获取不到真实DOM");
    console.log(document.getElementById("myMsg"));

    // 重新改变data中的值
    this.msg = "hello,world";
  },

  //真实DOM挂载之后
  // 此处可以获取到真实的DOM
  mounted() {
    console.log("beforeMount函数执行了----此时可以获取到真实DOM");
    console.log(document.getElementById("myMsg"));
  },

  /**
   * 3、更新
   */
  //更新之前
  beforeUpdate() {
    console.log("beforeUpdate函数执行了-----此时获取不到更新的真实DOM");
    console.log(document.querySelectorAll("#myArr>li"));
  },

  // 更新之后
  // 场景：获取更新真实DOM之后
  updated() {
    console.log("update函数执行了-----此时可以获取到更新的真实DOM");
    console.log(document.querySelectorAll("#myArr>li"));
  },

  /**
   * 4、销毁
   */
  beforeDestroy() {
    console.log("beforeDestroy函数执行了");
    clearInterval(this.timer)
  },

  destroyed() {
    console.log("destroyed函数执行了");
  },
};
</script>

前端