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

一. 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 否则会失去响应式