vue3知识点

vue3与vue2的区别

• 打包大小减少41%

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

• 内存减少54%

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

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

• Vue3支持vue2的大多数特性

• 更好的支持Typescript

新增特性

Composition (组合) API
setup

            ref 和 reactive

            ref值类型的响应式数据，reactive引用类型的响应式数据

            computed 和 watch、watchEffect、stop 停止监听
            新的生命周期函数
            provide与inject

  新组件 
            Fragment - 文档碎片

            Teleport - 瞬移组件的位置    

            Suspense - 异步加载组件的loading界面

  其它API更新

             全局API的修改

             将原来的全局API转移到应用对象

             模板语法变化

创建项目

        有多种方式创建Vue3项目，如Vue CLI、Vite、Vue UI等。

1. ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

2. vue --version

3. ## 安装或者升级你的@vue/cli

4. npm install -g @vue/cli

5. ## 创建

6. vue create vue_test

7. ## 进入项目目录

8. cd vue_test

9. ## 启动

vite

vite 是一个由原生 ESM 驱动的 Web 开发构建工具。

在开发环境下基于浏览器原生 ES imports 开发，它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。

 快速的冷启动，不需要等待打包操作

即时的热模块更新，替换性能和模块数量的解耦让更新飞起

真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变

setup

• 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
• 组件中所用到的：数据、方法等等，均要配置在setup中。
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
• 在beforeCreate之前执行(一次), 此时组件对象还没有创建
• this是undefined, 不能通过this来访问data/computed/methods / props
• 其实所有的composition API相关回调函数中也都不可以

比较Vue2与Vue3的响应式

vue2的响应式

• 对象: 采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调
• 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

问题

• 对象直接新添加的属性或删除已有属性, 界面不会自动更新
• 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

vue3的响应式

• 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等

• 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

与 2.x 版本生命周期相对应的组合式 API

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

• 组合式 API 还提供了以下调试钩子函数：

• onRenderTracked
• onRenderTriggered

自定义hook函数

• 使用Vue3的组合API封装的可复用的功能函数
• 自定义hook的作用类似于vue2中的mixin技术
• 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂