vue基本功

watchEffect和watch

watchEffect默认 immdiate 是 true,而且自动收集依赖
watch需要手动写依赖，immdiate 默认是 false

toRef和toRefs

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

vue3中使用vuex

import { useStore } from ‘vuex’;
通过useStore 获取Vuex store实例

nextTick

推迟到下一个 DOM 更新周期之后执行

v-show和v-if

v-show只是切换元素的CSS属性，display:none

import()和defineAsyncComponent

• 如果只需要简单的懒加载，直接使用 import() 是足够的。
• 如果需要更复杂的加载逻辑（如加载中状态、错误处理、延迟加载等），则推荐使用 defineAsyncComponent。它基于 import() 的能力，进一步封装了异步加载的逻辑，提供了更丰富的功能，如加载状态、错误处理、延迟和超时等。

什么是SFC

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC)

为什么 data 选项是一个函数

每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据

Vue 是单向数据流

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改

v-model

通过v-model实现双向绑定，注意这个跟单向数据流是两个不同的概念

beforeEnter

路由独享守卫是在单个路由配置中定义的钩子函数，它只对该路由的实例生效。路由独享守卫只有一个
在定义了全局混入后，所有 Vue 组件都会自动继承这些混入选项。例如：

mixin混入

1. 混入的合并策略

当混入对象与组件选项冲突时，Vue 会按照一定的策略合并它们：

• 数据（data）：混入的 data 会与组件的 data 合并，但组件的 data 优先级更高。
• 方法（methods）：混入的 methods 和组件的 methods 会合并，组件的同名方法会覆盖混入的方法。
• 计算属性（computed）：混入的 computed 和组件的 computed 会合并，组件的同名计算属性会覆盖混入的。
• 生命周期钩子：混入的生命周期钩子会与组件的生命周期钩子合并，按顺序依次触发。
• 其他选项：如 watch、props 等也会按照类似的方式合并。

2. 局部混入

局部混入的作用范围仅限于当前组件及其子组件，而全局混入会影响所有组件。

3. 注意事项

• 局部混入的优先级：局部混入的优先级高于全局混入，但组件自身的选项优先级最高。

强制更新

vue3中没有vue2的$forceUpdate，但可以通过一下方式实现

• 通过改变组件的 key，可以强制 Vue 重新渲染组件。<ChildComponent :key="componentKey" />

• 使用 nextTick 强制触发更新

import { nextTick } from "vue";export default {setup() {const forceUpdate = async () => {await nextTick(); // 等待 DOM 更新完成// 重新触发更新逻辑};return { forceUpdate };}
};

vue2和vue3的区别

Vue 3 与 Vue 2 的主要区别：

1. 响应式系统

• Vue 2：

  • 使用 Object.defineProperty 实现响应式系统。
  • 只能劫持对象的属性（data 中的字段），无法监听数组索引或对象属性的动态添加。

• Vue 3：

  • 使用 Proxy API 实现响应式系统，这是 ES6 提供的更强大的代理机制。
  • 能够监听对象属性的动态添加、删除，以及数组索引的变化。

2. 性能优化

• Vue 2：

  • 使用虚拟 DOM（VNode）进行渲染，但渲染逻辑相对复杂。
  • 在大规模应用中，性能可能受限于渲染效率。

• Vue 3：

  • 重构了渲染器，引入了新的 Fiber 架构，类似于 React 16 的 Fiber 架构。
  • 支持增量渲染，即可以将渲染任务拆分为多个小任务，避免阻塞主线程。

3. Composition API

4. 生命周期钩子

5. 片段（Fragments）

• Vue 2：

  • 组件必须有一个根元素。

• Vue 3：

  • 支持片段（Fragments），允许组件返回多个根节点。

6. 异步组件

• Vue 2：

  • 异步组件通过工厂函数实现，返回一个 Promise。
  • 示例：

    const AsyncComponent = () => ({component: impor