快速进阶vue3.0
2019-11-04 本文已影响0人
Venus123嬛嬛
前言:在2019.10.05发布了vue3.0预览版源码,预计在2020年第一季度才有可能发布正式版本。
ps:我们都知道,vue2,基于defineProperty 有很多递归去定义get,set 在性能上有一些消耗
新版vue3.0改用proxy,也代表着vue放弃兼容ie,计划主要更新和功能如下:
一、编译器
1.使用模块化架构
2.优化"Block tree"
3.更激进的static tree hoisting 功能(检测静电语法,进行提升)
4.支持Source map
5.内置标识符前缀(又名‘StripWith’)
- ......
二、运行时
1.速度显著提升
2.同时支持Composition Api,以及typings
3.基于Proxy 实现的数据变更检测
4.支持Suspense w/ async setup{}
- ......
(目前不支持IE11)
三、剖析Vue Composition API(vue3.0核心api,都是基于函数方式的)(https://vue-composition-api-rfc.netlify.com)
1.vue 3 使用ts实现了类型推断,新版api全部采用普通函数 让编写代码时可以享受完整的类型推断(避免装饰器);
2.解决了多组件间逻辑重用问题(解决:高阶组件、mixin、作用域插件);
3.composition api 使用简单
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>
四、先把源码down下来(https://github.com/vuejs/vue-next
)