[聚焦Vue/React/Webpack]3-2 Vue高级使用

自定义v-model

<input type="text" :value="text" @input="$emit('change', $event.target.value)" />
model: {
    prop: 'text', // 对应 props text
  event: 'change' // 对应    $emit的事件
}
props: {
    text: String,
}

$nextTick

问题： vue 组件更新之后如何获取最新DOM？
vm.$nextTick([callback])

1. 异步渲染， $nextTick 待DOM 渲染完再回调
2. 页面渲染时会将data的修改做整合， 多次data修改支会渲染一次（只会调用$nextTick一次）

基本使用

<div>  <slot>默认数据<slot>  <div>  <!-- comp -->
<Comp> {{ 定制显示 }} </Comp>  <!-- parent -->

作用域插槽(让父组件访问子组件的数据)

<!-- 绑定动态属性 -->
<Comp :slotData="web"> {{web.utl}} </Comp>
<!-- 默认属性 -->
<Comp v-slot:default="slotProps"> {{ slotProps.user.firstName }} </Comp>

具名插槽

<!-- comp -->
<div>  <slot name="header">默认数据<slot>  <div>
<!-- parent -->
<Comp> <template v-slot:header> {{ 定制显示 }} </template> </Comp>
<Comp> <template #header> {{ 定制显示 }} </template> </Comp> // 简写

动态组件

应用场景： 需要根据数据， 动态渲染的场景（不确定组件类型）
<component :is="component-name"/>

异步组件

• import() 函数
• 按需加载， 异步加载大组件， 打包后会生成一个单独的js

comp: () => import('./Comp')

抽象组件， 不会渲染出dom。使用时， 包裹需要缓存的组件。两个钩子函数：

• actived ，被 keep-alive 缓存的组件激活时调用。
• deactivated， 被 keep-alive 缓存的组件停用时调用。

应用场景： 用于频繁切换， 不需要重复渲染的情况。
问题：keep-alive与v-show的区别？ 分别使用于什么场景？
缓存带层级的复杂组件使用keep-alive， 简单组件使用v-show

mixin（全局混入、单组件混入）

mixin 用于抽离公共组件逻辑。用法： 定义一个js文件， 将export default中的共有内容写到里边；然后在组件中import， 放到mixins数组中。
myMixin.js

export defsult {
    data() { return {}; }
  methods: {}
}

comp.vue

import myMixin from './myMixin.js'
mixins: [myMixin]

使用mixin带来的问题：

1. 变量来源不明确、不利于阅读
2. 多mixin可能造成明明冲突
3. mixin和组件可能出现多对多的关系， 复杂度较高

面试技巧：1. 可以不太深， 但必须知道；2. 熟悉基本用法， 了解使用场景； 3. 与自己的项目经验结合
🔚 2020-6