vue生命周期

前言 🙂

所有的生命周期钩子自动绑定this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着不能使用箭头函数来定义一个生命周期方法(eg:created:()=>this.fetchTools() //会报错this.fetchTools 行为未定义),因为箭头函数绑定了父上下文,因此箭头函数里的this 不指向我们的vue实例

钩子函数

  • #beforeCreate

    • 初始化界面前
    • 组件实例被创建之前,组件的属性生效之前,组件实例中还没有提升任何的成员
    • data、methods、computed以及watch上的数据和方法都不能被访问
  • #created

    • 初始化界面后(异步请求、ssr放这里)
    • 组件初始化完成props、methods、data、computed等 有值,还未编译模板,此时可以做一些初始数据的获取,可以通过vm.$nextTick 来访问DOM
    • 挂载阶段还没有开始,无法操作DOM节点,在这里修改数据无法更新视图
  • #beforMount

    • 渲染DOM前(异步请求)
    • 在挂载开始之前被调用:相关的render 函数首次被调用
    • 完成模板编译(虚拟DOM创建完成),还未挂载到页面中,此时页面还是旧的
    • 该钩子函数在服务器端渲染期间不被调用
  • #mounted

    • 渲染DOM后(异步请求)
    • 将编译好的模板挂载到页面(虚拟DOM挂载)
    • el 被新创建的vm.$el 替换,并挂载到实例上去之后调用该钩子函数,DOM替换vue实例已经挂载到页面
    • 可以使使用$refs 属性对DOM进行操作
    //为input添加一个ref属性,其中在data设置msg为"Hello World"
    <input type="text" ref="msgText" v-model="msg" />
    //在mounted中可以获取DOM的值
    mounted(){
    console.log("mounted 钩子执行...")
    console.log("#################");
    console.log(this.$refs.msgText.value)
    }


    注意,如果在mounted 之前的钩子函数中操作DOM,控制台就会报错,比如我们尝试在beforeMount 中打印msg 的值

//beforeMount中打印
beforeMount(){
console.log("beforeMount 钩子执行...")
console.log("#################");
console.log(this.$refs.msgText.value)
}

控制台会报错

  • 只要执行完了mounted 就表示整个Vue实例已经初始化完毕,组件脱离创建阶段,进入运行阶段

  • 注意:mounted 不会保证所有子组件也都一起被挂载,如果想要等到整个视图都渲染完毕,可以在mounted 内部使用vm.$nextTick

    mounted:function(){
    this.$nextTick(function(){
    //这里的代码只有在整个视图被渲染完成后才会运行
    })
    }
  • 该钩子函数在服务器端渲染期间不被调用

  • #beforeUpdate

    • 组件数据更新之前调用,发生在虚拟DOM打补丁之前,数据都是新的,但页面上数据还是旧的,组件即将更新,准备渲染页面
    • 这里更适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。可以在这个钩子函数中进一步地改变状态,这不会触发附加的重渲染过程
    • 该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务器端进行
  • #updated

    • 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子,此时页面和data数据已经保持同步了,都是最新的
    • 当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能导致更新无限循环。如果要响应状态改变,最好使用计算属性或watcher
    • 该钩子函数在服务器端渲染期间不被调用
  • #activated

    • keep-alive 缓存的组件激活时调用
    • 该钩子函数在服务器端渲染期间不被调用
  • #deactivated

    • keep-alive 缓存的组件停用时调用
    • 该钩子函数在服务器端渲染期间不被调用
  • #beforeDestroy

    • 实例销毁之前调用,此时Vue实例已经从运行阶段进入到了销毁阶段;当执行beforeDestroy 的时候,实例身上所有的datamethods 以及过滤器、指令等都处于可用状态,此时还没有真正执行销毁过程

    • 可以在此钩子函数中卸载事件监听、观察、子组件等

    • 该钩子函数在服务器端渲染期间不被调用

  • #destroyed

    • 可以执行一些优化操作,比如清空定时器、清理缓存、解除事件绑定等
    • 实例销毁后调用,该钩子被调用后,对应Vue实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁
  • 该钩子函数在服务器端渲染期间不被调用

  • #errorCaptured

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

初次渲染就会触发的钩子

  • beforeCreate()、created()
  • beforeMount()、mounted()

父子组件生命周期执行顺序

  • 加载渲染过程
    • 子组件在父组件的beforeMountmounted 之间渲染,顺序如下(从上往下)
父组件--beforeCreate
父组件--cteated
父组件--beforeMount
子组件--beforeCreate
子组件--cteated
子组件--beforeMount
子组件--mounted
父组件--mounted
  • 子组件更新过程

    此更新影响到父组件

父组件--beforeUpdate
子组件--beforeUpdate
子组件--updated
父组件--updated

​ 此更新不影响父组件

子组件--beforeUpdate
子组件--updated
  • 父组件更新过程

    此更新会影响到子组件(一般在动态传值的时候)

父组件--beforeUpdate
子组件--beforeUpdate
子组件--updated
父组件--updated

​ 此更新不会影响到子组件(非动态传值)

父组件--beforeUpdate
父组件--updated
  • 销毁过程
父组件--beforeDestroy
子组件--beforeDestroy
子组件--destroyed
父组件--destroyed

总结:Vue父子组件生命周期钩子的执行顺序遵循:从外到内,然后再从内到外,不管嵌套几层深,也遵循这个规律

Vue异常处理

三种常见错误类型

  • 1、引用一个不存在的变量

    <div id="app" v-cloak>
    Hello, {{name}}
    </div>

    代码运行后界面显示正常,但在控制台会有[Vue warn] 消息提醒。

  • 2、将变量绑定到一个被计算出来的属性,计算的时候会抛出异常

    <div id="app" v-cloak>
    Hello, {{name2}}
    </div>
    <script>
    const app = new Vue({
    el: "#app",
    computed: {
    name2() {
    return x;
    }
    }
    });
    </script>

    代码运行后,会在控制台抛出一个[Vue warn] 和一个常规错误,页面显示白屏

  • 3、执行一个会抛出异常的方法

    <div id="app" v-cloak>
    <el-button @click="doIt">Do It</el-button>
    </div>
    <script>
    const app = new Vue({
    el: "#app",
    methods: {
    doIt() {
    return x;
    }
    }
    });
    </script>

    代码运行后,也会在控制台抛出一个[Vue warn] 和一个常规错误,和上一个错误的区别在于,只有你点击了按钮才会触发函数调用,才会报错

异常处理技巧

  • 1、errorHandler[2.2+]

    /**
    err指代 error 对象,
    info是Vue特定的错误信息,比如错误所在的生命周期钩子等,
    vm指代 Vue 应用本身。
    记住在一个页面你可以有多个 Vue 应用。
    这个 error handler 作用到所有的应用。
    */
    Vue.config.errorHandler = function(err, vm, info) {
    // Don't ask me why I use Vue.nextTick, it just a hack. detail see
    //https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
    Vue.nextTick(() => {
    console.log(err, info);
    });
    };
    /**
    上面第一种错误不会触发 errorHandler,它只是一个 warning。

    第二种错误会抛出错误被 errorHandler 捕获:
    Error: ReferenceError: x is not defined
    Info: render

    第三种错误也会被捕获:
    Error: ReferenceError: x is not defined
    Info: v-on handler
    */

  • 2、warnHandler[2.4+]

    /**
    msg和vm都容易理解,trace代表了组件树。
    */
    Vue.config.warnHandler = function(msg, vm, trace) {
    console.log(`Warn: ${msg}\nTrace: ${trace}`);
    };

第一个错误被warnHandler捕获

  • 3、renderError (不常用)

    /**
    和前面两个不同,这个技巧不适用于全局,和组件相关。
    并且只适用于非生产环境。
    */
    const app = new Vue({
    el: "#app",
    renderError(h, err) {
    return h("pre", { style: { color: "red" } }, err.stack);
    }
    });

    第一个例子是没有效果的,因为只是一个 warning 第二个例子就会在网页上显示具体的错误信息

  • 4、errorCaptured

    errorCaptured(err, vm, info) {
    console.log(`Err: ${err.toString()}\ninfo: ${info}`);
    return false;
    }
  • 5、window.onerror (目前在vue项目中已经不适用了)

    此方法不仅仅针对Vue,window.onerror 是一个全局的异常处理函数,可以抓取所有的javascript 异常

    window.onerror = function(message, source, line, column, error) {
    console.log("错误信息:", message);
    console.log("出错文件:", source);
    console.log("出错行号:", line);
    console.log("出错列号:", column);
    console.log("错误详情:", error);
    };

注意

在Vue的data 中,以_$ 开头的属性不会被Vue 实例代理,因为它们可能和Vue 的内置属性、API 方法冲突。可以使用vm.$data._property 的方式访问这些属性

Vue实战技巧

1、内部监听生命周期函数

Vue 组件中,可以通过$on $once 监听所有的生命周期钩子函数,比如

this.$once('hook:beforeDestroy',()=>{
//code
})

2、外部监听钩子函数

<template>
<!--通过@hook:updated监听组件的updated生命钩子函数-->
<!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
<lifecycle @hook:updated="handleUpdate"></lifecycle>
</template>
<script>
import lifecycle from "./LifeCycle-c.vue";
export default {
components: {
lifecycle,
},
data() {
return {};
},
methods: {
handleUpdate() {
console.log("子组件的updated钩子函数被触发");
},
}
</script>

3、用Vue.observable 手写一个状态管理器

在前端项目中, 有许多数据需要在各个组件之间进行传递共享,这时候就需要一个状态管理工具,一般情况下,我们都会使用Vuex ,但对于小型项目来说,使用Vuex 就显得有些繁琐冗余,这时候我们可以使用Vue2.6 提供的新API Vue.observable 手动打造一个Vuex

(1)创建store

import Vue from "vue";

//通过Vue.observable创建一个可响应的对象
export const store = Vue.observable({
userInfo: {},
roleIds: [],
});

//定义mutations,修改属性
export const mutations = {
setUserInfo(userInfo) {
store.userInfo = userInfo;
},
setRoleIds(roleIds) {
store.roleIds = roleIds;
},
};

(2)在组件中引用

<template>
<div class="outside" id="app">
<div>{{ userInfo }}</div>
</div>
</template>
<script>
import { store, mutations } from "../../store/store";
export default {
data() {
return {};
},
computed: {
userInfo() {
return store.userInfo;
},
},
methods: {},
created() {
mutations.setUserInfo({ name: "xxx" });
},
};
</script>

4、Vue.extend 开发全局组件

Vue.extend 是一个全局API,平时我们在开发业务时很少会用到它,但有时候我们希望可以开发一些全局组件比如LoadingNotifyMessage 等组件时,这时候就可以使用Vue.extend

<template>
<!--loading蒙版-->
<div v-show="visible" class="el-loading-mask">
<!--loading中间的图标-->
<div class="el-loading-spinner">
<i class="el-spinner-icon el-icon-loading"></i>
<!--loading上面显示的文字-->
<p class="el-loading-text">{{ text }}</p>
</div>
</div>
</template>
<script>
export default {
props: {
// 是否显示loading
visible: {
type: Boolean,
default: false,
},
// loading上面的显示文字
text: {
type: String,
default: "",
},
},
};
</script>

开发出来loading 组件之后,可以直接使用

<template>
<div class="component-code">
<!--其他一堆代码-->
<custom-loading :visible="visible" text="拼命加载中" />
</div>
</template>
<script>
import customLoading from "./customLoad";
export default {
components: {
customLoading,
},
data() {
return {
visible: true,
};
},
};
</script>

但是这样使用并不能满足我们的需求

  1. 可以通过js直接调用方法来显示关闭
  2. loading 可以将整个页面全部遮罩起来
通过Vue.extend 将组件转为全局组件
  1. 改造loading 组件 将props 改为data
export default {
data() {
return {
text: '',
visible: false
}
}
}
  1. 通过Vue.extend 改造组件

新建loading/index.js

import Vue from "vue";
import LoadingComponent from "./customLoad.vue";
//通过Vue.extend将组件包装成一个子类
const LoadingConstructor = Vue.extend(LoadingComponent);
let loading = undefined;
LoadingConstructor.prototype.close = function() {
//如果loading有引用 则去掉引用
if (loading) {
loading = undefined;
}
//先将组件隐藏
this.visible = false;
//延迟300毫秒,等待loading关闭动画执行完之后销毁组件
setTimeout(() => {
//移除挂载的dom元素
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
//调用组件的$destroy方法进行组件销毁
this.$destroy();
}, 300);
};
const Loading = (options = {}) => {
//如果组件已渲染 则返回即可
if (loading) {
return loading;
}
//要挂载的元素
const parent = document.body;
//组件属性
const opts = {
text: "",
...options,
};
//通过构造函数初始化组件 相当于new Vue()
const instance = new LoadingConstructor({
el: document.createElement("div"),
data: opts,
});
//将loading挂载到parent上面
parent.appendChild(instance.$el);
//显示loading
Vue.nextTick(() => {
instance.visible = true;
});
//将组件实例赋值给loading
loading = instance;
return instance;
};
export default Loading;
  1. 在页面使用loading
<template>
<div class="component-code">
<el-button type="primary" size="medium" @click="loading">点击开始加载</el-button>
<!--其他一堆代码-->
</div>
</template>
<script>
import Loading from "./loading/index";
export default {
components: {},
data() {
return {};
},
methods: {
loading() {
const loading = Loading({ text: "拼命加载中..." });
//3秒后关闭
setTimeout(() => {
loading.close();
}, 3000);
},
},
created() {},
};
</script>

通过上面的改造,loading 已经可以在全局使用了,如果需要像element-ui 一样挂载到Vue.prototype 上面,通过this.$loading 调用 还需要改造一下

将组件挂载到Vue.prototype上面
Vue.prototype.$loading = Loading
// 在export之前将Loading方法进行绑定
export default Loading

// 在组件内使用
this.$loading() //不必再import Loading

5、自定义指令

1. 开发v-load指令
import Vue from "vue";
import LoadingComponent from "../views/test/loading/customLoad.vue";
// 使用 Vue.extend构造组件子类
const LoadingContructor = Vue.extend(LoadingComponent);

// 定义一个名为load的指令
Vue.directive("load", {
/**
* 只调用一次,在指令第一次绑定到元素时调用,可以在这里做一些初始化的设置
* @param {*} el 指令要绑定的元素
* @param {*} binding 指令传入的信息,包括 {name:'指令名称', value: '指令绑定的值',arg: '指令参数 v-bind:text 对应 text'}
*/
bind(el, binding) {
const instance = new LoadingContructor({
el: document.createElement("div"),
data: {},
});
el.appendChild(instance.$el);
el.instance = instance;
Vue.nextTick(() => {
el.instance.visible = binding.value;
});
},
/**
* 所在组件的 VNode 更新时调用
* @param {*} el
* @param {*} binding
*/
update(el, binding) {
// 通过对比值的变化判断loading是否显示
if (binding.oldValue !== binding.value) {
el.instance.visible = binding.value;
}
},
/**
* 只调用一次,在 指令与元素解绑时调用
* @param {*} el
*/
unbind(el) {
const mask = el.instance.$el;
if (mask.parentNode) {
mask.parentNode.removeChild(mask);
}
el.instance.$destroy();
el.instance = undefined;
},
});
2. 在元素上面使用指令
<template>
<div class="component-code">
<div v-load="visible"></div>
<!--其他一堆代码-->
</div>
</template>
<script>
export default {
components: {},
data() {
return {
visible: false,
};
},
methods: {},
created() {
this.visible = true;
// fetch().then(() => {
// this.visible = false;
// });

setTimeout(() => {
this.visible = false;
}, 5000);
},
};
</script>
3. 项目中哪些场景可以自定义指令
  • 为组件添加loading 效果
  • 按钮级别权限控制v-permission
  • 代码埋点 根据操作类型定义指令
  • input输入框自动获取焦点…

6、深度watchwatch 立即触发回调

在开发Vue项目时,我们会经常性的使用到watch去监听数据的变化,然后在变化之后做一系列操作。

1. watch 基础用法

比如一个列表页,我们希望用户在搜索框输入搜索关键字的时候,可以自动触发搜索,此时除了监听搜索框的change事件之外,我们也可以通过watch监听搜索关键字的变化

<template>
<div>
<div>
<span>搜索</span>
<input v-model="searchValue" />
</div>
<!--列表,代码省略-->
</div>
</template>
<script>
export default {
data() {
return {
searchValue: ''
}
},
watch: {
// 在值发生变化之后,重新加载数据
searchValue(newValue, oldValue) {
// 判断搜索
if (newValue !== oldValue) {
this.$_loadData()
}
}
},
methods: {
$_loadData() {
// 重新加载数据,此处需要通过函数防抖
}
}
}
</script>
2. 立即触发

通过上面的代码,现在已经可以在值发生变化的时候触发加载数据了,但是如果要在页面初始化时候加载数据,我们还需要在created或者mounted生命周期钩子里面再次调用$_loadData方法。不过,现在可以不用这样写了,通过配置watch的立即触发属性,就可以满足需求了

// 改造watch
export default {
watch: {
// 在值发生变化之后,重新加载数据
searchValue: {
// 通过handler来监听属性变化, 初次调用 newValue为""空字符串, oldValue为 undefined
handler(newValue, oldValue) {
if (newValue !== oldValue) {
this.$_loadData()
}
},
// 配置立即执行属性
immediate: true
}
}
}
3. 深度监听

一个表单页面,需求希望用户在修改表单的任意一项之后,表单页面就需要变更为被修改状态。如果按照上例中watch的写法,那么我们就需要去监听表单每一个属性,太麻烦了,这时候就需要用到watch的深度监听deep

export default {
data() {
return {
formData: {
name: '',
sex: '',
age: 0,
deptId: ''
}
}
},
watch: {
// 在值发生变化之后,重新加载数据
formData: {
// 需要注意,因为对象引用的原因, newValue和oldValue的值一直相等
handler(newValue, oldValue) {
// 在这里标记页面编辑状态
},
// 通过指定deep属性为true, watch会监听对象里面每一个值的变化
deep: true
}
}
}

7、函数式组件

函数式组件,我们可以理解为没有内部状态,没有生命周期钩子函数,没有this (不需要实例化)的组件

在工作的过程中,经常会开发一些纯展示性的业务组件,比如一些详情页面,列表界面登,它们有一个共同特点是只需要将外部传入的数据进行展示,不需要有内部状态,不需要在生命周期钩子函数里面做处理,这时候你就可以考虑使用函数式组件

1、简单的函数式组件
export default {
// 通过配置functional属性指定组件为函数式组件
functional: true,
// 组件接收的外部属性
props: {
avatar: {
type: String
}
},
/**
* 渲染函数
* @param {*} h
* @param {*} context 函数式组件没有this, props、slots等都在context上面挂着
*/
render(h, context) {
const { props } = context
if (props.avatar) {
return <img src={props.avatar}></img>
}
return <img src="default-avatar.png"></img>
}
}

上例定义了一个头像组件,如果外部传入头像,则显示传入的头像,否则显示默认头像,上面代码中的render 函数,这个是Vue 使用JSX 的写法

2、为什么使用函数式组件
  • 最主要最关键的原因是函数式组件不需要实例化,无状态,没有生命周期,所以渲染性能要好于普通组件
  • 函数式组件结构比较简单,代码结构更清晰
3、函数式组件与普通组件的区别

​ 1.函数式组件需要在声名组件时指定functional

​ 2.函数式组件不需要实例化,所以没有thisthis 通过render 函数的第二个参数来代替

​ 3.函数式组件没有生命周期钩子函数,不能使用计算属性,watch

​ 4.函数式组件不能通过$emit 对外暴露事件,调用事件只能通过context.listeners.click 的方式调用外部传入的事件

​ 5.因为函数式组件是没有实例化的,所以在外部通过ref 去引用组件时,实际引用的是HTMLElement

​ 6.函数式组件的props 可以不用显示声明,所有没有在props 里面声明的属性都会被自动隐式解析为prop ,而普通组件所有未声明的属性都被解析到$attrs 里面,并自动挂载到组件根元素上面(可以通过把inheritAttrs 属性设置为false 禁止自动挂载)

4、用模板语法代替JSX 声明函数式组件

Vue2.5之前,使用函数式组件只能通过JSX的方式,在之后,可以通过模板语法来生命函数式组件

<!--在template 上面添加 functional属性-->
<template functional>
<img :src="avatar ? avatar : 'default-avatar.png'" />
</template>
<!--根据上一节第六条,可以省略声明props-->
5、函数式组件的参数
  1. props : 提供所有prop 对象
  2. children: VNode 子节点的数据
  3. slots: 一个函数 返回了包含所有插槽的对象
  4. scopedSlots: (2.6.0+)一个暴露传入的作用域插槽的对象 也以函数形式暴露普通插槽
  5. data: 传递给组件的整个数据对象 作为createElement 的第二个参数传入组件
  6. parent: 对父组件的引用
  7. listeners: (2.3.0+)一个包含了所有父组件为当前组件注册的事件监听器的对象 这是data.on 的一个别名
  8. injections: (2.3.0+)如果使用了inject选项,则该对象包含了应当被注入的property
6、使用技巧
1、attrlistener 使用

平时我们在开发组件时 传递prop 属性以及事件等操作 都会使用v-bind="$attrs" v-on="$listeners" 而在函数式组件中,attrs属性都集成在data中

<template functional>
<div>
div>
<h3>{{ data.attrs }}</h3><!--可以显示父组件传来的没有被props识别的属性-->
<el-button @click="listeners.dd">测试按钮</el-button>
<!--dd为父组件传来的函数-->
</div>
</div>
</template>
2、classstyle 绑定

在引入函数式组件 直接绑定外层的class 类名和style 样式是无效的data.class 表示动态绑定classdata.staticClass 则表示绑定静态class data.staticStyle 也可以是绑定内联样式

<Child3
function="函数式组件"
title="Hello World"
@dd="dd"
:class="{ 'title-active': true }"
class="back"
style="color:red"
></Child3>
<template functional>
<div>
<h3>{{ data.attrs }}</h3>
<h3 :class="[data.class, data.staticClass]">{{ props.function }}</h3>
<h3 :style="data.staticStyle">{{ props.title }}</h3>
</div>
</template>
3、component 组件引入
<template functional>
<div class="tv-button-cell">
<component :is="injections.components.TvButton" type="info" />
{{ props.title }}
</component>
</div>
</template>
<script>
import TvButton from '../TvButton'
export default {
inject: {
components: {
default: {
TvButton
}
}
}
}
</script>
4、$options 计算属性

有时候需要修改prop数据源, 使用 Vue 提供的 $options 属性,可以访问这个特殊的方法。

<template functional>
<div v-bind="data.attrs" v-on="listeners">
<h1>{{ $options.upadteName(props.title) }}</h1>
</div>
</template>
<script>
export default {
updateName(val) {
return 'hello' + val
}
}
</script>