女朋友生日，不要礼物，非要我给她讲解VUE的生命周期钩子函数，最后直夸我讲的详细又透彻！

业界资讯 2020-04-27 00:48:52 阅读次数: 0

VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。

注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期函数的执行顺序与书写的顺序无关

目录

注：加*代表相对更重要

*图示

在这里插入图片描述

1.beforeCreate

  • 该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前，实例初始化之后被调用。
  • 在该阶段组件未创建，不能访问数据，组件中的data，ref均为undefined。

2*.created

  • 该函数在组件创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。

  • 但是还未渲染成HTML模板，组件中的data对象已经存在，可以对data进行操作了，即可以访问数据，发请求，ref依旧是undefined，挂载阶段还没开始，$el 属性目前尚不可用。

  • 一般我们可以将对数据的初始化和初始化页面的请求放到里面，结束loading。

  • created实例：

  1. RAP2模拟一个后端接口（http://rap2.taobao.org:38080/app/mock/252122/test），使用created拿数据。
  2. RAP2操作界面如下
    在这里插入图片描述
  3. 代码：
<div id="box">
    <ul>
        <li v-for="item in list" :key="item.id">{{item.name}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            list:[]
        },
        created(){
            fetch('http://rap2.taobao.org:38080/app/mock/252122/test')
            .then(res=>res.json())
             .then((res)=>{
                if(res.code===200){
                    this.list = res.data.list;
                }
            })
        },
        beforeCreate(){
        },
    })
</script>
  1. 结果：
    在这里插入图片描述

3.beforeMount

  • 该函数在组件挂载之前，在该阶段页面上还没渲染出HTML元素，data初始化完成，ref依旧不可以操作，相关的 render 函数首次被调用。
  • 可以访问数据，编译模板结束，虚拟dom已经存在。
  • 该钩子在服务器端渲染期间不被调用。

4*.mounted

  • 该函数是页面完成挂载之后执行的，这时 el 被新创建的 vm.$el 替换了，就可以操作ref了，一般会用于将组件初始时请求数据的方法放到这里面，filter也是在这里生效。
  • 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
  • 可以拿到数据和节点，实例被挂载后调用。
  • 注意 ：mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}
  • 该钩子在服务器端渲染期间不被调用。
  • beforeMount与mounted实例①：
    （ref表示节点；this.$refs.ref的标识，就可拿到节点）
<div id="box">
    <div ref='demo'>demo</div>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            a:666
        },
        mounted(){
            console.log('mounted',this.a);
        },
        beforeMount(){
            console.log('beforeMount',this.a);
            console.log(this.$refs.demo);
        }
    })
</script>

结果：
在这里插入图片描述

  • beforeMount与mounted实例②：
<div id="box">
    <div ref='demo'>demo</div>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            a:666
        },
        mounted(){
            console.log('mounted',this.a);
            console.log(this.$refs.demo);
        },
        beforeMount(){
            console.log('beforeMount',this.a);
        }
    })
</script>

结果：
在这里插入图片描述

  • beforeMount与mounted实例③：
    （节点挂载后，文本框自动获取焦点）
<div id="box">
    <input type="text" ref='txt'>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            a:666,
        },
        mounted(){
            console.log('mounted',this.a);
            this.$refs.txt.focus();
        },
        beforeMount(){
            console.log('beforeMount',this.a);
        }
    })
</script>

结果：
在这里插入图片描述

以上两个实例，更加有力的说明：
beforeMount执行在真实的dom节点挂载之前，此时没有节点，所以拿不到节点。mounted执行时真实的dom节点已经挂载到页面上了，所以能拿到节点。

例：
beforeCreate、created、beforeMount、mounted执行顺序差别演示：
（因为 它们此时都是对象，所以它们代码的摆放位置是不影响结果的。）

<div id="box"></div>
<script>
    new Vue({
        el:"#box",
        data:{
            a:666,
        },
        created(){
            console.log("created",this.a);
        },
        beforeCreate(){
            console.log('beforeCreate',this.a);
        },
        mounted(){
            console.log('mounted',this.a);
        },
        beforeMount(){
            console.log('beforeMount',this.a);
        }
    })
</script>

结果：
在这里插入图片描述

5.beforeUpdate

  • 该函数在数据更新时调用，发生在虚拟 DOM 打补丁之前，在有特殊需求的情况下，可以将更新之前的数据存起来，放到后面去使用。

  • 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

  • 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6*.updated

  • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，在数据更新之后做一些处理，即监控数据的变化。

  • 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

  • 注意 ：updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}
  • 该钩子在服务器端渲染期间不被调用。

注意：
watch是监控特定数据的变化，而updated是监控组件里所有数据的变化。

例：
beforeUpdate与updated执行演示：

<body>
<div id="box">
    <input type="range" min="1" max="100" v-model="n" /> 
  <Com :n="n"></Com>
</div>
<script>
  var Com = {
    props:["n"],
    template: `<div>{{n}}</div>`,
    //这两个钩子会在数据更新时被调用
    beforeUpdate(){
        console.log("beforeUpdate")
    },
    updated(){
        console.log("updated")
    }
  };
  new Vue({
    el: '#box',
    components: {
      Com,
    },
    data:{
        n:1
    }
  });
</script>

结果：
在这里插入图片描述

7.beforeDestroy

  • 该函数在实例销毁之前调用，这里的ref依旧可以操作，实例仍然完全可用，可以在这里做清除定时器的操作，防止内存泄漏。
  • 该钩子在服务器端渲染期间不被调用。

8*.destroyed

  • 该函数在组件销毁的时候执行，即实例销毁后调用，这里的ref不存在。

  • 该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁`。

  • 该钩子在服务器端渲染期间不被调用。

例：
beforeDestroy与destroyed执行演示：
（this.$destroy()可以销毁组件）

<div id="box">
  <Com></Com>
</div>
<script>
  var Com = {
    template: `<div> 
                  <button @click="kill">kill</button>
                </div>`,
    mounted() {
      this.timer = setInterval(()=>{
          console.log("hello");
      },1000)
    },
    beforeDestroy(){
        clearInterval(this.timer);
        console.log("beforeDestory")
    },
    destroyed(){
        console.log("destoryed")
    },
    methods:{
        kill(){  //销毁组件
            this.$destroy()
        }
    }
  };
  new Vue({
    el: '#box',
    components: {
      Com,
    },
  });
</script>

结果：
在这里插入图片描述

注：组件进行销毁的时候,是先销毁的是父组件,然后销毁子组件

9.activated

被 keep-alive缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

10.deactivated

被 keep-alive缓存的组件停用时调用。

该钩子在服务器端渲染期间不被调用。

例：

activated与deactivated执行演示：

<div id="box">
    <keep-alive>
        <component :is="cName"></component>
    </keep-alive>
        <button @click="cName='One'">change1</button>
        <button @click="cName='Two'">change2</button>
</div>
<script>
    var One ={
        template:`<div>one component</div>`,
        activated(){
            console.log("activated");
        },
        deactivated(){
            console.log("deactivated");
        }
    }
    var Two ={
        template:`<div>two component</div>`,
    }
    new Vue({
        el:"#box",
        components:{
            One,Two
        },
        data:{
            cName:'One'  //存组件的名字
        }
    })
</script>

结果：
在这里插入图片描述

11.errorCaptured

类型：(err: Error, vm: Component, info: string) => ?boolean

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

我们可以在此钩子中修改组件的状态。因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。

  • 默认情况下，如果全局的 config.errorHandler被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。

  • 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。

  • 如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。

  • 一个 errorCaptured 钩子能够返回 false以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured钩子和全局的 config.errorHandler。

如有纰漏，欢迎各路大佬不吝赐教，感激不尽！

huangfuyk
发布了103 篇原创文章 · 获赞 1683 · 访问量 30万+
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_42881768/article/details/105747563
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022