# Vue 3.0 优势
Performance
:性能比Vue2.x
快1.2~2
倍Tree shaking support
:按需编译,体积比Vue2
小Composition Api
:组合Api
(类似React Hooks
)Better TypeScript Support
: 更好的Ts
支持Custom Renderer Api
: 暴露了自定义渲染Api
Fragment, Teleport(Protal), suspense
:更先进的组件
# Vue3.0是如何变快的?
diff
方法优化:Vue2.x
中的虚拟DOM
是进行全量的对比Vue3.0
新增了补丁标记(PatchFlag
) 在与上一次虚拟节点进行对比时,只对比带有patchflag
的节点,并且可以通过flag的信息得知当前节点要对比的具体内容
Vue2源码解析页 (opens new window) Vue3源码解析页 (opens new window)
# 创建 Vue3.0
vite
方式(暂定 )
本方法是用vite
构建工具创建项目。
npm init vite-app [projectname]
或者
yarn create vite-app [projectname]
- 用
vue-cli
方式
注意vue/cli
要v4.5
以上,可使用npm i -g @vue/cli
升级到新版
vue create projectname
本方法的步骤和创建vue2.x
是一样的,只是有了一个vue2.0 / vue3.0
版本的选项
# 安装路由
npm i vue-router@next
Vue2.x | Vue3.0 |
---|---|
new Vue | createApp |
mode:history (哈希模式一般都是开发模式 ) | 路由模式history :createWebHistory(和history的区别是:地址栏无变化) |
只能一个根元素 | 组件里支持多个根元素 |
路由跳转 useRouter() |
vue2.0挂载
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
vue3.0挂载
let app = createApp(App)
app.mount('#app') //挂载到根节点
app.use(router)
setup
setup() {
// 没有this
// 默认只执行一次,相当于 beforeCreate+ created
},
无论是值还是函数都需要通过return
暴露给外部使用
export default {
name: 'App',
setup() {
// 没有this
// 默认只执行一次,相当于 beforeCreate+ created
const state = reactive({
a: 1
})
const add = () => {
state.a++
}
return {
// toRefs 有双向绑定的功能,并且能对toRefs返回的对象进行解构赋值
...toRefs(state),
add
}
},
components: {
HelloWorld
}
}