vue3.0 新增特性

最新推荐文章于 2023-08-05 11:28:34 发布

别人家的大米饭

最新推荐文章于 2023-08-05 11:28:34 发布

阅读量809

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45731006/article/details/121352581

版权

压缩包体积变小在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中是不需要写根标签的

别人家的大米饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3.0 新增特性

压缩包体积变小在2.0时大小大约味20kb 在3.0中只有2.0的一半大概只有10kbObject.defineProperty变成proxy Object.defineProperty是直接操作对象的属性，颗粒度比较小。irtual DOM 重构编译的优化vue创建的变化在2.0中： import Vue from 'vue' import App from './App.vue' new Vue({ ren..
复制链接

扫一扫