首页 前端知识 Vue3/ Vue3概述认识Vue3 (Vue3基本信息 性能提升)、Vue3的新增特性( Vue3 setup)

Vue3/ Vue3概述认识Vue3 (Vue3基本信息 性能提升)、Vue3的新增特性( Vue3 setup)

2024-06-14 09:06:11 前端知识 前端哥 950 821 我要收藏

一. Vue3概述认识Vue3

1.Vue3基本信息:

  • Vue3支持Vue2的大多数特性

  • 更好的支持TypeScript

  • Vue3支持框架 

(1). element-ui 基于Vue3.0的桌面端组件库

(2). vant    vant3.0版本 有赞团队开源

(3) ant-design-vue  蚂蚁开发

2.性能提升:

  • 打包大小减少41%

  • 初次渲染快55% , 更新渲染快133%

  • 内存减少54%

  • 使用proxy 代替 defineProperty 实现数据响应式

  • 重写虚拟DOM 的实现 和 Tree-shaking

二.Vue3的新增特性

1.Composition Api

Option Api: Vue2创建组件时 会把数据放在 data,计算属性放到Computed ,事件处理放到 methods 监听改变放到 watch 从而处理页面逻辑 

  • 组件功能越来越多 逻辑功能点分散 不易阅读 (新增或修改一个需求 就需要分别在data methods等 进行修改 .... 功能多时 滚动条来回滚动查找很麻烦)

  • 可以通过 mixins 重用逻辑代码 但是数据来源还会有 mixins 命名冲突问题

Composition Api: 将零散的 data methods 代码重新组合 一个功能的代码放在一起 并且可以单出拆分出函数

  • 兼容 option Api  还可以继续使用

  • 利用代码重用 没有对 this 的使用 , 减少了 this指向不明的情况

  • 几乎是函数 编辑器可以帮助进行类型检查和建议

2.setup

语法:

  <script>

        export default {

            setup() {

                const msg = 'hello World'

                return {

                    msg

                }

            }

        }

    </script>

介绍:

  1. steup 函数是一个新的 option 在初始化时执行一次 可以理解为使用 composition APi的入口点

  2. 这个函数的返回是一个对象 对象里的属性和方法 可以直接在模板中使用

注意:

  1. steup在 beforeCreate之前创建 因此这个函数内没有this 因此不能访问 data methods 等 但是 methods 内可以访问 steup提供的属性和方法

  2. rethrn 中返回的属性跟data合并 返回的方法跟 methods 里面的方法合并 如有重名 steup优先

  3. steup 不能是一个 async 函数 使用 async后返回值不是 return 的对象 而是 promise

  4. steup接收两个参数 steup(props,context) || steup(sttrs,slots,emit) 不能解构 props 否则会失去响应式

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12083.html
标签
评论
发布的文章

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!