vue 2.0的生命周期(钩子函数)

最新推荐文章于 2024-09-13 14:34:15 发布

@是静静啊

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量81

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_45272038/article/details/113920905

版权

文章目录

- vue常用的有8种生命周期函数：
- - 组件套用时的生命周期

首先大致看一下官网生命周期图
在这里插入图片描述

vue常用的有8种生命周期函数：

钩子函数	触发的行为	在此阶段可以做的事情
beforeCreadted	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。	加loading事件
created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.msg还未替换。	-
mounted	vue实例挂载完成，data.msg成功渲染	配合路由钩子使用
beforeUpdate	data更新时触发	-
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁时触发	-
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

测试代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        1. 数据
        2. 节点
     -->
    <div id="app">
      <h1>{{msg}}</h1>
      <button @click="handleClick">获取app节点</button>
      <button @click="msg='😀'">改变msg</button>
      <!-- 通过 $destory 组件销毁 -->
      <button @click="handleDestory">销毁组件</button>
    </div>
  </body>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: "#app",
      data: {
        msg: "(*^_^*)",
      },
      // 1. 组件创建之前的生命周期
      beforeCreate() {
        console.log("元素", this.$el);//元素 undefined
        console.log("数据:", this.$data);//数据: undefined
      },
      /* 2. 
        组件创建的时候
        a. 发请求拿数据
         */
      created() {
        console.log("created 元素", this.$el);//created 元素 undefined
        console.log("created 数据:", this.$data);//created 数据: Object
        //拿数据  fetch axios ajax jQuery 
      },
      /* 3. beforeMounte 组件挂载前 */
      beforeMount() {
        let appInnerHtml = document.getElementById("app").innerHTML;//
        console.log("beforeMount 元素", this.$el); // beforeMount 元素 <div id="app">…</div>
        console.log("beforeMount 数据:", this.$data);//beforeMount 数据: object
        console.log(appInnerHtml);//打印整个页面除app以外所有元素
      },
      /* 4. 
      mounted 组件挂载到 dom树上了 
      a. 请求数据
      b. 操作dom 节点
      */
      mounted() {
        let appInnerHtml = document.getElementById("app").innerHTML;
        console.log("mounted 元素", this.$el);//mounted 元素 <div id="app">…</div>
        console.log("mounted 数据:", this.$data);//mounted 数据: Object
        console.log(appInnerHtml);//打印整个页面除app以外所有元素
      },
      /* 5.组件更新之前 */
      beforeUpdate() {
          console.log(" beforeUpdate 组件更新之前");
      },
      /* 6.组件更新 */
      updated() {
          console.log("updated 组件更新");  
      },
      /* 组件销毁前 */
      beforeDestroy() {
          console.log("beforeDestroy 组件销毁前");
      },
      /* 组件销毁
        a. 取消无用的请求，定时器和订阅取消
       */
      destroyed() {
          console.log("destroyed 组件销毁");
      },
      methods: {
        handleClick: function () {
          console.log(this.$el);
          console.log(this.$data);
        },
        handleDestory:function(){
            this.$destroy();
        }
      },
    });
  </script>
</html>