Vue3新特性笔记

vue3.0的主要变化

1. 响应式基本原理：Object.defineProperty -> Proxy，提高性能
2. 初始化方式：Options api -> composition api，提供代码复用，更好的tree-shaking
3. 初始化项目：vue-cli -> vite，提高开发效率
4. 扩展方法：Vue.property.xxx -> config.globalProperties.xxx，更好的tree-shaking
5. 实例化：new Vue -> createApp。
   原来的写法，如果一个项目有多个Vue实例，那么多个实例造成污染：
   ```
   Vue.use(plugin)
   new Vue({el:'app1'});
   new Vue({el:'app2'});
   而createApp这种方式，每次创建一个vue实例,然后use不同插件
   app1 = createApp({});
   app2 = createApp({});
   app1.use(plugin1)
   app2.use(plugin2)
6. setup内部不支持this，因为setup时组件实例还没有创建，通过setup的第二个参数context获取实例
7. 支持ts -> ts的优点：类型检查/编译器提示/ts拥抱ES6规范及部分起草规范

vite是什么？

vite是基于vue3单文件组件的非打包开发服务器
原理：ES module/.vue文件拆分为http请求+type？=参数/热更新（koa/websocket/watcher）

1. 使用ES module，代码以模块的方式引入到文件；即在浏览器使用import/export方式导入/导出
   webpack使用require方式导入
2. vite使用koa构建的服务端
   webpack使用webpack-dev-server构建服务端
   参考：https://www.jianshu.com/p/07960e4bbb01

vue3.0中的setup等新语法

setup：是专门为使用vue3的composition-api开放的统一入口，执行时机：beforeCreate 与 created 之间
reactive: 内部使用new Proxy(handle, target)
ref：把普通值包装成响应式数据 功能类似于$set
toRefs: 解构reactive创建的响应式对象

composition api是什么？

组合api：将组件属性公开为函数api
data -> reactive()/ref()
computed -> computed()：创建计算属性，返回的是ref实例
watch -> watch()
provide/inject -> provide()/inject()
lifeCicle -> on+xxx

options api的优点：保证代码的下限，在指定的地方写指定的代码
options api的缺点：同一个逻辑代码比较分散

composition api的优点：自由度高，复用性提高
composition api的缺点：对编码人员的要求比较高

composition API的设计动机

1. 逻辑复用及代码整理
   vue2.x中代码复用是通过mixin提取公共逻辑和通过作用域插槽编写复用性组件
   mixin的缺点：名称一样时会被覆盖
   作用域插槽的缺点：只能在模板中使用
   vue3.0中代码复用通过composition API。对于业务逻辑相同的代码，可以抽取到一个js文件，然后导入到不同到组件
   composition的缺点：自由度高，需要编码人员有比较高的抽象能力
2. 更好的typescript支持