vue3学习笔记
文章平均质量分 74
@Kayn
今天,你进步了吗?
展开
-
Vue3 学习总结(复述)
● 当使用v-if v-else-if v-else分支的时候,不再需要指定key值,因为vue3会自动给予每个分支一个唯一的key。vue2新旧DOM树对比时是逐层对比,这样会影响效率,而vue3是将把动态节点收集起来, 只对比动态的节点,静态的不进行对比。当编译器遇见大量的静态节点,就不构建createvNode了(影响效率),它会将整体节点形成一个字符串。即便要手工给予key值,也必须给予每个分支唯一的key,不能因为要重用分支而给予相同的 key。,也是作为了vue3或者其他框架的构建工具。原创 2024-05-19 10:42:51 · 587 阅读 · 0 评论 -
vue3 Reactivity总结
vue3 响应式原创 2024-05-16 15:03:11 · 545 阅读 · 0 评论 -
为什么vue3去掉了Vue构造函数?
但是vue2是通过Vue构造函数引入的插件,这样一来所有的实例都具备这些插件,不利于隔离不同应用。3. vue2没有把组件和应用单独分开,一个构造函数即是vue组件又是应用。vue3把两个概念分开了,通过createApp创建的应用,他内部提供的方法是针对整个应用,而不是特殊的组件。2. 不利于tree shaking, vue2构造函数集成了太多功能,不利于tree shaking,vue3把这些功能当作普通函数导出,充分利用tree shaking优化打包体积。原创 2024-05-13 11:15:54 · 219 阅读 · 0 评论 -
理解vue3响应式机制(学习笔记)
vue用到了哪些响应式有三种方案:object.defineProperty、proxy、value setterobject.definePropertydefineProperty API 作为 Vue 2 实现响应式的原理,它的语法中也有一些缺陷。比如在我们删除数组的时候,无法监听到,这也是为什么在 Vue 2 中,我们需要 $delete 一个专门的函数去删除数据。proxyVue 3 的响应式机制是基于 Proxy 实现的。Proxy 的重要意义在于它解决了 Vue 2 响应式的缺陷原创 2021-12-12 16:21:28 · 1187 阅读 · 0 评论 -
vue3 结合Composition API拆分代码(学习笔记)
Composition API(vue3) 和Options API(vue2)区别options API由于所有数据都挂载在 this 之上,因而 Options API 的写法对 TypeScript 的类型推导很不友好,并且这样也不好做 Tree-shaking 清理代码。增功能基本都得修改 data、method 等配置,并且代码上 300 行之后,会经常上下反复横跳,开发很痛苦。代码不好复用,Vue 2 的组件很难抽离通用逻辑,只能使用 mixin,还会带来命名冲突的问题。Compo原创 2021-12-11 15:49:21 · 1926 阅读 · 1 评论 -
搭建vue3 工程化(学习笔记)
环境准备我们使用VS Code 写 Vue 3 的代码,直接在 Chrome 浏览器里展示,我们会在这个基础之上逐步添加新的工具。对于 Vue 2,官方推荐用 Vue-cli 创建项目;而对于 Vue 3,我建议你使用 Vite 创建项目,因为 vite 能够提供更好更快的调试体验。在使用 Vite 之前,我们要先安装 Node.j安装 Node.js 的过程是傻瓜式的,直接去Node.js 官网下载安装即可。接下来,在命令行窗口里,我们对 vuejs 目录执行下面的命令,这样就可以创建一个 Vit原创 2021-12-11 13:59:54 · 846 阅读 · 0 评论