2025中国法律法规大全
40.05MB · 2025-11-13
Vue.js 是一个用于创建用户界面的开源 JavaScript 框架，它的特点如下：
通过 Object.defineProperty（Vue 2） 或 Proxy（Vue 3） 实现数据劫持，数据变化时自动更新视图，开发者无需手动操作 DOM。
通过高效的 Diff 算法比对虚拟 DOM 的变化，最小化真实 DOM 操作，提升性能。
将 UI 拆分为独立可复用的组件，每个组件包含自己的模板、逻辑和样式，通过组合组件构建复杂应用。
提供 v-if、v-for、v-bind、v-on 等指令，以声明式方式增强 HTML 的功能。
就是你可以单独用 vue 的响应式构建静态页面，如果你需要状态管理，就用官方的状态管理工具 Vuex/Pinia，如果你需要构建一个应用，有多个页面，可以用官方路由 Vue-router，如果你需要一键生成项目，可以用官方的 vue-cli 或者使用 vite 的 npm create vue@latest 命令一键创建项目。
vue 是通过数据驱动视图的，响应式指的是当数据发生变化时，使用到该数据的页面会自动更新。在表单中，可以通过响应式实现双向绑定，实现表单值和数据的双向同步。
vue2 中使用 Object.defineProperty 对对象属性进行劫持，对数组则采用重写数组的七个方法（push,shift,pop,splice,unshift,sort,reverse）来实现劫持，而 vue3 则通过 Proxy API 可以天然对对象和数组实现数据劫持。getter 中收集依赖(谁在使用这个数据)。setter 中通知所有依赖进行更新，更新页面。使用 Proxy 代替 Object.defineProperty：
length 属性的行为。Object.freeze() 冻结数据。vue 2 中需要使用 Vue.set 或 this.$set 方法。vue 2 中直接通过索引修改或修改 length 属性不会触发响应，应使用变异方法(push/pop/shift等)或 Vue.set、this.$set。响应式系统让开发者可以专注于数据逻辑，而无需手动处理 DOM 更新，大大提高了开发效率。
Vue3 源码采用 monorepo 方式进行管理，将模块拆分到packages中，这样做的好处如下：
vue2 中 Options API（即提供props、methods、data、computed、watch等属性供用户使用）的问题：
this，存在this指向问题，同时对 tree-shaking 也不友好。vue3Composition API特点：
vue3采用proxy替代了Object.defineProperty:
全量 diff 算法中采用最长递增子序列减少节点的移动。在非全量 diff 算法中只比较动态节点，通过 PatchFlag 标记更新动态的部分。
在渲染方面，vue3提供了自定义渲染器，大大提升了扩展能力。
Block和 patchFlag：为动态节点打上补丁标志，即 patchFlag，同时还提出了 block 的概念，block 本质上是一个虚拟节点，但它会多出一个 dynamicChildren 数组，会收集它所有的动态子代节点，比对的时候会忽略DOM层级结构的，所以对于带有 v-if、v-for 等结构化指令的节点也作为 block 的角色。vue2源码采用Flow做类型检测，对TypeScript支持并不友好，而Vue3采用TypeScript进行重写，对TS的支持更加友好。
虚拟DOM（Virtual DOM）就是用 js 对象来描述真实 DOM，是对真实 DOM 的抽象。
vue2：
props$emit$attrs、$listeners$parent、$children$ref作用域插槽v-modelmitt$parentvuex/piniaapp.config.globalPropertiesvuexprovide/injectevent busvue3：
propsdefineEmits$attrs$ref + defineExpose$parent作用域插槽v-modelmitt$parentvuex/piniaapp.config.globalPropertiesmittvuex/piniaprovide/inject扩展：其它通信方式：
storage。window对象。相同点：控制元素在页面是否显示。
不同点：
v-show 控制的是 css 的 display 属性是否为 none 来控制元素的是否隐藏，而 v-if 是直接不渲染 DOM 元素或者直接删除 DOM 元素。v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件，如果控制的是组件，也会执行组件的生命周期钩子；而v-show 只是简单的基于css切换。v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。v-show 会被编译成指令，条件不满足时控制样式将对应节点隐藏 （内部其他指令依旧会继续执行）。v-if 比 v-show 有更高的性能消耗。使用场景：频繁切换 + 不需要销毁状态用 v-show，反之用 v-if。
v-for 的优先级比 v-if 高，它们作用于一个节点上会导致先循环后对每一项进行判断，浪费性能。v-if 的优先级比 v-for 高，这就会导致 v-if 中的条件无法访问 v-for 作用域名中定义的变量别名。所以不管是 vue2 还是 vue3，都不推荐同时使用 v-if 和 v-for，更好的方案是采用计算属性，或者在外层再包裹一个容器元素，将 v-if 作用在容器元素上。
不推荐用：
<li v-for="item in arr" v-if="item.visible">
{{ item}}
</li>
推荐用：
<!-- visibleArr为计算属性 -->
<li v-for="item in visibleArr">
{{ item}}
</li>
Vue.js 中的 nextTick（或实例方法 this.$nextTick）是一个 Vue 提供的一个 API，用于在响应式状态变更后等待下一个 DOM 更新周期完成后再执行代码。由于 Vue 的 DOM 更新是异步的：当你修改响应式数据时，Vue 内部会缓冲这些变更，并在“下一个 tick”中一次性应用到 DOM，用这种批量更新的方式提高性能。所以这意味着数据变更后立即访问 DOM 可能获取到旧值，而 nextTick 确保回调在 DOM 实际更新后运行。
其使用场景如下：
| 特性 | computed (计算属性) | watch (侦听器) |
|---|---|---|
| 设计目的 | 派生新数据 | 观察数据变化执行副作用 |
| 返回值 | 必须返回一个值 | 不需要返回值 |
| 缓存 | 有缓存，依赖不变时不重新计算 | 无缓存，每次变化都执行 |
| 异步操作 | 不能包含异步操作 | 可以执行异步操作 |
| 初始执行 | 立即执行 | 默认不立即执行(配置 immediate: true后会立即执行) |
| 使用场景 | 模板中使用的派生数据 | 数据变化时需要执行的操作(如API调用、复杂逻辑) |
钩子函数的作用：
在哪发送请求都可以，主要看具体你要做什么事，一般会在 created 和 mounted 发起请求，但注意服务端渲染不执行 mounted 钩子。
每次使用组件时都会对组件进行实例化操作，并且调用 data 函数返回一个对象作为组件的数据源。这样可以保证多个组件间数据互不影响。
在 Vue.js 中，每一个 .vue 文件即一个 vue 组件，组件化的核心包括模板 template、属性 props、事件、插槽 slot、生命周期等。
组件化好处: 高内聚、可重用、可组合。
Vue.js 的单向数据流是其核心设计原则之一，它确保数据在组件间流动时具有可预测性和一致性，便于调试和追踪 bug。
数据总是从父组件向下流动到子组件（通过 props 传递），而子组件不能直接修改从父组件接收到的数据。如果子组件需要更新数据，只能通过触发事件（emits 或自定义事件）通知父组件，由父组件负责实际的更新。
下面演示 vue3 的写法，vue2 同理。
<!-- parent.vue -->
<template>
<Child @vue:mounted="fn" />
</template>
<script lang="ts" setup>
import Child from './Child.vue'
const afterChildMounted = () => {
console.log('after child mounted')
}
</script>
<!-- Child.vue -->
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('child mounted')
})
</script>
在 Vue.js 中，key 属性主要用于优化列表渲染，特别是与 v-for 指令结合使用时。它为列表中的每个元素提供一个唯一的标识符，帮助 Vue 跟踪节点的身份，从而在数据变化时更高效地更新 DOM。
key 允许 Vue 复用和重新排序现有的 DOM 元素，确保更新更精确。key 确保组件的内部状态（如输入值）不会在数据重排时丢失或错位。key 来比较新旧节点。如果没有 key，Vue 会按索引比较，可能导致不必要的重新渲染。Vue.use 方法是用于安装（注册）Vue 插件的全局方法。它允许开发者在 Vue 应用中引入第三方插件或自定义插件，从而扩展 Vue 的功能，如添加全局组件、指令、混入（mixins）或其他特性。
主要作用
event.stopPropagation()。event.preventDefault()。.sync 修饰符主要是为了简化组件间的双向数据绑定，它是一种语法糖，允许子组件通过特定事件更新父组件的 prop，而无需手动编写事件监听器。
相同点：ref 和 reactive 都可以创建响应式数据。
不同点：
通过 getCurrentInstance 函数可以获取当前组件实例。
<script setup>
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
console.log('instance: ', instance);
</script>
vue3:
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncCom = defineAsyncComponent(() => import('./MyComponent.vue'));
</script>
vue2:
<script>
export default {
components: {
AsyncCom: () => import('./MyComponent.vue')
}
};
</script>
以上是整理的 20+ Vue 初、中级的高频面试题，如有错误或者可以优化的地方欢迎评论区指正，后续还会更新 Vue 面试题高级篇。
