Vue 综合知识点

Posted 2021-11-04 沿着路走到底

v-show 和 v-if 的区别
为何 v-for 中要用key

描述 Vue 组件生命周期 （有父子组件的情况）

挂载阶段

更新阶段

销毁阶段

created 和 mounted 有什么区别？

父子组件生命周期

挂载：

父组件： beforeCreate、created、beforeMount、

子组件： beforeCreate、created、beforeMount、mounted

父组件：mounted

更新：

父组件： beforeUpdate

子组件： beforeUpdate、updated

父组件：updated

销毁：

父组件： beforeDestroy

子组件： beforeDestroy、destroyed

父组件：destroyed

Vue 组件如何通讯
描述组件渲染和更新的过程
双向数据绑定 v-model 的实现原理

高级特性

自定义 v-model

$nextTick

Vue 是异步渲染，$nextTick 待 DOM 渲染完再回调

data 改变之后，DOM 不会立刻渲染

$nextTick 会在 DOM 渲染之后被触发，以获取最新 DOM 节点，页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次

refs

slot

动态组件

:is = "component-name"  用法

需要根据数据，动态渲染的场景。即组件类型不确定。

<component :is="componentName" />

异步组件

对于比较大的组件，例如：富文本编辑器、echarts等。如果同步一起打包，那体积会非常大，加载也会非常慢。

import() 函数

按需加载，异步加载大组件

components: {
    FormDemo: () => import('../BaseUse/FormDemo')
}

keep-alive

mixin