vue 先后执行加载问题_vue全家桶开发的一些小技巧和注意事项

前言

用vue全家桶开发三年多了，踩过不少坑，也解决了很多的问题，把其中的一些点记录下来，希望能帮到大家。以下内容基于最新版的vue + vuex + vue-router + axios + less + elementUI，vue脚手架是vue-cli3。

css的scoped属性

vue 为了防止 css 污染，当组件的

注意：每个组件的最外层的标签会带上父组件的data-v-属性，也就是这个标签会被父组件的样式匹配到，所以父组件尽量不要使用标签选择器，这个标签不要使用父组件中的 id 或者 class。

在父组件想修改子组件的css(修改elementUI组件的样式)，我们可以借助深度作用选择器 >>>

div >>> .el-input{    width: 100px;}/* sass/less的话可能无法识别，这时候需要使用 /deep/ 选择器。 */div /deep/ .el-input{    width: 100px;}复制代码

深度作用选择器会去掉后面元素的属性选择器[data-v-]，即上面代码会编译成：div[data-v-12345667] .el-input{}。就可以匹配到子组件的元素，从而覆盖样式。

父子组件的生命周期钩子函数执行先后顺序

组件的生命周期钩子函数是到了某个生命周期点就会触发，而不是在这个钩子函数中进行生命周期，比如说DOM加载好了，就会触发mounted 钩子函数，所以在created 里面写一个延迟定时器，mounted 钩子不会等定时器执行。

各个周期钩子函数触发的时间点参考(图来源于网络)

关于父子组件的生命周期：不同的钩子函数有不同的表现。父组件的虚拟 DOM 先初始化好了(beforeMount)，才会去初始化子组件的虚拟 DOM (beforeMount)，而 mounted 事件，等价于 window.onload，子组件 DOM 没加载好，父组件 DOM 永远不可能加载好。所以基本生命周期钩子函数执行顺序是：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

父子组件的update和beforeUpdate执行先后顺序：数据修改+虚拟DOM准备好会触发beforeUpdate，换句话说beforeUpdate等价于beforeMount，而update等价于mounted。所以先后顺序是： 父beforeUpdate -> 子beforeUpdate -> 子update -> 父update。

同理beforeDestory和destoryed的先后顺序是：父beforeDestory -> 子beforeDestory -> 子destoryed -> 父destoryed。

生命周期钩子函数其实也可以写成数组的形式：mounted: [mounted1, mounted2],同一个生命周期可以触发多个函数，这也是mixin(混入)的原理，mixin里面也可以写生命周期钩子，最终会和组件里面的生命周期钩子函数一起变成数组形式，mixin里面的钩子函数会先执行。

异步请求数据在哪个钩子函数中执行比较好

很多人觉得在 created 事件里面把数据请求到，然后一起生成虚拟 DOM，再渲染会更好。实际上呢，请求是需要时间的，而且这个时间具有不稳定性，很可能 vue 的虚拟 DOM 准备好了，你的数据才请求到，然后又得更新一遍虚拟 DOM，再渲染，极大地延长了白屏时间，用户体验很不好。而在 mounted 事件请求数据呢，静态页面会先渲染好，等数据好了，再更新部分 DOM 即可。

补充：经掘友指出，这里理解有误，抱歉。

生命周期钩子函数的中异步会放入事件队列，而不会在这个钩子函数中执行。也就是说你在 created 和 mounted 中请求数据是一样的，都不会立即更新数据，所以不会导致虚拟DOM重新加载，也不影响页面中静态的部分加载。生命周期钩子函数中的异步赋值，vue会在一遍流程走完之后执行update。另外，给数据赋值然后更新 DOM 也是异步的，侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，去掉重复赋值然后更新。

生命周期钩子函数中的异步行为测试：

export default {    data(){        return {            list:[],        }    },    methods:{        getData(){            //生成指定范围的随机整数            const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;             //生成固定长度的非空数组            const randomArr = length => Array.from({ length }, (item, index) => index * 2);             const time = randomNum(100,3000);//模拟请求时间            console.log('getData start');            return new Promise