-
压缩包体积变小 在2.0时大小大约味20kb 在3.0中只有2.0的一半 大概只有10kb
-
Object.defineProperty变成proxy Object.defineProperty是直接操作对象的属性,颗粒度比较小。
-
irtual DOM 重构
-
编译的优化
-
vue创建的变化
在2.0中: import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App), }).$mount('#app') 在3.0中: import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
-
Composition api被成为setup
当组件变得越来越大时,逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解,且碎片化使得理解和维护复杂组件变得困难。 选项的分离掩盖了潜在的逻辑问题。此外,在处理单个逻辑关注点时,我们必须不断地“跳转”相关代码的选项块。 如果能够将与同一个逻辑关注点相关的代码配置在一起会更好,于是 Composition API 应运而生。 step组件:setup组件是在创建组件之前执行,一旦props被解析,就会合成API的入口。 接受两个参数是props和context props:setup中的props是响应式的,当传入新的props就会被更新 在这里props不支持解构,会消除props的响应性 想要解构可以使用 vue中的torRefs来解构 例:const { title } = toRefs(props) context:是一个JavaScript对象,不是响应式的,可以进行解构 ,有三个属性:attrs(非响应式对象,Attribute),slot(插槽),emit(触发事件)
-
指令 v-memo
记住模版的子树 也就是子字节 接受一个固定长度的数组 当组件重新渲染时,如果valueA和valueB都保持不变那么渲染的时候将不会渲染 即使是虚拟dom创建的节点。如果v-mome=[] 那就等于v-once的用法
用法:<html v-memo="[valueA,valueB]"> </html>
8.在template中是不需要写根标签的