生命周期函数

新星_
192 阅读4分钟

什么是生命周期函数

生命周期函数也称为钩子函数，Vue组件对象在创建到销毁的过程中，在某一种条件成立的时刻，系统会调用的Vue中设定的函数。

组件中的8个生命周期函数

当前Vue组件在创建到销毁的过程中会调用的函数：beforeCreate() {}、created() {}、beforeMount() {}、mounted() {}、beforeUpdate() {}、 updated() {}、 beforeDestroy() {}、destroyed() {}

    <div id="app">

    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"hello"
            },
            methods: {
                fn(){}
            },
            beforeCreate() {
                console.log("beforeCreate",this.msg,this.fn,111)
            },
            created() {
                console.log("created",this.msg,this.fn);
            },
            beforeMount() {
                console.log("beforeMount")
            },
            mounted() {
                console.log("motuned");
            },
            beforeUpdate() {
                console.log("beforeUpdate")
            },
            updated() {
                console.log("Update")
            },
            beforeDestroy() {
             console.log("beforeDestroy",this.msg)
            },
            destroyed() {

            },
        });
    </script>

beforeCreate() {}

该函数运行是在当前Vue实例创建完成前不是在创建前，这个函数运行时表示当前Vue实例正在创建中比如劫持data和methods等，也就是此时this对象中还不能访问到数据，该函数中也不能操作this对象。

  • 问题1：能否进行网络请求
    • 能做网路请求，因为这是函数在运行时所以XMLHttpRequest对象是可以访问然后做AJAX请求
  • 问题2：能否网络请求数据然后设置到数据源中
    • 不能设置到数据源中，因为this对象当前的Vue实例还在创建中
  • 问题3：这个钩子函数在项目中干什么
    • 只要不是运用到网页页面渲染的网络请求比如预加载工具，预加载图片，第三方工具的预加载

预加载：利用网页中同源加载的优化（同源加载优化是同一个页面中同样的img，第三方脚本等src属性请求资源时只会请求第一次）

created() {}

该函数运行是在当前Vue实例创建完毕后，但是还没有将当前Vue实例挂载到DOM树中，该函数可以操作this对象但是还不能操作DOM

  • 问题1：能否进行网络请求
    • 能做网路请求，因为这是函数在运行时所以XMLHttpRequest对象是可以访问然后做AJAX请求
  • 问题2：能否网络请求数据然后设置到数据源中
    • 能设置到数据源中，因为this对象当前的Vue实例已经创建完毕
  • 问题3：这个钩子函数在项目中干什么
    • 请求首页的数据，此时页面并没有全部加载完成，同时做网络请求数据。

beforeMount() {}

该函数运行是在当前Vue实例创建完毕后挂载到DOM树中之前，表示当前Vue实例正在挂载到DOM树中，该函数可以操作this对象但是不能操作DOM。

  • 这个钩子函数在项目中干什么
    • 用于渲染前的操作，该函数可以操作this对象但是不能操作DOM

mounted() {}

该函数运行是在当前Vue实例已经挂载到页面了，该函数可以操作this对象可以操作DOM，类似于window.onload。

  • 这个钩子函数在项目中干什么
    • 用于请求首页数据，页面已经全部加载出来了，用户可以看到整个页面的结构再做网络请求数据。

beforeUpdate() {}

该函数运行是在数据源已经更新了，页面重新渲染前并不是数据更新前，页面首次渲染不会触发

updated() {}

该函数运行是在页面已经重新渲染了

beforeUpdate和Update这两个函数中不能网络请求新数据去更新数据源，会导致进入死循环因为数据源发生改变就会刷新页面，但是如果请求的数据是和之前一样的就不会刷新页面

beforeDestroy() {}

该函数运行是在当前Vue实例销毁之前

  • 这个钩子函数在项目中干什么
    • this对象还在可以做最后的操作，可以保存用户的行为配置文件比如播放器的进度等

destroyed() {}

该函数运行是在当前Vue实例销毁完毕，表示当前Vue实例不能再操作页面，当前Vue实例已经不再关联页面的元素，但是页面上的静态模板不会销毁。在该函数中无法操作this组件对象已被销毁，但是可以操作浏览器的window对象，页面上的静态模板并没有销毁。

  • 这个钩子函数在项目中干什么
    • 可以把当前组件中计时器清除了，可以把body的滚动条滚动到顶部等操作window对象的一些功能

销毁VM对象的方法：第1个关闭浏览器，第2个官方提供的方法this.$destroy()，第3个

一些注意点

this.$el 是当前组件的真实DOM，它在要在mounted之后才能访问

Vue 实例的 data 属性，在created，beforeMount， mounted ，beforeUpdate ，updated ，beforeDestroy中能访问

页面首次加载过程中，会依次触发beforeCreate，created，beforeMount，mounted钩子函数

avatar
文章
阅读
粉丝