vue生命周期

时间 2020-01-31

标签 vue 生命周期繁體版

原文原文链接

钩子怎么用：javascript

beforecreate : 举个栗子：能够在这加个loading事件
created ：在这结束loading，还作一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子作一些事情
beforeDestory：你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       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)  
        },
        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); //已被初始化
        },
        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); //已被初始化  
        },
        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); //已被初始化 
        },
        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); 
        },
        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); 
        },
        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>
</body>
</html>

beforeCreate

类型：Functionvue
详细：java

在实例初始化以后，数据观测 (data observer) 和 event/watcher 事件配置以前被调用。后端
参考：生命周期图示api

created

类型：Function服务器
详细：app

在实例建立完成后被当即调用。在这一步，实例已完成如下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。ide
参考：生命周期图示函数

beforeMount

类型：Function
详细：

在挂载开始以前被调用：相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

mounted

类型：Function
详细：

el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。若是 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺全部的子组件也都一块儿被挂载。若是你但愿等到整个视图都渲染完毕，能够用 vm.$nextTick 替换掉 mounted：
mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

beforeUpdate

类型：Function
详细：

数据更新时调用，发生在虚拟 DOM 从新渲染和打补丁以前。

你能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

updated

类型：Function
详细：

因为数据更改致使的虚拟 DOM 从新渲染和打补丁，在这以后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，因此你如今能够执行依赖于 DOM 的操做。然而在大多数状况下，你应该避免在此期间更改状态。若是要相应状态改变，一般最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺全部的子组件也都一块儿被重绘。若是你但愿等到整个视图都重绘完毕，能够用 vm.$nextTick 替换掉 updated：
updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }
该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

activated

类型：Function
详细：

keep-alive 组件激活时调用。

该钩子在服务器端渲染期间不被调用。
参考：
- 构建组件 - keep-alive
- 动态组件 - keep-alive

deactivated

类型：Function
详细：

keep-alive 组件停用时调用。

该钩子在服务器端渲染期间不被调用。
参考：
- 构建组件 - keep-alive
- 动态组件 - keep-alive

beforeDestroy

类型：Function
详细：

实例销毁以前调用。在这一步，实例仍然彻底可用。

该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

destroyed

类型：Function
详细：

Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

errorCaptured

2.5.0+ 新增

类型：(err: Error, vm: Component, info: string) => ?boolean
详细：

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子能够返回 false 以阻止该错误继续向上传播。

你能够在此钩子中修改组件的状态。所以在模板或渲染函数中设置其它内容的短路条件很是重要，它能够防止当一个错误被捕获时该组件进入一个无限的渲染循环。

错误传播规则
- 默认状况下，若是全局的 config.errorHandler 被定义，全部的错误仍会发送它，所以这些错误仍然会向单一的分析服务的地方进行汇报。
- 若是一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
- 若是此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和本来被捕获的错误都会发送给全局的 config.errorHandler。
- 一个 errorCaptured 钩子可以返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。