Vue生命周期（简单、好理解）-EW帮帮网

生命周期函数又叫钩子函数，钩子函数到了某一个时间点会自动触发

这个过程是从vue实例创建到实例销毁的过程中到了一定的时间节点就会触发

我们先来看张图能更清楚是怎么执行下去的

首先我们说说创建阶段：

创建阶段有四个钩子函数，分别是：befortCreate，craeted，beforeMount，mounted

beforeCreare：实例创建之前，这个时候什么都没有 data methods 都不能用也没有 this
created ：创建之后也是最早的可以使用 data 和 methods 的钩子函数这个时候有 this 了
beforeMount：组件挂载之前
mounted：组件挂载之后这个时候能拿到 dom 节点使用

运行阶段

运行阶段只要修改 data 就会触发

运行阶段有两个个钩子函数

beforeUpdate ：数据变了视图还没变
updated：数据变了视图也变了

销毁阶段

beforeDestory：组件销毁之前是最后一个能使用 data 和 methods 的钩子函数
destoryed：组件销毁之后

除了这八个之外还有三个

errorCaptured ：子组件出错的时候会触发这个钩子函数

还有就是如果用 keep-alive 缓存了组件就会有 actived deactived 这两个钩子函数

activated 组件激活
deactivated 组件停用

上边就是生命周期的基本介绍

接下来就说说用的时候有哪些需要注意的呢？以及应用场景

页面第一次加载时父子组件的生命周期执行的顺序是怎么样的呢？

页面—beforeCreate
页面—created
页面—beforeMount
页面—mounted
组件—beforeCreate
组件—created
组件—beforeMount
组件—mounted

项目开发中在生命周期里都做过什么功能？

我在写效果的过程中会在 created 或者 mounted 中发送 http 请求
还会用 created 钩子函数获取本地存储的数据
mounted 的特点是可以操作 dom 节点

注意事项

1.created 和 mounted 的区别？

就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求

2.想要在created里获取最新dom怎么获取？

这个时候我们可以使用nextTick

nextTick就是在 dom 更新之后执行的延迟回调

放在nextTick中的代码可以在dom更新之后再执行，这样就能在created里获取最新dom了

接下来写个案例来看看

<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

来看看执行结果

从上面我们可以看出几点，

首次，只执行了4个生命周期，beforeCreate，created, beforeMount, mounted
同时，我们可以看出，第一个生命周期中，我们拿不到data中的数据，因为这个时候数据还未初始化
created中，我们可以拿到data中的message数据了，因为初始化已经完成
beforeMount中，我们可以看出，我们拿到了$el，而mounted中，我们也拿到了$el，不过好像有点不一样是吧。一个好像是渲染前的，一个是渲染后的。对的。看过MVVM响应式原来或者Vue源码你们就会发现，最初其实我们是会去让this.$el = new Vue时传入的那个el的dom。所以在beforMount中，其实我们拿到的就是页面中的#app。而再继续往后，首先我们是不是没有找到render函数啊，也没有找到template啊，所以他会怎么做啊，是不是会把我们的这个el（#app）编译成template模板啊，再转换为render函数，最后将render函数渲染成为真实dom，渲染成真实dom后，我们是不是会用这个渲染出来的dom去替换原来的vm.$el啊这也就是我们前面所说到的替换$el是什么意思了
所以，在mounted中，我们所得到的渲染完成后的$el

本文含有隐藏内容，请开通VIP 后查看

Vue生命周期（简单、好理解）

网站公告

今日签到

热门文章

最新发布

Vue生命周期 （简单、好理解）

网站公告

今日签到

热门文章

最新发布

Vue生命周期（简单、好理解）