vue3.0的主要变化
- 响应式基本原理:Object.defineProperty -> Proxy,提高性能
- 初始化方式:Options api -> composition api,提供代码复用,更好的tree-shaking
- 初始化项目:vue-cli -> vite,提高开发效率
- 扩展方法:Vue.property.xxx -> config.globalProperties.xxx,更好的tree-shaking
- 实例化: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) - setup内部不支持this,因为setup时组件实例还没有创建,通过setup的第二个参数context获取实例
- 支持ts -> ts的优点:类型检查/编译器提示/ts拥抱ES6规范及部分起草规范
vite是什么?
vite是基于vue3单文件组件的非打包开发服务器
原理:ES module/.vue文件拆分为http请求+type?=参数/热更新(koa/websocket/watcher)
- 使用ES module,代码以模块的方式引入到文件;即在浏览器使用import/export方式导入/导出
webpack使用require方式导入 - 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的设计动机
- 逻辑复用及代码整理
vue2.x中代码复用是通过mixin提取公共逻辑和通过作用域插槽编写复用性组件
mixin的缺点:名称一样时会被覆盖
作用域插槽的缺点:只能在模板中使用
vue3.0中代码复用通过composition API。对于业务逻辑相同的代码,可以抽取到一个js文件,然后导入到不同到组件
composition的缺点:自由度高,需要编码人员有比较高的抽象能力 - 更好的typescript支持
网友评论