Vue面试（3）-- vue高级特性

颜色选择器 双向数据绑定

customVModel.vue

<input type=“text”

:value=“text1”

@input=“$emit{(}^{\prime }change{1}^{\prime },$event.target.value)”>

2. $nextTick

---

vue是异步渲染，

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

$nextTick会在DOM渲染之后被触发，以获得最新的DOM节点

• {{item}}

  <button @click=“addItem”>添加一项

  (在DOM元素定义ref=”ul1”,之后可以使用this.$refs.ul1拿到DOM元素)

  不使用$nextTick的效果： 点击一次输出3，点击第二次输出6

  为了使点击之后可以立刻得到渲染结果：使用$nextTick

  3. slot插槽

  ---

  ****组件插槽的作用：****父组件向子组件传递内容（模板的内容）

  ****插槽的位置：****位于子组件的模板中

  （1） 基本使用

  vue 高级特性

  {{website.title}}

  SlotDemo.vue

  显示默认内容，即父组件没设置内容时

  （效果：链接会以标签形式显示并且显示title内容）

  （2）作用域插槽

  {{website.subTitle}} 

  （如果不传入值{{website.subTitle}}}，则会显示子组件的默认subtitle）

  使用：子组件中作用域的data让父组件可以获取到

  {{slotProps.slotData.title}}

  效果：页面显示子组件内容wangEditor

  （思路：在slot中定义动态属性slotData，然后把他定义到website上，website中含有title和subtitle。然后在index中使用ScopedSlotDemo中定义v-slot=”slotProps”.之后可以使用slot Props.slot DaTa拿到ScopedSlotDemo组件中website的内容，从而可以拿到website的title）

  （3）具名插槽

  有名字的插槽—根据内容进行匹配–没有名称会默认匹配

  父组件往子组件传递内容的时候需要对应好名字

  4. 动态组件异步组件

  ---

  （1）动态组件

  用法: ：is=********”component-name”

  需要根据数据、动态渲染的场景。即组件类型并不确定。（一般情况下组件类型是确定的）

  举例使用场景：新闻详情页。（组件位置不确定或者种类不确定。即不知道要渲染甚么样的组件，只知道数据。需要根据数据确定组件的类型，这时就需要用到动态组件）

  vue 高级特性

  （根据获取到的组件（text，image）进行渲染）

  （2）异步组件

  Import函数

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

  （什么时候用就什么时候加载，如果不使用永远都不会加载，适合于组件比较大比较复杂，这样会优化性能）

  使用语句import SlotDemo from ‘./SlotDemo’ 是同步加载

  <button @click=“showFormDemo = true”>show form demo

  // 然后在components里面写

  components: {

  FormDemo: () => import(‘…/BaseUse/FormDemo’),

  }

  效果：没有点击时不会加载FormDemo,点击之后会加载然后渲染出来

  5.keep-alive

  ---

  缓存组件

  频繁切换，不需要重复渲染

  Vue常见性能优化

  KeepAlive.Vue中引入三个组件KeepAliveAtageA、KeepAliveAtageB、KeepAliveAtageC是三个按钮

  依次点击BC的效果：

  不使用keep alive	使用keepalive
  A mounted A destroyed B mounted B destroyed C mounted C destroyed A mounted	A created B created C created
  <KeepAliveStageA v-if="state === 'A'"/>  <KeepAliveStageB v-if="state === 'B'"/> <KeepAliveStageC v-if="state === 'C'"/>	<keep-alive> <!-- tab 切换 -->             <KeepAliveStageA v-if="state === 'A'"/>             <KeepAliveStageB v-if="state === 'B'"/>             <KeepAliveStageC v-if="state === 'C'"/>  </keep-alive>

  使用keep-alive和v-show的区别:

  v-show是通过原生CSS控制（使用情况：标签比较简单）

  Keepalive 是在vue框架层级进行的JS对象的渲染（使用情况：带有层级或者tab切换的复杂组件切换）

  <button @click=“changeState(‘A’)”>A

  <button @click=“changeState(‘B’)”>B

  <button @click=“changeState(‘C’)”>C