不来看看这些 VUE 的生命周期钩子函数? | 原力计划

Posted CSDN

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不来看看这些 VUE 的生命周期钩子函数? | 原力计划相关的知识,希望对你有一定的参考价值。

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
作者 | huangfuyk
责编 | 王晓曼
出品 | CSDN 博客
VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块。
注:在组件的整个生命周期内,钩子函数都是可被自动调用的,且生命周期函数的执行顺序与书写的顺序无关。
图示:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
BeforeCreate

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

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
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操作界面如下:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划
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>

4、结果
不来看看这些 VUE 的生命周期钩子函数? | 原力计划

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
BeforeMount

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

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
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
  })
}
该钩子在服务器端渲染期间不被调用。
1、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>
结果:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划
2、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>
结果:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划
3、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>
结果:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划
以上两个实例,更加有力的说明:
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>
结果:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
BeforeUpdate

该函数在数据更新时调用,发生在虚拟 DOM 打补丁之前,在有特殊需求的情况下,可以将更新之前的数据存起来,放到后面去使用。
这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
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>
结果:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
BeforeDestroy

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

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
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>
结果:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划
注:组件进行销毁的时候,是先销毁的是父组件,然后销毁子组件。

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
Activated

被 keep-alive 缓存的组件激活时调用。
该钩子在服务器端渲染期间不被调用。

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
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>
结果:
不来看看这些 VUE 的生命周期钩子函数? | 原力计划

不来看看这些 VUE 的生命周期钩子函数? | 原力计划
ErrorCaptured

类型:(err: Error, vm: Component, info: string) => ?boolean。
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
我们可以在此钩子中修改组件的状态。因此在捕获错误时,在模板或渲染函数中有一个条件判断来绕过其它内容就很重要;不然该组件可能会进入一个无限的渲染循环。
  • 默认情况下,如果全局的 config.errorHandler 被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。
  • 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子,则它们将会被相同的错误逐个唤起。
  • 如果此 errorCaptured 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。
  • 一个 errorCaptured 钩子能够返回 false以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured钩子和全局的 config.errorHandler。
版权声明:本文为CSDN博主「huangfuyk」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42881768/article/details/105747563
 
   
   
 
【END】

不来看看这些 VUE 的生命周期钩子函数? | 原力计划

更多精彩推荐

点击阅读原文,精彩继续。

你点的每个“在看”,我都认真当成了喜欢

以上是关于不来看看这些 VUE 的生命周期钩子函数? | 原力计划的主要内容,如果未能解决你的问题,请参考以下文章

Vue3的生命周期

Vue笔记(Vue生命周期 11个钩子)

如何理解 Vue 中的生命周期

如何理解 Vue 中的生命周期

vue生命周期钩子函数如何第二次打开不请求接口

Vue2的生命周期