讯享网
笔
记
Vue2-Vue3升级要点笔记！
01
MVVM与MVC的区别
MVVM:
- M (Model): 数据模型，封装应用程序的业务逻辑数据。
- V (View): 视图，负责用户界面的展示和呈现。
- VM (ViewModel): 视图模型，作为View和Model的粘合体，负责两者的交互和协作。
MVC:
- M (Model): 数据模型，表示应用程序核心（如数据库）。
- V (View): 视图，显示数据的页面，一般为HTML。
- C (Controller): 控制器，控制整个业务逻辑，负责处理数据如获取和过滤。
区别:
- 通信方式: MVVM是双向通信，MVC是单向通信。
- 数据逻辑分离: MVVM真正将数据逻辑分离到JS中，MVC中未完全分离。
02
Vue 2与Vue 3的响应式系统差异
Vue 2:
- 使用Object.defineProperty()进行数据劫持，通过getter和setter追踪数据变化。
- 无法直接监听数组变化，需特殊处理。
Vue 3:
- 使用Proxy进行响应式处理，提供更全面的数据监听（包括数组和对象的新增、删除属性）。
- 性能更优，直接绑定整个对象，省去for in和闭包等。
03
Vue 2与Vue 3的API变化
Vue 2:
- 使用Options API（选项式），将同等属性的数据定义在一起。
- 生命周期钩子如beforeCreate, created, beforeMount等。
Vue 3:
- 引入Composition API（组合式），允许根据功能模块将同一逻辑的变量和方法放在一起。
- 生命周期钩子有所变化，如beforeCreate和created被setup替代，新增了onBeforeMount, onMounted等。
04
构建工具
Vite作为Vue 3官方推荐构建工具：
- Vue 3官方强烈推荐使用Vite作为其项目的构建和开发工具。Vite利用原生ES模块导入的特性，提供了极速的冷启动和热模块替换（HMR）能力，大大提升了开发体验。
构建速度优势：
- 相比于Vue 2中广泛使用的Webpack，Vite在构建速度上有着显著的优势。Webpack在启动时需要打包整个项目，而Vite则直接利用浏览器对ES模块的支持，按需提供模块，因此能够实现更快的启动和模块热更新。
Webpack在Vue 3中的继续使用：
- 对于已经熟悉Webpack或项目有特殊需求的开发者，Vue 3同样支持在项目中继续使用Webpack作为构建工具。这意味着开发者可以无缝地将现有的Webpack配置和插件迁移到Vue 3项目中，保持项目的连续性和稳定性。
05
Vue 3的优势
更好的性能：
- 通过Proxy和优化的虚拟DOM算法，Vue 3提供了更快的渲染速度和更好的运行时效率。
更灵活的代码组织：
- Composition API（组合式）允许更灵活地组织代码，提高代码的可读性和可维护性。
更完善的TypeScript支持：
- Vue 3为TypeScript提供了更好的支持，使得在Vue 3中使用TypeScript编写代码更加容易和可靠。
更多的新特性：
- 如Fragment、Teleport和Suspense等特性为开发者提供了更多的选择和可能性。
06
Vue组件化开发与通信
组件化开发:
- 将UI拆分成多个独立、可复用的部分（即组件）的开发方式。每个组件都包含自己的HTML模板、JavaScript逻辑和CSS样式。
- 通过组件化，可以构建大型应用，同时保持代码的可读性和可维护性。
通信方式:
- props向下传值
- 自定义事件（$emit）向上传值
- Vuex状态管理
- provide和inject跨层级传值
- refs父子组件直接访问
- children访问父/子组件实例
- listeners父子组件间属性监听和事件监听等。
07
Vue的指令及其用法
Vue指令是Vue模板中特殊的标记，用于在元素的DOM上应用一些特殊的行为。常见的指令有：
- v-if（条件渲染）
- v-for（列表渲染）
- v-bind（绑定属性）
- v-on（绑定事件监听器）
- v-model（双向数据绑定）
这些指令都以v-为前缀，后跟指令名称。
08
Vue Router是如何工作的？
Vue Router是Vue.js的官方路由管理器。
它和Vue.js深度集成，使得构建单页面应用变得易如反掌。
Vue Router通过映射URL到组件，使得用户可以导航到不同的视图，而不需要重新加载页面。
它监听浏览器的地址变化，并根据路由配置加载对应的组件。
09
Vue如何实现页面间的数据传递？
Vue实现页面间数据传递有多种方式，如：
- 使用Vue Router的params和query参数
- Vuex状态管理
- Pinia状态管理
- 事件总线（Event Bus）
- provide和inject
- localStorage/sessionStorage等。
具体使用哪种方式取决于应用的具体需求。
10
Vue的计算属性和侦听器
计算属性（computed）是基于它们的响应式依赖进行缓存的。只有在它的相关响应式依赖发生改变时才会重新求值。这使得计算属性非常适合在模板中进行复杂逻辑的计算。
侦听器则（watch）允许观察和响应Vue实例上的数据变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
11
Vue的过滤器（filters）是如何工作的？
Vue的过滤器用于文本格式化。
过滤器可以用在两个地方：mustache插值和v-bind表达式。
过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。
过滤器函数总是接收表达式的值（之前的值）作为第一个参数。
过滤器可以串联，即一个过滤器的输出被用作下一个过滤器的输入。
12
Vue的虚拟DOM是什么，如何提升性能
虚拟DOM是一个编程概念，在这个概念里，DOM被抽象成了一棵以JavaScript对象（VNode节点）作为基础的树，用对象属性来描述节点。
当数据发生变化时，Vue会生成一个新的虚拟DOM树，并与旧的虚拟DOM树进行差异比较，从而计算出最小的变更集并应用到实际的DOM上，以此提升性能。
13
Vue的mixin是什么，如何使用？
Vue的mixin是一种分发Vue组件的可复用功能。
一个混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
混入也可以进行全局注册。使用时，只需要在组件的选项中通过mixins选项声明即可。
02
Vue的nextTick是什么，为什么需要它？
nextTick是一个函数，它延迟一个回调，在下次DOM更新循环结束之后执行延迟回调。
在修改数据之后立即使用它，然后等待DOM更新。
它对于在数据变化后要执行的依赖于DOM的操作非常有用。
因为Vue的DOM更新是异步的，所以当修改数据后，视图并不会立即更新，而是会等待同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
如果需要在数据变化后立即获取更新后的DOM，就需要使用nextTick。
1
END
1
扫二维码｜关注我们
文案｜排版：马光佳
初审：马光佳
终审：何圳禹
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/197943.html