轻松搞懂前端面试题系列（vue篇五）

一、Vue3有了解过吗？能说说跟Vue2的区别吗？

关于vue3的重构背景，尤大是这样说的：

Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了，在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」

简要就是：

  • 利用新的语言特性(es6)
  • 解决架构问题

那么，vue3有哪些变化呢？

从上图中，我们可以概览Vue3的新特性，如下：

  • 速度更快
  • 体积减少
  • 更易维护
  • 更接近原生
  • 更易使用

速度更快

vue3相比vue2:

  • 重写了虚拟Dom实现
  • 编译模板的优化
  • 更高效的组件初始化
  • undate性能提高1.3~2倍
  • SSR速度提高了2~3倍

体积更小

通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的，能够tree-shaking，有两大好处：

  • 对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大
  • 对使用者，打包出来的包体积变小了

vue可以开发出更多其他的功能，而不必担忧vue打包出来的整体体积过多。

更易维护

compositon Api

  • 可与现有的Options API一起使用
  • 灵活的逻辑组合与复用
  • Vue3模块可以和其他框架搭配使用

更好的Typescript支持

VUE3是基于typescipt编写的，可以享受到自动的类型定义提示。

编译器重写

更接近原生

可以自定义渲染 API。

更易使用

响应式 Api 暴露出来。

轻松识别组件重新渲染原因。

Vue3新增特性

Vue 3 中需要关注的一些新功能包括：

  • framents
  • Teleport
  • composition Api
  • createRenderer

framents

在 Vue3.x 中，组件现在支持有多个根节点

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Teleport

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”，在vue2中，像 modals,toast 等这样的元素，如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难，通过Teleport，我们可以在组件的逻辑位置写模板代码，然后在 Vue 应用范围之外渲染它。

<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
        <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
</teleport>

createRenderer

通过createRenderer，我们能够构建自定义渲染器，我们能够将 vue 的开发模型扩展到其他平台，我们可以将其生成在canvas画布上。

关于createRenderer，我们了解下基本使用，就不展开讲述了。

import { createRenderer } from '@vue/runtime-core'

const { render, createApp } = createRenderer({
  patchProp,
  insert,
  remove,
  createElement,
  // ...
})

export { render, createApp }

export * from '@vue/runtime-core'

composition Api

composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理，关于compositon api的使用，这里以下图展开：

简单使用:

export default {
    setup() {
        const count = ref(0)
        const double = computed(() => count.value * 2)
        function increment() {
            count.value++
        }
        onMounted(() => console.log('component mounted!'))
        return {
            count,
            double,
            increment
        }
    }
}

非兼容变更

Global API

  • 全局 Vue API 已更改为使用应用程序实例。
  • 全局和内部 API 已经被重构为可 tree-shakable。

模板指令

  • 组件上 v-model 用法已更改。
  • <template v-for>和 非 v-for节点上key用法已更改。
  • 在同一元素上使用的 v-if 和 v-for 优先级已更改。
  • v-bind="object" 现在排序敏感。
  • v-for 中的 ref 不再注册 ref 数组。

组件

  • 只能使用普通函数创建功能组件。
  • functional 属性在单文件组件 (SFC)。
  • 异步组件现在需要 defineAsyncComponent 方法来创建。

渲染函数

  • 渲染函数API改变。
  • $scopedSlots property 已删除，所有插槽都通过 $slots 作为函数暴露。
  • 自定义指令 API 已更改为与组件生命周期一致。
  • 一些转换 class 被重命名了：
    • v-enter -> v-enter-from
    • v-leave -> v-leave-from
  • 组件 watch 选项和实例方法 $watch不再支持点分隔字符串路径，请改用计算函数作为参数。
  • 在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。VUE3.x 现在使用应用程序容器的 innerHTML。

其他小改变

  • destroyed 生命周期选项被重命名为 unmounted。
  • beforeDestroy 生命周期选项被重命名为 beforeUnmount。
  • prop default工厂函数不再有权访问 this 是上下文。
  • 自定义指令 API 已更改为与组件生命周期一致。
  • data 应始终声明为函数。
  • 来自 mixin 的 data 选项现在可简单地合并。
  • attribute 强制策略已更改。
  • 一些过渡 class 被重命名。
  • 组建 watch 选项和实例方法 $watch不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
  • <template> 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 现在被视为普通元素，并将生成原生的 <template> 元素，而不是渲染其内部内容。
  • 在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML，这意味着容器本身不再被视为模板的一部分。

移除 API

  • keyCode 支持作为 v-on 的修饰符。
  • $on，$off 和 $once 实例方法。
  • 过滤filter。
  • 内联模板 attribute。
  • $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。

二、说说你对slot的理解？slot使用场景有哪些？

Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口，可以将其类比为插卡式的FC游戏机，游戏机暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容）。
放张图感受一下：

使用场景

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理，如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情。
通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用，比如布局组件、表格列、下拉选、弹框显示内容等。

分类

slot可以分来以下三种：

  • 默认插槽
  • 具名插槽
  • 作用域插槽

默认插槽

子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面，父组件在使用的时候，直接在子组件的标签内写入内容即可。

子组件Child.vue

<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>

父组件

<Child>
  <div>默认插槽</div>  
</Child>

具名插槽

子组件用name属性来表示插槽的名字，不传为默认插槽，父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值。

子组件Child.vue

<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>

父组件

<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上，父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用。

子组件Child.vue

<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>

父组件

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
  <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>

小结

  • v-slot属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用
  • 默认插槽名为default，可以省略default直接写v-slot
  • 缩写为#时不能不写参数，写成#default
  • 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

原理分析

slot本质上是返回VNode的函数，一般情况下，Vue中的组件要渲染到页面上需要经过template -> render function -> VNode -> DOM 过程，这里看看slot如何实现：

编写一个buttonCounter组件，使用匿名插槽

Vue.component('button-counter', {
  template: '<div> <slot>我是默认内容</slot></div>'
})

使用该组件

new Vue({
    el: '#app',
    template: '<button-counter><span>我是slot传入内容</span></button-counter>',
    components:{buttonCounter}
})

获取buttonCounter组件渲染函数

(function anonymous(
) {
with(this){return _c('div',[_t("default",[_v("我是默认内容")])],2)}
})

_v表示穿件普通文本节点，_t表示渲染插槽的函数，渲染插槽函数renderSlot（做了简化）

function renderSlot (
  name,
  fallback,
  props,
  bindObject
) {
  // 得到渲染插槽内容的函数    
  var scopedSlotFn = this.$scopedSlots[name];
  var nodes;
  // 如果存在插槽渲染函数，则执行插槽渲染函数，生成nodes节点返回
  // 否则使用默认值
  nodes = scopedSlotFn(props) || fallback;
  return nodes;
}

name属性表示定义插槽的名字，默认值为default，fallback表示子组件中的slot节点的默认值

关于this.$scopredSlots是什么，我们可以先看看vm.slot

function initRender (vm) {
  ...
  vm.$slots = resolveSlots(options._renderChildren, renderContext);
  ...
}

resolveSlots函数会对children节点做归类和过滤处理，返回slots

function resolveSlots (
    children,
    context
  ) {
    if (!children || !children.length) {
      return {}
    }
    var slots = {};
    for (var i = 0, l = children.length; i < l; i++) {
      var child = children[i];
      var data = child.data;
      // remove slot attribute if the node is resolved as a Vue slot node
      if (data && data.attrs && data.attrs.slot) {
        delete data.attrs.slot;
      }
      // named slots should only be respected if the vnode was rendered in the
      // same context.
      if ((child.context === context || child.fnContext === context) &&
        data && data.slot != null
      ) {
        // 如果slot存在(slot="header") 则拿对应的值作为key
        var name = data.slot;
        var slot = (slots[name] || (slots[name] = []));
        // 如果是tempalte元素 则把template的children添加进数组中，这也就是为什么你写的template标签并不会渲染成另一个标签到页面
        if (child.tag === 'template') {
          slot.push.apply(slot, child.children || []);
        } else {
          slot.push(child);
        }
      } else {
        // 如果没有就默认是default
        (slots.default || (slots.default = [])).push(child);
      }
    }
    // ignore slots that contains only whitespace
    for (var name$1 in slots) {
      if (slots[name$1].every(isWhitespace)) {
        delete slots[name$1];
      }
    }
    return slots
}

_render渲染函数通过normalizeScopedSlots得到vm.$scopedSlots

vm.$scopedSlots = normalizeScopedSlots(
  _parentVnode.data.scopedSlots,
  vm.$slots,
  vm.$scopedSlots
);

作用域插槽中父组件能够得到子组件的值是因为在renderSlot的时候执行会传入props，也就是上述_t第三个参数，父组件则能够得到子组件传递过来的值。

三、Vue中的$nextTick有什么作用？

NextTick是什么？

官方对其的定义：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

什么意思呢？我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。

举例一下，Html结构

<div id="app"> {{ message }} </div>

构建一个vue实例

const vm = new Vue({
  el: '#app',
  data: {
    message: '原始值'
  }
})

修改message

this.message = '修改后的值1'
this.message = '修改后的值2'
this.message = '修改后的值3'

这时候想获取页面最新的DOM节点，却发现获取到的是旧值

console.log(vm.$el.textContent) // 原始值

这是因为message数据在发现变化的时候，vue并不会立刻去更新Dom，而是将修改数据的操作放在了一个异步操作队列中，如果我们一直修改相同数据，异步操作队列还会进行去重，等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新。

为什么要有nexttick？举个例子

{{num}}
for(let i=0; i<100000; i++){
    num = i
}

如果没有 nextTick 更新机制，那么 num 每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了nextTick机制，只需要更新一次，所以nextTick本质是一种优化策略。

使用场景

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()，第一个参数为：回调函数（可以获取最近的DOM结构），第二个参数为：执行函数上下文。

// 修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () {
  // DOM 更新了
  console.log(vm.$el.textContent) // 修改后的值
})

组件内使用 vm.$nextTick() 实例方法只需要通过this.$nextTick()，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上。

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
this.$nextTick(function () {
    console.log(this.$el.textContent) // => '修改后的值'
})

$nextTick() 会返回一个 Promise 对象，可以是用async/await完成相同作用的事情。

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'

实现原理

源码位置：/src/core/util/next-tick.js，callbacks也就是异步操作队列，callbacks新增回调函数后又执行了timerFunc函数，pending是用来标识同一个时间只能执行一次。

export function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;

  // cb 回调函数会经统一处理压入 callbacks 数组
  callbacks.push(() => {
    if (cb) {
      // 给 cb 回调函数执行加上了 try-catch 错误处理
      try {
        cb.call(ctx);
      } catch (e) {
        handleError(e, ctx, 'nextTick');
      }
    } else if (_resolve) {
      _resolve(ctx);
    }
  });

  // 执行异步延迟函数 timerFunc
  if (!pending) {
    pending = true;
    timerFunc();
  }

  // 当 nextTick 没有传入函数参数的时候，返回一个 Promise 化的调用
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve;
    });
  }
}

timerFunc函数定义，这里是根据当前环境支持什么方法则确定调用哪个，分别有：Promise.then、MutationObserver、setImmediate、setTimeout，通过上面任意一种方法，进行降级操作。

export let isUsingMicroTask = false
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  //判断1：是否原生支持Promise
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  //判断2：是否原生支持MutationObserver
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  //判断3：是否原生支持setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  //判断4：上面都不行，直接用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

无论是微任务还是宏任务，都会放到flushCallbacks使用，这里将callbacks里面的函数复制一份，同时callbacks置空，依次执行callbacks里面的函数。

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

小结

  1. 把回调函数放入callbacks等待执行
  2. 将执行函数放到微任务或者宏任务中
  3. 事件循环到了微任务或者宏任务，执行函数依次执行callbacks中的回调
posted @ 2022-09-05 12:03  来亦何哀  阅读(159)  评论(1)  编辑  收藏  举报