vue生命周期

时间 2020-07-10

标签 vue 生命周期繁體版

原文原文链接

1、vue生命周期的8个阶段css

生命周期钩子	组件状态	最佳实践
beforeCreate	实例初始化以后，this指向建立的实例，不能访问到data、computed、watch、methods上的方法和数据	经常使用于初始化非响应式变量
created	实例建立完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组	经常使用于简单的ajax请求，页面的初始化
beforeMount	在挂载开始以前被调用，beforeMount以前，会找到对应的template，并编译成render函数	-
mounted	实例挂载到DOM上，此时能够经过DOM API获取到DOM节点，$ref属性能够访问	经常使用于获取VNode信息和操做，ajax请求
beforeupdate	响应式数据更新时调用，发生在虚拟DOM打补丁以前	适合在更新以前访问现有的DOM，好比手动移除已添加的事件监听器
updated	虚拟 DOM 从新渲染和打补丁以后调用，组件DOM已经更新，可执行依赖于DOM的操做	避免在这个钩子函数中操做数据，可能陷入死循环
beforeDestroy	实例销毁以前调用。这一步，实例仍然彻底可用，this仍能获取到实例	经常使用于销毁定时器、解绑全局事件、销毁插件对象等操做
destroyed	实例销毁后调用，调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁	-

beforeCreate：html

在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其余的东西都还没建立。在beforeCreate生命周期执行的时候，data和methods中的数据都尚未初始化。不能在这个阶段使用data中的数据和methods中的方法
created：vue

data 和 methods都已经被初始化好了，若是要调用 methods 中的方法，或者操做（计算、转换） data 中的数据，最先能够在这个阶段中操做ajax

//在created以后，beforeMount以前，就要判断是否有el选项，若是有el选项就判断是否有template选项，若是有，开始将data中的数据和vue中的模本编译成HTML文档数组

beforeMount：app

执行到这个钩子的时候，在内存中已经编译好了模板了，可是尚未挂载到页面中，此时，页面仍是旧的
mounted：dom

执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了建立阶段，进入到了运行阶段。若是咱们想要经过插件操做页面上的DOM节点，最先能够在这个阶段中进行函数

注意，该函数在vue的生命周期中只会执行一次，若是页面中数据变化，会执行update函数来更新数据
beforeUpdate： 学习

当执行这个钩子时，页面中的显示的数据仍是旧的，data中的数据是更新后的，页面尚未和最新的数据保持同步
updated：ui

页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：

Vue实例从运行阶段进入到了销毁阶段，这个时候上全部的 data 和 methods ，指令，过滤器 ……都是处于可用状态。尚未真正被销毁
destroyed：

这个时候上全部的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。

2、生命周期函数

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue生命周期学习</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <input v-model="message"></input>
            <h1>{{message1}}</h1>
        </div>
    </body>
    <script>
        var vm = new Vue({/*建立vue对象*/ el: '#app',/****挂载目标****/ data: {/****数据对象****/ message: 'Hello World!' }, computed:{/****实现某一属性的实时计算****/ message1:function(){ return this.message.split("").reverse().join(""); } }, watched:{/****检测某一属性值的变化****/ }, methods:{/****组件内部的方法****/ },  beforeCreate: function() { console.group('------beforeCreate建立前状态------'); console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
                console.log("%c%s", "color:red", "message: " + this.message)//undefined
 }, /** * 1.在beforeCreate和created钩子之间，程序开始监控Data对象数据的变化及vue内部的初始化事件 * * */ created: function() { console.group('------created建立完毕状态------'); console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
 }, /** * 2.在created和beforeMount之间，判断是否有el选项，如有则继续编译，无，则暂停生命周期； * 若是有el选项，程序会判断是否有templete参数选项，如有，则将其做为模板编译成render函数。若无，则将外部html做为模板编译（template优先级比外部html高 * */ beforeMount: function() { console.group('------beforeMount挂载前状态------'); console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
 }, /** * 3.在beforeMount和mounted之间，程序将上一步编辑好的html内容替换el属性指向的dom对象或者选择权对应的html标签里面的内容 * * */ mounted: function() { console.group('------mounted 挂载结束状态------'); console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
 }, /** * 4.mounted和beforeUpdate之间，程序实时监控数据变化 * * */ beforeUpdate: function() { console.group('beforeUpdate 更新前状态===============》'); console.log("%c%s", "color:red", "el     : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, /** * 5.beforeUpdate和updated之间，实时更新dom * * */ updated: function() { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red", "el     : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, beforeDestroy: function() { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red", "el     : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, /** * 6.实例销毁 * * */ destroyed: function() { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red", "el     : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) } }) </script>

</html>
 原文：https://blog.csdn.net/yana_li/article/details/78780335