1.概念

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
那么Vue为什么会提出生命周期的概念，或者说我们为什么要使用生命周期呢？
我们都知道Vue是由指令和组件系统构成，而我们要想使用组件，那么就得在组件的特定阶段完成特点的任务，而组件的生命周期分为三个阶段： 初始化、运行中、销毁 ，我们可以在生命周期对应的阶段，达成我们的需求。在这过程中会运行一些生命周期的钩子，所谓的钩子，其实就是一些函数，只不过这些函数，是在特定时间触发的方法。

2.生命周期图示

在这里插入图片描述

3.生命周期钩子函数

根据上面一个完整的生命周期过程，我们可以得知在生命周期的三个过程：初始化、运行中、销毁中共有八个钩子函数，如下。
● beforeCreate( ) { }
● created( ) { }
● beforeMount( ) { }
●mounted( ) { }
● beforeUpdate( ) { }
● updated( ) { }
● beforeDestroy( ) { }
● destroyed( ) { }
注意：
生命周期钩子的 this 上下文指向调用它的 Vue 实例。
生命周期钩子函数不允许写成箭头函数，因为箭头函数并没有 this，this会作为变量一直向上级词法作用域查找，直至找到为止，这与生命周期钩子的 this 的指向不同。

4.钩子函数使用及分析
根据生命周期过程可以将这些钩子函数进行如下划分。
初始化：
● beforeCreate( ) { }----组件即将创建
代码演示：

<body>
    <div id="app">
        <h3>{{msg}}</h3>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'Hello World!'
        },
        beforeCreate(){
            console.log('--beforeCreate--');
            console.log('data',this.msg),
            console.log('DOM',document.querySelector('h3'))
            fetch('./data/data.json')//此处的json数据为{ "ret":true,"content":"你好 世界！"}
                .then(res=>res.json())
                .then(data=>{
                    this.msg=data.content
                })
                .catch(error=>console.log(error))
        }
    })
</script>

运行结果：
在这里插入图片描述
【总结】
任务：
初始化事件，并且为整个生命周期的开始做准备
意义：
数据未获取，真实dom未获取（此处的数据指的是new Vue()中的数据）
可以实现数据请求并且可以进行数据修改

● created( ) { }----组件创建结束
代码演示：

<body>
    <div id="app">
        <h3>{{msg}}</h3>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'Hello World!'
        },
        created(){
            console.log('--created--');
            console.log('data',this.msg),
            console.log('DOM',document.querySelector('h3'))
            fetch('./data/data.json')//此处的json数据为{ "ret":true,"content":"你好 世界！"}
                .then(res=>res.json())
                .then(data=>{
                    this.msg=data.content
                })
                .catch(error=>console.log(error))
        }
    })
</script>

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

【总结】
任务： 进行数据的注入和数据的反应
意义：
数据可获取，真实dom没有拿到（此处的数据指的是new Vue()中的数据）
可以实现数据请求并且可以进行数据修改

● beforeMount( ) { }----组件即将挂载
代码演示：

<body>
    <div id="app">
        <h3>{{msg}}</h3>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'Hello World!'
        },
    beforeMount(){
            console.log('--beforeMount--');
            console.log('data',this.msg),
            console.log('DOM',document.querySelector('h3'))
            fetch('./data/data.json')//此处的json数据为{ "ret":true,"content":"你好 世界！"}
                .then(res=>res.json())
                .then(data=>{
                    this.msg=data.content
                })
                .catch(error=>console.log(error))
        }
    })
</script>

运行结果：
在这里插入图片描述
【总结】
任务：
判断组件是否有el/template选项，如果有那么使用render函数将template模板中的jsx转换成VDOM对象模型，如果没有，需要我们使用$mount/outerHTML手动挂载
意义：
更多的是内部完成任务，外部不进行干预；
数据可获取，真实dom没有拿到（此处的数据指的是new Vue()中的数据）；
可以实现数据请求并且可以进行数据修改；

●mounted( ) { }----组件挂载结束
代码演示：

<body>
    <div id="app">
        <h3>{{msg}}</h3>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'Hello World!'
        },
    mounted(){
            console.log('--mount--');
            console.log('data',this.msg),
            console.log('DOM',document.querySelector('h3'))
          document.querySelector('h3').style.background='yellow'
            fetch('./data/data.json')
                .then(res=>res.json())
                .then(data=>{
                    this.msg=data.content
                })
                .catch(error=>console.log(error))
        }
    })
</script>

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

【总结】
任务： 将vdom渲染为真实dom，然后挂载到页面中，此时我们在页面中可以看到内容
意义：
可以操作操作真实dom 【 可以进行第三方库实例化 】
可以实现数据请求并且可以进行数据修改；
【注意】
我们常将数据请求写在 created 中，因为created钩子是第一次获得数据的地方
mounted钩子函数可以进行DOM操作【 第三方库实例化【静态数据】 】

运行中：
● beforeUpdate( ) { }----组件更新前
代码演示：

<body>
    <div id="app">
        <button @click="click">点击</button>
        <h3 v-if="flag">Hello World!</h3>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{
            click(){
                this.flag=!this.flag
            }
        },
        beforeUpdate(){
            console.log('--beforeUpdate--')
            console.log('data',this.flag)
            console.log('DOM',document.querySelector('#app'))
        }
    })
</script>

运行结果：
在这里插入图片描述
【总结】
触发条件： 组件的数据发生改变
任务： VDOM重新生成，然后通过diff算法和以前的VDOM比对，生成patch补丁对象 【 内部进行 】
意义： 数据可获取，真实dom也可获取（此处的数据指的是new Vue()中的数据）；

● updated( ) { }----组件更新结束
代码演示：

    <body>
        <div id="app">
            <button @click="click">点击</button>
            <h3 v-if="flag">Hello World!</h3>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
                click(){
                    this.flag=!this.flag
                }
            },
            updated(){
                console.log('--updated--')
                console.log('data',this.flag)
                console.log('DOM',document.querySelector('#app'))
            }
        })
    </script>

运行结果：
在这里插入图片描述
【总结】
触发条件： 组件的数据发生改变
任务： 将patch补丁对象进行渲染生成真实dom
意义：可以操作DOM 【 第三方库的实例化【 动态数据 】 】
【注意】：平时大家使用updated进行第三方库实例化

销毁：用来完成善后工作
组件的销毁会触发两个钩子函数 【 这两个钩子函数基本没区别， 任意选择一个使用 】
● beforeDestroy( ) { }
● destroyed( ) { }
组件的销毁有两种形式
（1）内部销毁（$destroy）----组件会被销毁掉，但是组件的DOM外壳还在
$destroy只是完全销毁一个Vue实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。它并不是用来清除已有页面上的DOM的。

<body>
    <div id="app">
        <button @click="flag=!flag">点击</button>
        <h3 v-if="flag">Hello World!</h3>
        <button @click="remove">销毁</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{
            remove(){
                this.$destroy()//
            }
        }
    })
</script>

（2） 外部销毁----通过开关销毁 【 推荐 】
即销毁Vue组件，也销毁DOM元素

<body>
    <div id="app">
        <button @click="flag=!flag">点击</button>
        <h3 v-if="flag">Hello World!</h3>
        <button @click="remove1">销毁</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{
            remove(){
                console.log(this)
                this.$destroy()
            }
        },
        destroyed(){
            console.log('--destroyed--')
            document.querySelector('#app').remove()//此处的remove是原生js中的方法，用来删除节点
        }
    })
</script>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue