你写过自定义指令吗？使用场景有哪些？
分析
这是一道API题，我们可能写的自定义指令少，但是我们用的多呀，多举几个例子就行。
体验
定义一个包含类似组件生命周期钩子的对象，钩子函数会接收指令挂钩的dom元素：
const focus = { mounted: (el) => el.focus() } export default { directives: { // enables v-focus in template focus } } <input v-focus />
<input v-focus />
思路
- 定义
- 何时用
- 如何用
- 常用指令
- vue3变化
回答范例
- Vue有一组默认指令，比如
v-model或v-for，同时Vue也允许用户注册自定义指令来扩展Vue能力 - 自定义指令主要完成一些可复用低层级DOM操作
- 使用自定义指令分为定义、注册和使用三步：
- 定义自定义指令有两种方式：对象和函数形式，前者类似组件定义，有各种生命周期；后者只会在mounted和updated时执行
- 注册自定义指令类似组件，可以使用app.directive()全局注册，使用{directives:{xxx}}局部注册
- 使用时在注册名称前加上v-即可，比如v-focus
- 我在项目中常用到一些自定义指令，例如：
- 复制粘贴 v-copy
- 长按 v-longpress
- 防抖 v-debounce
- 图片懒加载 v-lazy
- 按钮权限 v-premission
- 页面水印 v-waterMarker
- 拖拽指令 v-draggable
- vue3中指令定义发生了比较大的变化，主要是钩子的名称保持和组件一致，这样开发人员容易记忆，不易犯错。另外在v3.2之后，可以在setup中以一个小写v开头方便的定义自定义指令，更简单了！
知其所以然
编译后的自定义指令会被withDirective函数装饰，进一步处理生成的vnode，添加到特定属性中。
说下listeners的使用场景
分析
API考察，但$attrs和listeners已经移除，还是有细节可说的。
思路
- 这两个api的作用
- 使用场景分析
- 使用方式和细节
- vue3变化
体验
一个包含组件透传属性的对象。
An object that contains the component's fallthrough attributes.
<template> <child-component v-bind="$attrs"> 将非属性特性透传给内部的子组件 </child-component> </template>
范例
- 我们可能会有一些属性和事件没有在props中定义，这类称为非属性特性，结合v-bind指令可以直接透传给内部的子组件。
- 这类“属性透传”常常用于包装高阶组件时往内部传递属性，常用于爷孙组件之间传参。比如我在扩展A组件时创建了组件B组件，然后在C组件中使用B，此时传递给C的属性中只有props里面声明的属性是给B使用的，其他的都是A需要的，此时就可以利用v-bind="$attrs"透传下去。
- 最常见用法是结合v-bind做展开；$attrs本身不是响应式的，除非访问的属性本身是响应式对象。
- vue2中使用attrs中，使用起来更简单了。
原理
查看透传属性foo和普通属性bar，发现vnode结构完全相同，这说明vue3中将分辨两者工作由框架完成而非用户指定：
<template> <h1>{{ msg }}</h1> <comp foo="foo" bar="bar" /> </template>
<template> <div> {{$attrs.foo}} {{bar}} </div> </template> <script setup> defineProps({ bar: String }) </script>
_createVNode(Comp, { foo: "foo", bar: "bar" })
v-once的使用场景有哪些？
分析
v-once是Vue中内置指令，很有用的API，在优化方面经常会用到，不过小伙伴们平时可能容易忽略它。
体验
仅渲染元素和组件一次，并且跳过未来更新
Render the element and component once only, and skip future updates.
<!-- single element --> <span v-once>This will never change: {{msg}}</span> <!-- the element have children --> <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> <!-- component --> <my-component v-once :comment="msg"></my-component> <!-- `v-for` directive --> <ul> <li v-for="i in list" v-once>{{i}}</li> </ul>
思路
v-once是什么- 什么时候使用
- 如何使用
- 扩展
v-memo - 探索原理
回答范例
v-once是vue的内置指令，作用是仅渲染指定组件或元素一次，并跳过未来对其更新。- 如果我们有一些元素或者组件在初始化渲染之后不再需要变化，这种情况下适合使用
v-once，这样哪怕这些数据变化，vue也会跳过更新，是一种代码优化手段。 - 我们只需要作用的组件或元素上加上v-once即可。
- vue3.2之后，又增加了
v-memo指令，可以有条件缓存部分模板并控制它们的更新，可以说控制力更强了。 - 编译器发现元素上面有v-once时，会将首次计算结果存入缓存对象，组件再次渲染时就会从缓存获取，从而避免再次计算。
知其所以然
下面例子使用了v-once：
<script setup> import { ref } from 'vue' const msg = ref('Hello World!') </script> <template> <h1 v-once>{{ msg }}</h1> <input v-model="msg"> </template>
我们发现v-once出现后，编译器会缓存作用元素或组件，从而避免以后更新时重新计算这一部分：
// ... return (_ctx, _cache) => { return (_openBlock(), _createElementBlock(_Fragment, null, [ // 从缓存获取vnode _cache[0] || ( _setBlockTracking(-1), _cache[0] = _createElementVNode("h1", null, [ _createTextVNode(_toDisplayString(msg.value), 1 /* TEXT */) ]), _setBlockTracking(1), _cache[0] ), // ...
什么是递归组件？举个例子说明下？
分析
递归组件我们用的比较少，但是在Tree、Menu这类组件中会被用到。
体验
组件通过组件名称引用它自己，这种情况就是递归组件。
An SFC can implicitly refer to itself via its filename.
<template> <li> <div> {{ model.name }}</div> <ul v-show="isOpen" v-if="isFolder"> <!-- 注意这里：组件递归渲染了它自己 --> <TreeItem class="item" v-for="model in model.children" :model="model"> </TreeItem> </ul> </li> <script> export default { name: 'TreeItem', // ... } </script>
思路
- 下定义
- 使用场景
- 使用细节
- 原理阐述
回答范例
- 如果某个组件通过组件名称引用它自己，这种情况就是递归组件。
- 实际开发中类似Tree、Menu这类组件，它们的节点往往包含子节点，子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构，这种都是使用递归组件的典型场景。
- 使用递归组件时，由于我们并未也不能在组件内部导入它自己，所以设置组件
name属性，用来查找组件定义，如果使用SFC，则可以通过SFC文件名推断。组件内部通常也要有递归结束条件，比如model.children这样的判断。 - 查看生成渲染函数可知，递归组件查找时会传递一个布尔值给
resolveComponent，这样实际获取的组件就是当前组件本身。
知其所以然
递归组件编译结果中，获取组件时会传递一个标识符 _resolveComponent("Comp", true)
const _component_Comp = _resolveComponent("Comp", true)
就是在传递maybeSelfReference
export function resolveComponent( name: string, maybeSelfReference?: boolean ): ConcreteComponent | string { return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name }
resolveAsset中最终返回的是组件自身：
if (!res && maybeSelfReference) { // fallback to implicit self-reference return Component }
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/helpers/resolveAssets.ts#L22-L23
异步组件是什么？使用场景有哪些？
分析
因为异步路由的存在，我们使用异步组件的次数比较少，因此还是有必要两者的不同。
体验
大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们。
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed.
import { defineAsyncComponent } from 'vue' // defineAsyncComponent定义异步组件 const AsyncComp = defineAsyncComponent(() => { // 加载函数返回Promise return new Promise((resolve, reject) => { // ...可以从服务器加载组件 resolve(/* loaded component */) }) }) // 借助打包工具实现ES模块动态导入 const AsyncComp = defineAsyncComponent(() => import('./components/MyComponent.vue') )
思路
- 异步组件作用
- 何时使用异步组件
- 使用细节
- 和路由懒加载的不同
范例
- 在大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们。
- 我们不仅可以在路由切换时懒加载组件，还可以在页面组件中继续使用异步组件，从而实现更细的分割粒度。
- 使用异步组件最简单的方式是直接给defineAsyncComponent指定一个loader函数，结合ES模块动态导入函数import可以快速实现。我们甚至可以指定loadingComponent和errorComponent选项从而给用户一个很好的加载反馈。另外Vue3中还可以结合Suspense组件使用异步组件。
- 异步组件容易和路由懒加载混淆，实际上不是一个东西。异步组件不能被用于定义懒加载路由上，处理它的是vue框架，处理路由组件加载的是vue-router。但是可以在懒加载的路由组件中使用异步组件。
知其所以然
defineAsyncComponent定义了一个高阶组件，返回一个包装组件。包装组件根据加载器的状态决定渲染什么内容。
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/apiAsyncComponent.ts#L43-L44
