专注

是一种标识，它用于唯一标记每个虚拟 DOM 节点。Diff 算法会根据。的选择直接关系到 Diff 算法的效率和最终的 DOM 更新结果。// 之前选中第三个，点击删除后，会出现错乱情况。// 给key加上一个唯一的id即可解决问题。判断新旧节点是否是同一个节点。

主要用于在虚拟 DOM 树发生变化时，计算最小的操作以更新真实 DOM。相比 Vue 2，Vue 3 的 Diff 算法做了很多优化。，与 Vue 2 的简单逐个比较方式不同，其性能更高。Vue 3 的 Diff 算法采用了一种。Vue 3 使用的是一种高效的。

在 Vue 3 中，运行时的执行过程是一个复杂但高效的机制，主要包括初始化应用、渲染、响应式更新和销毁等阶段。Vue 3 的运行时架构利用虚拟 DOM 和响应式系统实现了高效的渲染与更新，同时通过组合式 API 提供了灵活的开发体验。将其转换为真实 DOM，并插入到页面中。方法，创建一个 Vue 应用实例。Vue 使用虚拟 DOM 树，通过。函数或编译好的模板函数，生成。Vue 3 的响应式系统基于。Vue 使用组件定义的。

vue3响应式重构

如果项目中使用了 UI 库（如 Element Plus、Ant Design Vue），按需引入可以显著减小打包体积。使用 Webpack 优化 Vue 项目是提升性能和减少打包体积的关键步骤。通过以上优化方法，Vue 项目的性能和打包体积可以显著提升。Vue 提供了路由懒加载功能，可以将组件拆分成独立的块，按需加载，从而减少初始包的体积。如果项目是通过 Vue CLI 创建的，可以直接使用内置配置进行优化。每个项目的需求和场景可能不同，建议结合实际情况调整优化策略。的缓存功能，加速二次构建。

上述步骤归结起来，简化了 Vue 元素的更新流程，只有当数据发生变化时，渲染函数才会重新执行，生成新的虚拟 DOM，通过有效的 Diff 算法，计算出需要更新哪些具体的 DOM 元素，并执行更新。这种基于虚拟 DOM 的渲染方式既保持了声明式编程的便利性，又提供了相较于直接操作 DOM 更优的性能。文件）或模板字符串中写的声明式模板转换成 JavaScript 渲染函数。这个过程发生在构建时（当使用 Vue CLI 或其他打包工具时）或者在运行时（当使用全量构建时）。

首先在vue3项目根目录创建.env.development 和 .env.prodution两个文件，分别为开发和生产环境（必须.env.开头，需要额外环境，配置自定义的文件名称即可）3.2 在.vue页面或者入口文件main.ts访问环境变量，使用import.meta.env。4.2 打包项目，执行npm run build，生成了dist文件夹；启动本地环境，访问对应页面时，会打印以下信息，包含自定义的环境变量。4.1 安装http-server。，注意变量必须要VITE_开头。

【代码】Vue3+element-plus复杂表单分组处理。

【代码】vue3 组合式API获取子组件的属性和方法。

编译时，会生成data-v-xxxx（hash值），在对应的元素上会增加data-v-xxxx（hash值）的属性，这个属性在不同的单文件组件之间是唯一的存在，对应的样式也会添加。hash值在不同环境生成的方式有所不同。，进而实现样式隔离效果。

defineProps 和 defineEmits 都是只能在 中使用的编译器宏。在组件使用v-model实现“双向绑定”时，子组件默认通过emits(‘update:modelValue’, params)触发更新；对于结合单文件组件使用的组合式 API，推荐通过 以获得更加简洁及符合人体工程学的语法。通过PascalCase（大驼峰）格式引入组件，模板也使用PascalCase（大驼峰）；

【代码】vue2与vue3的区别（vue3学习记录）

// main.ts声明（需要挂载前定义）app.config.globalProperties.$test = 'hello world!!' app.mount('#app')// 在页面中调用import { getCurrentInstance } from 'vue';const { proxy } = getCurrentInstance();console.log(proxy.$test); // 打印hello world!!...