当前位置：首页 > article >正文

vue基本功

article 2025/3/11 5:58:11

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 架构。
- 支持增量渲染，即可以将渲染任务拆分为多个小任务，避免阻塞主线程。