Vue3 | Brooks的博客

# vue3面试题汇总

# 1.vue3的编译流程？

模板解析：Vue3使用了compiler-sfc和vue-template-compiler将模板字符串编译成渲染函数，这些函数负责创建虚拟dom节点并插入到真实的dom中；
静态树优化：Vue3引入了静态树优化，它会检查模板中的静态节点，并将它们与动态节点分开处理，这样可以减少虚拟dom的更新范围，提高渲染性能；
响应式系统：Vue3使用的全新的响应式系统，基于es2015中的proxy对象实现的，这个新的响应式系统比vue2基于object.defineProperty的响应式系统更高效
编译优化：Vue3引入了编译时优化，例如静态提升（hoisting）和动态属性（patch flag），这些优化可以减少渲染过程中的计算量，提高渲染性能
更新策略：Vue 3 使用更高效的更新策略，它会将多个数据更新批量进行，避免频繁的dom更新，这可以提高渲染性能，特别是大型应用程序中，
生命周期钩子：Vue3 引入了新的生命周期钩子，例如onBeforeMount和onBeforeUnmount，同时，vue3将beforeDestroy和destroyed生命周期钩子重命名为onBeforeUnmount和onUnmounted，以保持一致性；
Compositon API: Vue3 引入了Compositon API,它提供了更灵活的组件编写方式，使得组件逻辑更加易于组织和复用

# 2.vue3内的宏是什么？

它是指vue3中一种特殊的语法结构，它是vue3一个重要的特性之一，
宏是一种在编译时期就能执行的代码，它可以在编译时期生成一些代码，这些代码可以在运行时期被执行，
在vue3中，宏可以生成一些代码，这些代码可以在运行时期杯被执行，例如，vue3中的v-for指令就是一个宏，它可以在编译时期生成一些代码，这些代码可以在运行时期被执行，从而实现列表渲染的功能，
总体来说，vue3中的宏是一个非常强大的特性，它可以帮助开发者更好的控制代码的生成和执行，从而提高代码的可读性和可维护性！

# 3. `<script setup/>` 的实现原理？

<script setup/>Vue3中的一种新的语法特性,它是一种新的组织和编写vue组件的方式，
<script setup/>的实现原理是基于vue3点compostion api ,它是vue3中的一种新API,用于组织和编写vue组件，在<script setup/>中，开发者可以使用compostion api中的ref、reactive、computed等函数来定义组件等状态和计算属性，并使用watch函数来监听状态的变化，此外，开发者还可以使用provide和inject函数来实现组件之间的通信，在编译时期，vue3会将<script setup/>中的代码转化为一个新的组件，并将其注入组件的上下文中，这个新的组件可以在运行时期被实例化，并在组件的生命周期中执行相应的代码，

# 4.组件实例是什么？

vue3中的组件实例是指在vue3中创建一个vue组件的实例对象，
当我们在vue3中定一个组件的时候，我们需要创建一个vue组件的实例对象，并将其挂载在dom元素上，这个实例对象就是组件实例，
组件实例是vue3中一个重要的概念，它包含了组件的一些重要f属性和方法，例如$data、$props、$el、$watch等，这些属性和方法可以在组件的生命周期中使用和访问，从而实现组件的一些特殊功能。

# 5.启动程序的时候，vue3单文件组件的初始化流程？

vue3单文件组件的初始化流程是指在vue3中，从启动程序到加载和初始化一个单文件组件所经历的一些列步骤，
在vue3中，当我们启动程序的时候，会执行一下步骤；

加载文件入口：程序会首先加载入口文件，通常是main.js或main.ts文件
创建Vue根实例：在入口文件中，我们需要创建一个Vue根实例，并将其挂载到DOM元素上

```
const app = createApp(App);
app.mount('#app');
在这个例子中，我们使用createApp函数创建了一个Vue应用实例app，并将其挂载到DOM元素#app上。
```

加载组件：当Vue根实例被创建并挂载到DOM元素上后，Vue会开始加载组件。如果我们在App.vue文件中定义了一个单文件组件，Vue会加载并解析这个组件
解析组件：在加载组件后，Vue会解析组件的模板、脚本和样式等内容。对于单文件组件来说，Vue会使用Webpack等构建工具将组件的模板、脚本和样式合并成一个JavaScript模块
创建组件实例：在解析组件后，Vue会创建一个组件实例，并将其挂载到DOM元素上。在这个过程中，Vue会初始化组件的状态、计算属性、方法等，并将它们注入到组件的上下文中
渲染组件：在创建组件实例并将其挂载到DOM元素上后，Vue会开始渲染组件。Vue会将组件的模板编译成虚拟DOM节点，并将这些虚拟DOM节点渲染到页面上。
总体来说，Vue3单文件组件的初始化流程是一个复杂的过程，涉及到组件的加载、解析、创建实例、渲染等多个步骤。但是，Vue3的优化和构建工具的帮助可以让这个过程更加高效和快速。

# 6.createApp()，mount()做了什么工作？

createApp()和，mount()是vue3中的2个重要的方法，他们创建和挂载vue应用的时候起到了关键的作用，

1.createApp()方法： createApp()用于创建一个vue应用示例，在这个方法中，vue会初始化一些全局配置。例如插件、mixin等，并且返回一个应用实例；
在调用createApp()方法等时候，我们需要传入一个根组件，作为一个整应用的入口，例如

 import { createApp } from 'vue';
 import App from './App.vue';
 const app = createApp(App);
 #在这个例子中，我们导入了根组件App.vue，并将其传入createApp()方法中，创建了一个Vue应用实例app。

1
2
3
4

mount()方法： createApp()方法用于将创建好的Vue应用实例挂载到DOM元素上。在这个方法中，Vue会将根组件渲染到页面上，并将其与数据和方法绑定起来。
在调用mount()方法时，我们需要传入一个DOM元素的选择器，作为应用的挂载点。例如：，例如

```
  app.mount('#app');
  #在这个例子中，我们将Vue应用实例app挂载到DOM元素#app上。
```

总体来说，createApp()和mount()方法是Vue3中创建和挂载Vue应用的关键方法。通过这两个方法，我们可以轻松地创建和管理Vue应用，实现组件的渲染和交互。

# 7.组件的生命周期？

beforeCreate:在组件实例创建之前，此时组件的数据观察和事件配置尚未完成，不能访问的到组件的methods和data属性，
created:在组件实例创建之后执行，此时组件的数据观察和事件配置已经完成，可以访问到组件的methods和data属性。
beforeMount:在组件的模板被编译并挂载到dom之前执行。
mounted：在组件的模板被编译并挂载到dom之后执行，此时组件已经完成渲染，可以访问到dom元素。
beforeUpdate:在组件的数据发生变化并触发重新渲染之前执行，此时组件的dom元素尚未更新。
updated：在组件的数据发生变化并触发重新渲染之后执行，此时的dom元素已经更新
beforeUnmount：在组件被卸载之前执行
unmounted：在组件卸载之后执行，此时组件已经从dom中移除。在Vue3中，我们可以使用onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted这些钩子函数来监听组件的生命周期事件

# 8.什么是虚拟DOM？diff算法？就地复用？

虚拟DOM（Virtual DOM）:是一种用于描述真实DOM结构的JavaScript对象。它通过将DOM结构转换为JavaScript对象，可以在内存中对其进行操作，而不需要直接操作真正的DOM。虚拟DOM的主要优点是它的创建和更新速度比实际DOM快得多，因此可以大大提高渲染性能。

diff算法:是一种用于比较两个虚拟DOM结构之间的差异的高效算法。它可以快速找到两个虚拟DOM结构中的不同之处，并只更新这些不同的部分，从而减少DOM操作的次数，提高渲染性能。在Vue.js等前端框架中，diff算法用于在数据更新时自动更新DOM。

就地复用是指在更新DOM时，尽可能地复用已经存在的DOM节点，而不是创建新的DOM节点。这样可以避免频繁创建和销毁DOM节点，从而提高渲染性能。在Vue.js等前端框架中，就地复用可以通过虚拟DOM和diff算法来实现，从而减少DOM操作的次数，提高渲染性能。

总结一下，虚拟DOM和diff算法是前端框架中用于优化渲染性能的重要技术。虚拟DOM通过将DOM结构转换为JavaScript对象，可以在内存中对其进行操作，而不需要直接操作真正的DOM。diff算法用于比较两个虚拟DOM结构之间的差异，并只更新不同的部分，从而减少DOM操作的次数。就地复用则避免频繁创建和销毁DOM节点，进一步提高渲染性能。

# 9. 任务调度系统？

任务调度系统是一种用于管理和调度任务的软件系统，它的主要功能是自动执行预定的任务，并按照预先设定的规则和优先级来进行调度，任务调度系统通常用于自动化流程、批量处理、异步处理等场景可以提高任务的执行效率和管理效率。
在操作系统中，任务调度系统时必不可少的组成部分，它负责分配cpu资源，调度任务执行，管理任务队列等操作，以确保系统等稳定运行和高性能，任务调度系统采用优先级、轮询调度、时间调度等算法来进行任务调度。
在现代软件开发中，任务调度系统也被广泛应用，例如:Hadoop MapReduce、RabbitMQ、Kafka等分布式系统和消息队列都使用了任务调度系统来管理和调度任务，通过任务调度系统。开发人员可以更好的控制任务的执行顺序和资源分配，从而提高应用程序的性能和可扩展性

# 10.异步刷新是什么？怎么实现的？

vue3引入了一种新的异步刷新策略，称为异步渲染，这种策略可以将dom的更新放入一个队列中，并在一定的时间内批量执行，从而提高渲染

具体来说，vue3的异步渲染实现了以下几个方面：

异步更新队列：vue3引入了一种全局的异步更新队列，用于存储需要更新的组件，当组件需要更新时，会将其放入更新队列中，而不是立即更新；
异步渲染：vue3使用了一种基于树形的异步渲染策略，在更新队列中的组件会被分为不同的优先级，然后按照优先级顺序进行渲染，这种策略可以确保重要的组件先更新，而不是立即更新。
异步执行：vue3使用了一种基于任务调度的异步执行策略，在更新队列中的任务会被分为不同的优先级，然后按照优先级顺序执行，这种策略可以确保高优先级的任务先执行，从而提套渲染性能
异步dom更新：vue3使用了一种基于批量更新的异步dom更新策略，在更新队列中的组件会被合并成一个更新操作，然后一次性更新dom，这种策略可以减少dom的操作的次数，从而提高渲染性能；

# 11.nextTick()的实现原理？

Vue 3的nextTick()方法用于在下一个DOM更新周期后执行一个回调函数。它的实现原理基于Promise和Microtasks。 Vue 3的nextTick()方法使用了一个基于"宏任务"和"微任务"的实现方式。当调用nextTick()方法时，它会将传入的回调函数放入一个队列中，并在下一个DOM更新周期后执行这些回调函数。具体实现步骤如下：

在nextTick()方法中，首先将传入的回调函数传入一个队列中，
然后，使用Promise.resolve()方法创建一个新的promise对象并将该对象的回调函数放入微任务队列中。
在微任务的队列的回调函数中，执行队列中的所有回调函数。
最后，在下一个dom更新周期后，执行nextTick()方法中传入的回调函数。

# 12.有哪三种Effect？作用？

Vue 3引入了一种新的异步渲染策略，称为异步渲染。这种策略可以将DOM的更新操作放入一个队列中，并在一定时间内批量执行，从而提高渲染性能。

有三种不同类型的Effect：

异步Effect:这种Effect将用于将dom的更新操作放入一个队列中，并在一定的时间内批量执行，它的作用是提高渲染性能，从而提高用户体验，
同步Effect:这种Effect用于将dom更新后立即执行一些操作，例如更新样式或属性，它的作用是确保dom的更新操作能够立即执行，从而实现实时更新的效果。
混合Effect: 这种Effect是异步Effect和同步Effect的组合，用于在dom更新后执行一些操作，例如更新样式或属性，并在一定的时间内批量执行dom的更新操作，它的作用是提高渲染性能，同时确定dom的更新操作能够立即执行，从而实现实时更新的效果。

# 13.watch()，watchEffect()，computed()的区别？

watch():用于监听一个或者多个数据的变化，并在数据发生变化的时执行某个函数，与计算属性不同，watch可以监听数据的变化，但是不会自动计算新值，此外，watch可以监听整个应用的状态变化，而计算属性只能监听当前组件的状态变化。
computed()：用于创建计算属性，他可以根据其他数据（如data或其他计算属性）的变化自动重新计算，计算属性是只读的，无法修改，它们有一个特点是缓存，只有当依赖的数据发生变化的时候，计算属性才会重新计算
watchEffect()：是vue3新增的一个方法，用于监听数据变化并自动执行副作用函数，它类似于vue2中的watch和，computed的结合体，，computed会自动收集响应式依赖，并在依赖项改变时自动重新执行副作用函数。

# 14.响应式编程的实现原理？

在 Vue 3 中，响应式编程的核心是基于 Proxy 和 Reflect 的响应式系统。以下是 Vue 3 响应式编程实现原理的简要概述：

reactive()函数用于创建响应式对象。它接收一个普通的 JavaScript 对象，并返回一个响应式代理对象。响应式代理对象会使用 Proxy 对象进行包装，使得对对象属性的访问和修改都被代理拦截。
ref() 函数用于创建一个响应式的引用，它将一个值包装为一个响应式对象。ref() 主要用于基本数据类型（如 String、Number、Boolean）的响应式处理。
computed() 函数用于创建计算属性。计算属性是基于依赖项的值的变化自动重新计算的属性。计算属性是只读的，无法修改。
watch() 函数用于监听一个或多个响应式数据的变化，并在数据发生变化时执行某个函数。
响应式系统的实现原理： Vue 3 的响应式系统基于 ES2015 的 Proxy 和 Reflect API。当使用 reactive() 创建一个响应式对象时，Vue 3 会为对象的每个属性创建一个 Proxy 代理。Proxy 对象用于拦截对对象属性的访问和修改操作。当使用 ref() 创建一个响应式引用时，Vue 3 会为这个值创建一个包含 value 属性的对象，并返回这个对象。这样，我们可以在访问和修改该值时使用 obj.value 的形式。对于计算属性，Vue 3 使用了一个名为 effect() 的函数来处理依赖关系。effect() 函数会在计算属性被访问时收集依赖，并在依赖项发生变化时触发重新计算。总之，Vue 3 的响应式编程实现原理主要基于 Proxy 和 Reflect API，通过对对象属性的代理拦截以及依赖收集和触发机制实现数据响应式。这使得 Vue 3 能够在数据变化时自动更新视图，同时保持了良好的性能表现。

# 15.ref()和reactive()的区别？

ref() 函数主要用于将基本数据类型（如 String、Number、Boolean）转换为响应式对象。使用 ref() 创建的响应式引用对象包含一个名为 value 的属性，用于访问和修改该值。
reactive() 函数用于将普通 JavaScript 对象转换为响应式对象。使用 reactive() 创建的响应式对象是一个代理对象，它的属性可以直接访问和修改。

总结：
ref() 主要用于将基本数据类型转换为响应式对象，返回的响应式引用对象包含一个 value 属性。

reactive() 主要用于将普通 JavaScript 对象转换为响应式对象，返回的响应式对象是一个代理对象，可以直接访问和修改属性。
在 Vue 3 中，如果你需要处理基本数据类型，建议使用 ref()；如果你需要处理复杂对象（如包含多个属性的对象），建议使用 reactive()。这样可以确保你的数据在变化时能够触发视图更新，从而保持视图和数据的同步。

# 16.ref()和ref(null)的区别？

在 Vue 3 中，ref() 函数用于获取对一个组件或元素的引用，以便在组件外部直接访问它。ref() 函数的调用方式如下：

const myRef = ref(null);

这里的 null 参数表示初始值，它可以是任何类型的值。当组件挂载时，Vue 会自动将 myRef 的值设置为对应的 DOM 元素或组件实例。

然而，在 Vue 3 的 Composition API 中，ref() 函数的用法略有不同。在这种情况下，ref() 函数用于创建一个响应式引用对象，而不是获取组件或元素的引用。这意味着，在 Vue 3 的 Composition API 中，我们不再需要使用 ref(null)。

总之，ref() 和 ref(null) 的区别主要在于它们在不同版本的 Vue 中的用法。在 Vue 2 中，ref() 用于获取组件或元素的引用；而在 Vue 3 的 Composition API 中，ref() 用于创建响应式引用对象。

# 17.attrs和props的区别？

在 Vue 3 中，props 和 attrs 都是用于处理组件接收的外部数据，但它们之间有一些关键区别：

props 是 Vue 组件接收外部传入数据的一种方式。当一个组件被实例化时，props 对象会包含所有被传递给该组件的属性。组件内部可以直接访问 props 对象中的属性。

<!-- 父组件 --><template>
  <ChildComponent :message="parentMessage" />
  </template><script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        parentMessage: 'Hello from parent'
      };
    }
  };
  </script>

  <!-- 子组件 --><template>
      <div>{{ message }}</div>
    </template><script>
    export default {
      props: {
        message: String
      }
    };
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

attrs 是 Vue 3 中的一个新特性，它包含了组件接收的所有非 props 属性。attrs 对象中的属性是只读的，不能在组件内部直接修改。如果需要修改 attrs 中的属性，需要使用 props 接收。

<!-- 父组件 -->
<template>
  <ChildComponent custom-attribute="value" />
</template>

<!-- 子组件 --><template>
  <div>{{ attrs.customAttribute }}</div>
  </template><script>
  import { defineComponent } from 'vue';

  export default defineComponent({
    setup(props, { attrs }) {
      console.log(attrs.customAttribute); // 输出：value
    }
  });
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

总结：

props 是 Vue 组件接收外部传入数据的正常方式，可以在组件内部直接访问和修改。
attrs 是 Vue 3 中的新特性，包含了组件接收的所有非 props 属性。attrs 对象中的属性是只读的，不能在组件内部直接修改

在 Vue 3 中，为了保持向后兼容性，Vue 提供了 attrs 选项，允许我们在 Vue 2 的组件中使用 attrs。在 Vue 3 的 Composition API 中，我们可以通过 setup() 函数的第二个参数 context 来访问 attrs。

import { defineComponent } from 'vue';
export default defineComponent({
  setup(props, { attrs }) {
    console.log(attrs.customAttribute); // 输出：value
  }
});

1
2
3
4
5
6

# 18.provide和inject实现原理？

Vue 3 中的 provide 和 inject 是一种依赖注入机制，它们允许我们在组件树中传递数据，而无需通过 props 进行逐层传递。provide 用于提供数据，而 inject 用于注入数据。
原理：

provide 函数是一个组件选项，用于向子孙组件提供数据。它接收一个对象作为参数，该对象包含要提供的数据。

  export default {
    provide() {
      return {
        message: 'Hello from parent'
      };
    }
  };

1
2
3
4
5
6
7

当一个组件使用 provide 选项时，Vue 会将该组件的实例添加到一个全局的 provides 对象中。provides 对象包含所有使用 provide 选项的组件实例，以及它们提供的数据。 2. inject 函数是一个组件选项，用于注入由父组件提供的数据。它接收一个数组或对象作为参数，该数组或对象包含要注入的数据的键。

  export default {
  inject: ['message']
  };

1
2
3

当一个组件使用 inject 选项时，Vue 会在组件实例上添加一个 $inject 属性，该属性包含所有注入的数据。

在组件渲染时，Vue 会将 provides 对象和 inject 选项进行匹配，找到与 inject 选项匹配的数据，并将其注入到组件实例上。

总结：

provide 函数用于向子孙组件提供数据，它将组件实例和提供的数据添加到全局的 provides 对象中。
inject 函数用于注入由父组件提供的数据，它将在组件实例上添加一个 $inject 属性，该属性包含所有注入的数据。
Vue 在组件渲染时将 provides 对象和 inject 选项进行匹配，找到与 inject 选项匹配的数据，并将其注入到组件实例上。

需要注意的是，provide 和 inject 的实现原理与 Vue 2 中的类似，但在 Vue 3 中，它们的使用方式有所不同。在 Vue 3 中，provide 和 inject 都是组件选项，而不是 Vue 实例的属性。此外，Vue 3 中的 inject 选项现在支持响应式数据，这意味着当注入的数据发生变化时，依赖该数据的组件将自动更新。

# 19.emit()的实现原理？

Vue 3 中的 emit() 函数用于在组件内部触发自定义事件。它是 Vue 3 中的一个内置函数，用于替代 Vue 2 中的 $emit 函数。

以下是 Vue 3 中 emit() 函数的实现原理：

emit() 函数的定义：

emit() 函数是在 Vue 3 的 setup() 函数中调用的。它接收两个参数：第一个参数是事件名，第二个参数是要传递给事件监听器的数据。

import { emit } from 'vue';

export default {
  setup(props, { emit }) {
    function handleClick() {
      emit('custom-event', 'Hello from child');
    }
  }
};

1
2
3
4
5
6
7
8
9

事件监听器的定义：在父组件中，我们可以使用 v-on 指令或 @ 缩写来定义事件监听器。事件监听器的名称应与子组件中触发的事件名相同。

<!-- 父组件 -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出：Hello from child
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

事件派发：当子组件中的事件被触发时，Vue 会在父组件中找到与该事件名匹配的事件监听器，并执行该监听器的回调函数。

总结：

emit() 函数是 Vue 3 中的一个内置函数，用于在组件内部触发自定义事件。
事件监听器是在父组件中定义的，用于响应子组件触发的自定义事件。
当子组件中的事件被触发时，Vue 会在父组件中找到与该事件名匹配的事件监听器，并执行该监听器的回调函数。

需要注意的是，Vue 3 中的 emit() 函数与 Vue 2 中的 $emit 函数有所不同。在 Vue 2 中，$emit 函数是 Vue 实例的一个方法，而在 Vue 3 中，emit() 函数是在 setup() 函数中调用的。此外，Vue 3 中的 emit() 函数支持响应式数据，这意味着当事件数据发生变化时，依赖该数据的组件将自动更新。

# 20.单向数据流的原因？

Vue 3 中的单向数据流是指数据从父组件流向子组件的过程。这种数据流的设计有助于提高应用程序的可维护性和可预测性。

以下是 Vue 3 中单向数据流的原因：

可维护性：单向数据流使得数据的传递变得更加清晰和直观。数据从父组件流向子组件，这样可以更容易地追踪数据的来源和去向。此外，由于数据只能从父组件流向子组件，因此可以避免子组件直接修改父组件的状态，从而减少了应用程序的复杂性。
可预测性：单向数据流使得数据的传递变得更加可预测。由于数据只能从父组件流向子组件，因此可以预测数据的传递路径和顺序。这有助于提高应用程序的可预测性，从而使得开发人员更容易理解和维护应用程序。
易于调试：单向数据流使得调试变得更加简单。由于数据只能从父组件流向子组件，因此可以更容易地识别和定位数据传递过程中的问题。此外，由于 Vue 3 中的响应式系统，当数据发生变化时，Vue 会自动更新依赖该数据的组件，从而使得调试变得更加简单。
易于测试：单向数据流使得测试变得更加简单。由于数据只能从父组件流向子组件，因此可以更容易地对组件进行单元测试和集成测试。此外，由于 Vue 3 中的响应式系统，可以更容易地模拟和测试数据的变化。

总结：

Vue 3 中的单向数据流使得数据的传递变得更加清晰和直观。
单向数据流使得数据的传递变得更加可预测。
单向数据流使得调试和测试变得更加简单。
Vue 3 中的响应式系统使得数据的传递和变化更加容易处理。

需要注意的是，虽然 Vue 3 中的单向数据流有助于提高应用程序的可维护性和可预测性，但在某些情况下，我们可能需要使用其他数据流方式，例如双向数据绑定或者使用 Vuex 进行状态管理。

# 21.模板的编译流程？在什么时候编译？

Vue 3 的模板编译流程是将模板字符串转换为虚拟 DOM 渲染函数的过程。编译过程主要包括三个阶段：预编译、编译和渲染。

预编译：预编译是将模板字符串转换为抽象语法树（AST）的过程。在这个阶段，Vue 会解析模板中的指令、插值、事件监听器等，并将它们转换为 AST 节点。预编译的结果是一个静态的 JavaScript 对象，称为渲染函数。
编译：编译是将预编译生成的渲染函数转换为可执行的 JavaScript 代码的过程。在这个阶段，Vue 会将渲染函数中的 AST 节点转换为 JavaScript 代码，以便在运行时执行。编译的结果是一个可执行的渲染函数，它可以接收组件的上下文作为参数，并返回一个虚拟 DOM 节点。
渲染：渲染是将虚拟 DOM 节点转换为真实 DOM 节点的过程。在这个阶段，Vue 会将渲染函数返回的虚拟 DOM 节点转换为真实 DOM 节点，并将其插入到页面中。

在什么时候编译：
在 Vue 3 中，模板的编译是在组件实例化时进行的。当组件被实例化时，Vue 会首先对组件的模板进行预编译，然后将预编译生成的渲染函数编译为可执行的 JavaScript 代码。最后，在组件的生命周期钩子函数中，Vue 会调用渲染函数来渲染组件。

需要注意的是，Vue 3 中的模板编译是在运行时进行的，这意味着在开发环境下，每次组件实例化时都会进行编译。在生产环境下，Vue 会将编译结果缓存起来，以提高性能。

总结：

Vue 3 的模板编译流程包括预编译、编译和渲染三个阶段。
预编译是将模板字符串转换为抽象语法树（AST）的过程。
编译是将预编译生成的渲染函数转换为可执行的 JavaScript 代码的过程。
渲染是将虚拟 DOM 节点转换为真实 DOM 节点的过程。
在 Vue 3 中，模板的编译是在组件实例化时进行的。

# 22.组件的注册是什么？

Vue 3 的组件注册是将组件定义注册到全局或局部的过程。组件注册后，可以在模板中使用该组件。

Vue 3 提供了两种组件注册方式：全局注册和局部注册。

1.全局注册：全局注册是将组件注册到整个应用程序中，以便在任何组件中都可以使用该组件。全局注册的方法是在创建 Vue 实例时，使用 app.component() 方法将组件定义注册到全局。

例如，假设我们有一个名为 MyComponent 的组件，可以使用以下代码将其全局注册：

  import { createApp } from 'vue';
  import MyComponent from './MyComponent.vue';

  const app = createApp();
  app.component('my-component', MyComponent);

1
2
3
4
5

在这个例子中，我们首先导入了 MyComponent 组件，然后使用 app.component() 方法将其注册到全局。注册后，我们可以在任何组件的模板中使用 <my-component> 标签来引用该组件。

局部注册：局部注册是将组件注册到当前组件的子组件中，以便在当前组件的子组件中使用该组件。局部注册的方法是在当前组件的 components 选项中定义组件。

例如，假设我们有一个名为 MyComponent 的组件，可以使用以下代码将其局部注册：

  import { defineComponent } from 'vue';
  import MyComponent from './MyComponent.vue';

  export default defineComponent({
    components: {
      'my-component': MyComponent
    }
  });

1
2
3
4
5
6
7
8

在这个例子中，我们首先导入了 MyComponent 组件，然后在当前组件的 components 选项中定义了该组件。注册后，我们可以在当前组件的子组件中使用 <my-component> 标签来引用该组件。

总结：

Vue 3 的组件注册是将组件定义注册到全局或局部的过程。
全局注册是将组件注册到整个应用程序中，以便在任何组件中都可以使用该组件。
局部注册是将组件注册到当前组件的子组件中，以便在当前组件的子组件中使用该组件。
组件注册后，可以在模板中使用该组件。

# 23.指令的实现原理？

Vue 3 的指令是一种特殊的属性，用于将组件的状态与 DOM 进行绑定。指令的实现原理是通过在组件的生命周期钩子函数中对 DOM 进行操作，以实现数据与视图之间的同步更新。

Vue 3 提供了一些内置的指令，例如 v-model、v-if、v-for 等。这些指令的实现原理是通过在组件的生命周期钩子函数中对 DOM 进行操作，以实现数据与视图之间的同步更新。

例如，v-model 指令的实现原理是在组件的 created 生命周期钩子函数中，将组件的状态与 DOM 进行绑定。在 created 生命周期钩子函数中，Vue 会使用 Object.defineProperty() 方法将组件的状态与 DOM 进行绑定。这样，当组件的状态发生变化时，Vue 会自动更新 DOM，以实现数据与视图之间的同步更新。

另外，Vue 3 还提供了自定义指令的功能，可以通过在组件的 directives 选项中定义指令来实现自定义指令。自定义指令的实现原理与内置指令类似，也是通过在组件的生命周期钩子函数中对 DOM 进行操作，以实现数据与视图之间的同步更新。

总结：

Vue 3 的指令是一种特殊的属性，用于将组件的状态与 DOM 进行绑定。
指令的实现原理是通过在组件的生命周期钩子函数中对 DOM 进行操作，以实现数据与视图之间的同步更新。
Vue 3 提供了一些内置的指令，例如 v-model、v-if、v-for 等，以及自定义指令的功能。
自定义指令的实现原理与内置指令类似，也是通过在组件的生命周期钩子函数中对 DOM 进行操作，以实现数据与视图之间的同步更新。

# 24.各种指令的区别和作用？

Vue 3 提供了一些内置的指令，用于实现数据与视图之间的同步更新。

v-model 指令用于在组件的状态与表单控件之间实现双向数据绑定。
v-if 指令用于在 DOM 中根据条件显示或隐藏元素。
v-for 指令用于在 DOM 中根据数组或对象的值重复渲染元素。
v-on 指令用于在组件中监听 DOM 事件。
v-bind 指令用于将组件的状态绑定到 DOM 元素的属性或属性。
v-show 指令用于在 DOM 中根据条件显示或隐藏元素，不同的是，它只会将元素的 display 样式设置为 none，而不会将元素从 DOM 中移除。

# 25.v-for为什么要加key？v-for为什么不能和v-if一起使用？

Vue 3 的 v-for 指令需要加 key 是因为 Vue 需要一种方式来跟踪每个节点的身份，以便在列表发生变化时，Vue 可以正确地移动和重用 DOM 节点。key 的作用是为每个列表项提供一个唯一的标识符，以便 Vue 可以识别出哪些节点需要重新渲染，哪些节点可以被重用。

Vue 3 的 v-for 指令不能和 v-if 一起使用，是因为 Vue 的渲染优化策略。在 Vue 3 中，v-for 和 v-if 的优先级是相同的，Vue 会根据指令的顺序来判断它们的执行顺序。因此，如果 v-for 和 v-if 一起使用，Vue 会先执行 v-if，然后再执行 v-for。这样会导致 Vue 在每次渲染时都需要执行 v-if 和 v-for，从而降低性能。

为了解决这个问题，Vue 3 提供了一种新的指令 v-show，它的作用是根据条件显示或隐藏元素，但不会将元素从 DOM 中移除。因此，可以使用 v-show 代替 v-if，以提高性能。
总结：

Vue 3 的 v-for 指令需要加 key，以便 Vue 可以正确地跟踪每个节点的身份。
Vue 3 的 v-for 指令不能和 v-if 一起使用，因为这会导致 Vue 在每次渲染时都需要执行 v-if 和 v-for，从而降低性能。可以使用 v-show 代替 v-if，以提高性能。

# 26.v-model的实现原理？

Vue 3 的 v-model 指令用于在组件的状态与表单控件之间实现双向数据绑定。v-model 指令的实现原理主要包括以下几个步骤：

在组件中定义一个响应式变量，用于存储表单控件的值。
在模板中使用 v-model 指令将响应式变量与表单控件绑定。
v-model 指令会在表单控件上添加 value 属性，将响应式变量的值传递给表单控件。 4.v-model 指令会在表单控件上添加 input 事件监听器，当表单控件的值发生变化时，input 事件会被触发，并调用 v-model 指5. 修改器函数会将新的值赋给响应式变量，从而实现双向数据绑定。令的修改器函数。

总结：

Vue 3 的 v-model 指令用于在组件的状态与表单控件之间实现双向数据绑定。
v-model 指令的实现原理主要包括定义响应式变量、绑定表单控件、添加 value 属性、添加 input 事件监听器和修改响应式变量的值。

    <div>
      <input type="text" v-model="inputValue" />
        <p>Input value: {{ inputValue }}</p>
      </div>
    </template><script>
    import { ref } from 'vue';

    export default {
      setup() {
        const inputValue = ref('');

        function updateInputValue(event) {
          inputValue.value = event.target.value;
        }

        return {
          inputValue,
          updateInputValue,
        };
      },
    };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 27.hook是什么？

在 Vue 3 中，Hook 是一种新的特性，它允许您在组件中使用一些封装好的功能，而无需依赖 Vue 组件实例。Hook 是一个函数，它接收一些参数（如组件的属性、状态等），并返回一个对象，该对象包含了需要暴露给组件的属性和方法。

Vue 3 提供了一些内置的 Hook，这些 Hook 可以帮助您在组件中实现不同的功能，如状态管理、生命周期管理、事件处理等。以下是一些常用的 Vue 3 Hook：

ref：创建一个响应式引用，用于访问和操作 DOM 元素或组件实例。

  import { ref } from 'vue';

  const count = ref(0);

1
2
3

reactive：创建一个响应式对象，用于跟踪对象属性的变化。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

1
2
3
4
5
6

computed：创建一个计算属性，用于根据其他属性或状态计算一个值。

  import { computed } from 'vue';

  const fullName = computed(() => {
    return `${firstName.value} ${lastName.value}`;
  });

1
2
3
4
5

watch：创建一个侦听器，用于在属性或状态发生变化时执行一些操作。

import { watch } from 'vue';

watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

1
2
3
4
5

onMounted：创建一个生命周期钩子，在组件挂载到 DOM 后执行一些操作。

import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

1
2
3
4
5

# 28.插件是什么？实现原理？

Vue 3 的插件是一种用于扩展 Vue 功能的方式，它提供了一些额外的功能或行为，可以在 Vue 应用程序中使用。插件可以通过全局安装或局部安装的方式注册到 Vue 中，然后通过 Vue 的实例或组件访问这些功能。

Vue 3 的插件实现原理主要包括以下几个方面：

定义插件：插件是一个包含导出对象的 JavaScript 模块，这些对象包含了一些函数和方法，用于扩展 Vue 的功能。插件的导出对象通常包含以下属性：

install：用于将插件注册到 Vue 中的函数。
app: 指向安装插件的应用程序实例的引用。
component: 用于将插件的组件注册到 Vue 中的函数。
directive: 用于将插件的指令注册到 Vue 中的函数。
filter: 用于将插件的过滤器注册到 Vue 中的函数。
mixin: 用于将插件的混合式对象注册到 Vue 中的函数。

安装插件：将插件导入到项目中，然后通过调用插件的 install 函数将插件注册到 Vue 中。安装插件后，插件的功能就可以在 Vue 的实例或组件中使用了。

import Vue from 'vue';
import MyPlugin from './my-plugin';

Vue.use(MyPlugin);

1
2
3
4

使用插件：注册插件后，可以通过 Vue 的实例或组件的 app、component、directive、filter、mixin 等属性访问插件的功能。

// 使用插件的组件
<template>
  <my-component></my-component>
</template>

// 在 Vue 组件中使用插件的方法
export default {
  mounted() {
    this.$component['my-plugin']().someMethod();
  },
};

1
2
3
4
5
6
7
8
9
10
11

# 29.什么是异步组件？实现原理？

Vue 3 的异步组件是一种按需加载的组件，它可以在组件实际需要时异步加载，从而提高应用程序的性能。异步组件可以通过 import() 函数动态导入，并返回一个 Promise 对象，该对象在组件加载完成后解析为组件的定义对象。

Vue 3 的异步组件实现原理主要包括以下几个方面：

使用 import() 函数动态导入组件：通过 import() 函数动态导入组件，可以将组件分割成单独的文件，从而实现按需加载。

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
);

1
2
3
4

使用 defineAsyncComponent 函数定义异步组件：通过 defineAsyncComponent 函数定义异步组件，可以将组件的加载和定义分离，从而实现按需加载。

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
);

1
2
3
4

使用 onLoad 钩子函数处理组件加载：通过 onLoad 钩子函数处理组件加载，可以在组件加载完成后执行一些操作，如设置组件的状态、显示加载提示等。

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/AsyncComponent.vue'),
  onLoad(component) {
    console.log('Component loaded:', component);
  },
});

1
2
3
4
5
6

使用 onError 钩子函数处理组件加载错误：通过 onError 钩子函数处理组件加载错误，可以在组件加载失败时执行一些操作，如显示错误提示等。

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/AsyncComponent.vue'),
  onError(error) {
    console.error('Component load error:', error);
  },
});

1
2
3
4
5
6
7

总的来说，Vue 3 的异步组件是一种按需加载的组件，它可以在组件实际需要时异步加载，从而提高应用程序的性能。异步组件可以通过 import() 函数动态导入，并使用 defineAsyncComponent 函数定义。在组件加载过程中，可以使用 onLoad 和 onError 钩子函数处理组件加载和加载错误。

# 30.前端路由是什么？什么是路由懒加载？

Vue 3 的前端路由是指在前端应用程序中实现路由功能，而不是在服务器端实现。前端路由可以通过 Vue Router 库实现，它提供了一套简单易用的 API，可以在 Vue 应用程序中实现路由功能。路由懒加载是一种前端路由的优化技术，它可以将不同路由对应的组件按需加载，从而减少首次加载的文件大小，提高应用程序的性能。路由懒加载可以通过 import() 函数动态导入组件，并在路由切换时按需加载组件。

在 Vue 3 中，可以使用 Vue Router 4 实现前端路由和路由懒加载。

以下是一个 Vue 3 的前端路由和路由懒加载的示例：


import { createRouter, createWebHistory } from 'vue-router';

const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在上面的示例中，Home 和 About 组件使用 import() 函数动态导入，并返回一个 Promise 对象，该对象在组件加载完成后解析为组件的定义对象。在路由配置中，使用 component 属性指定组件的路径。

在 Vue 应用程序中使用路由，可以在 main.js 文件中引入路由实例，并将其添加到 Vue 应用程序的根实例中。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);




app.use(router);
app.mount('#app');

1
2
3
4
5
6
7
8
9
10
11
12

在上面的示例中，使用 app.use(router) 将路由实例添加到 Vue 应用程序的根实例中。在应用程序中，可以使用<router-link>和<router-view>组件来实现路由导航和路由切换。

总的来说，Vue 3 的前端路由是指在前端应用程序中实现路由功能，而不是在服务器端实现。路由懒加载是一种前端路由的优化技术，它可以将不同路由对应的组件按需加载，从而减少首次加载的文件大小，提高应用程序的性能。在 Vue 3 中，可以使用 Vue Router 4 实现前端路由和路由懒加载。

← Vue2

# vue3面试题汇总

# 1.vue3的编译流程？

# 2.vue3内的宏是什么？

# 3. <script setup/> 的实现原理？

# 4.组件实例是什么？

# 5.启动程序的时候，vue3单文件组件的初始化流程？

# 6.createApp()，mount()做了什么工作？

# 7.组件的生命周期？

# 8.什么是虚拟DOM？diff算法？就地复用？

# 9. 任务调度系统？

# 10.异步刷新是什么？怎么实现的？

# 11.nextTick()的实现原理？

# 12.有哪三种Effect？作用？

# 13.watch()，watchEffect()，computed()的区别？

# 14.响应式编程的实现原理？

# 15.ref()和reactive()的区别？

# 16.ref()和ref(null)的区别？

# 17.attrs和props的区别？

# 18.provide和inject实现原理？

# 19.emit()的实现原理？

# 20.单向数据流的原因？

# 21.模板的编译流程？在什么时候编译？

# 22.组件的注册是什么？

# 23.指令的实现原理？

# 24.各种指令的区别和作用？

# 25.v-for为什么要加key？v-for为什么不能和v-if一起使用？

# 26.v-model的实现原理？

# 27.hook是什么？

# 28.插件是什么？实现原理？

# 29.什么是异步组件？实现原理？

# 30.前端路由是什么？什么是路由懒加载？

# 3. `<script setup/>` 的实现原理？