Vue进阶 | 父子组件的生命周期 & scoped & 易踩坑的细节

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

很多vue的使用细节可以作为“如何在项目中进行代码优化”这个问题的部分回答，比如v-show和v-if的选择，created和mounted获取数据的选择...

1. 父子组件的生命周期执行顺序？

Vue中总是会被问到生命周期，除了正常的生命周期执行顺序，父组件和子组件生命周期函数执行顺序也要熟知，涉及到4部分（回答的时候最好总结成自己的文字形式，简明扼要）

• 初始化及挂载:

  父 beforeCreate -> 父 created -> 父 beforeMount ->

  子 beforeCreate -> 子 created ->子 beforeMount -> 子 mounted ->

  父 mounted

• 子组件更新:

  父 beforeUpdate ->

  子 beforeUpdate -> 子 updated ->

  父 updated

• 父组件更新 :

  父 beforeUpdate -> 父 updated

• 销毁 :

  父 beforeDestroy ->

  子 beforeDestroy -> 子 destroyed ->

  父 destroyed

2. vue请求数据，放在created和mounted里有什么不同?

• created：在模板渲染成html前调用，通常用来初始化某些属性值，再渲染成视图

• mounted：在模板渲染成html后调用，通常在初始化页面完成后，对DOM节点进行操作

建议放在created里，如果在mounted中请求数据可能导致页面闪屏

3. Vue 中 CSS scoped 的原理？

<style scoped>使页面渲染完后样式之间不会造成污染。

vue会在DOM结构以及css样式上加不重复的标记data-v-hash:xxxxx，以保证唯一。

注意：

• 如果是在子组件使用了scoped，那么在父组件中不能直接修改子组件的样式，需要在父组件中使用深度作用选择器。
• 如果子组件选择器跟父组件完全一样，那么子组件样式会被父组件覆盖（问题1中有提到，子组件会优先于父组件mounted）

4. 说说 v-show 与 v-if 的不同？

这个是曾经一度踩坑的地方，并且很容易记混

1. v-show

   • 只是简单的基于css切换：display:none，DOM元素依旧存在
   • 不管初始条件取值如何，元素都会
   • 取值在false和true切换的时候不会触发组件的生命周期
   • 初始渲染消耗较高

2. v-if

   • 核心是将DOM元素进行添加和删除
   • 由false变为true的时候，会触发组件的beforeCreate、create、beforeMount、mounted，由true变为false的时候触发组件的beforeDestory、`destoryed
   • 切换时消耗较高（直接操作DOM节点开销大）

所以，如果取值的改变会比较频繁，使用 v-show 较好，否则使用 v-if 较好

5. v-for 和 v-if？

两者同时用在同一个元素上，带来性能方面的浪费，因为v-for优先级比v-if高，会先循环再判断。

最优是先进行判断，再进行渲染,外层使用在<template>（这样页面不会创建DOM节点）

// bad
<p v-if="isShow" v-for="item in data"> 
    {{ item.name }} 
</p>

// good
<template v-if="isShow"> 
    <p v-for="item in data">{{item.name}}</p>
</template>