2021-07-25 vue笔记-Vue的生命周期和钩子函数

原创已于 2022-10-16 17:00:48 修改 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端面试题 #生命周期 #js

于 2021-07-26 21:51:13 首次发布

vue学习笔记专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Vue.js的生命周期，包括创建、挂载、更新和销毁四个主要阶段，并解释了每个阶段对应的钩子函数的作用及其应用场景。

文章目录

1.Vue生命周期定义

Vue的生命周期是指:
Vue实例从创建到销毁的过程
Vue的生命周期包括:

生命周期函数又叫钩子函数

创建前后:

beforeCreate( 创建前 )

实例还没被创建出来，el和data都没有初始化，不能访问data、method，一般在这个阶段不进行操作

created( 创建后 )

vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真实dom还没生成，$el 还不可用。这个时候可以调用data和method的数据及方法，created钩子函数是最早可以调用data和method的，故一般在此对数据进行初始化。

挂载前后:

beforeMount( 挂载前)

此时模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom），一般可以在这里做初始数据的获取。

Mounted( 挂载后)

此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了

更新前后:

beforeUpdate

更新状态，重新渲染之前触发，
然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。
只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。

updated

数据已经更改完成，dom也重新render完成。

销毁前后

beforeDestroy

销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)

destroyed

销毁后（Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件。

在这里插入图片描述

2.Vue执行顺序

1.beforeCreate()
2.created()
3.beforeMounted()
4.mounted()
5.beforeDestroy()
6.destroyed()

3.vue内置方法的执行顺序

1.props
2.methods
3.data
4.computed
5.watch

4.示例

<div id="app">
    <h1>
        {{message}}
    </h1>
    <h1 id="hh">{{num}}</h1>
    <button @click='add'>点击+1</button>
    <button>点击跳转</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue22222!',
            num: 1995
        },
        methods: {
            fn1() {
                console.log('fn1')
            },
            add() {
                this.num++
            }
        },
        // 以下是VUE的生命周期  
        // 生命周期定义 在一个应用 创建到消亡阶段 在某一时刻 会自动调用的回调函数就叫做生命周期
        // 实例创建之前 内部  new操作符初始化
        beforeCreate() {
            console.log('创建之前beforeCreate ')
            console.log(this.message)
            // console.log(this.fn1())
        },
        // 实例创建之后 内部  new操作符初始化
        created() {
            // 向服务器请求 渲染出 城市天气预报 ajax
            // 用法 数据 方法都可以调用 最快发送AJAX的时刻  
            console.log('创建之前 Created 实例创建之后 ')
            console.log(this.message)
            console.log(this.fn1())

            // 这个时候 有问题的地方 
            var h = document.getElementById('hh')
            console.log('h', h)

            // 因为数据没有完全渲染的关系  如果进行dom操作 就有问题  
        },
        // dom渲染之前  
        beforeMount() {
            console.log('beforeMount')
            var h = document.getElementById('hh')
            console.log('h', h)
            console.log(this.message)
            console.log(this.fn1())
        },
        // dom渲染后
        mounted() {
            // 这个位置是最快可以DOM操作的位置  不会获取到假的节点！！！
            console.log(' Mounted')
            var h = document.getElementById('hh')
            console.log('h', h)
            console.log(this.message)
            console.log(this.fn1())
        },
        // 更新之前 数据和视图联系的数据 更新之前会自动调用
        beforeUpdate() {
            console.log('beforeUpdae')
            var h = document.getElementById('hh')
            console.log('h', h)
            console.log('h', h.innerHTML)
            console.log('this.num',this.num)

        },
        // 更新之后 数据和视图联系的数据 更新之后会自动调用
        updated() {
            console.log('updated')
            var h = document.getElementById('hh')
            console.log('h', h)
            console.log('h', h.innerHTML)
            console.log('this.num',this.num)
            // if(this.num >2000) {
            //     this.num =1999
            // }
        },
        // 销毁之前 
        beforeDestory() {
            console.log(' beforeDestory')
        },
        // 销毁之后
        destoryed(){
            console.log(' destoryed')
            // 跳完页面 上一个页面  没用变量  函数 需要 遍历做  a=null的处理  
        }
    })
    console.log(app)
</script>