一起来揭开Vue 3.0的One Piece神vue+vite新体验
前言2020年9月19日凌晨,尤雨溪大大正式发布了3.0版本,代号:One Piece。vue从一开始就是以快速上手的特性被众多开发者欢迎的框架。在随着使用者的逐渐增多,框架的规范也在不断扩大,以适应不断增长的需求。随着时间的推移,它成为了所谓的“渐进式框架”:一个可以逐步学习和采用的框架,同时随着用户应对越来越多的需求场景而提供持续的支持。首先3.0版本的特点在Vue3中,基于对象的 2.x A
前言
2020年9月19日凌晨,尤雨溪大大正式发布了3.0版本,代号:One Piece。
vue从一开始就是以快速上手的特性被众多开发者欢迎的框架。在随着使用者的逐渐增多,框架的规范也在不断扩大,以适应不断增长的需求。随着时间的推移,它成为了所谓的“渐进式框架”:一个可以逐步学习和采用的框架,同时随着用户应对越来越多的需求场景而提供持续的支持。
首先
3.0版本的特点
-
在Vue3中,基于对象的 2.x API 基本没有变化,3.0 还引入了 [Composition API],旨在解决 Vue 在大规模应用中的使用痛点,实现了类似于 React 钩子的逻辑组成和重用,比 2.x 基于对象的 API 更灵活的代码组织模式和更可靠的类型推理。
-
Vue3与Vue2相比,在捆绑大小 (tree-shaking 时减少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和内存使用 (少了 54%) 方面都有[显著的性能提升]。
-
Vue3的代码库是用 TypeScript 编写的,具有自动生成,测试和捆绑的类型定义,因此它们始终是最新的。Composition API 可以很好地处理类型推断。Vetur 是我们的官方 VSCode 扩展,现在利用 Vue 3 改进的内部键入功能支持模板表达式和 props 类型检查。哦,如果您愿意,Vue 3 的打字完全支持 TSX。
-
为单文件组件 (SFC,即 `.vue` 文件) 提出了两个新特性:`<script setup>`和 `<style vars>`。
Vue3.0项目例子
在开始Vue3.0的项目之前,先说明一下。根据尤大神在Vue3.0 beta直播中提到了一个vite工具,而且还发推表示再也回不去webpack了,还引来了webpack核心开发人员肖恩的搞笑回复。
那么首先就先来了解一下vite的到底有啥魔力?为什么会被尤大神这么夸赞?
vite是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。它主要具有的特点有以下:
-
-
快速的冷启动
-
即使的模块热更新
-
真正的按需编译
-
话不多说,我们接下来跟着一个vue的例子,看下vite在Vue3.0中的应用。更加详细的vite文章会在下篇给予解释,本篇先来看看Vue3.0这个One Piece的神秘面纱下是什么吧。(想要了解更多的Vite请持续关注,下期会更加精彩)
01 创建项目
npm:
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
or yarn:
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
02 项目结构
main.js
import { createApp } from 'vue'
import App from './App.vue '
import router from './router'
import store from './store'
createApp (App)
.use(store)
.use(router)
.mount('#app')
createApp()应该是vue应用的实例,createApp支持use的应用,具体的信息要从框架的结构中得知了。
App.vue
这是兼容Vue2.0的语法,下边是Vue 3.0 rfc写法(还处于实验性阶段)。
Setup
-
data
setup是结合了vue2.0的created生命周期函数和data还有methods(后面会提到)可直接 export 属性(data)和方法(methods)
可以看出现在的name不是响应式的,后面会介绍响应式的。
- methods
methods也跟data一样,直接使用export。
效果:
03 Composition API
ref
声明:
ref可将一些基本属性编程响应式
reactive:
上图是reactive和ref混合使用,至于效果,请各自复制下方代码体验
<template>
<div id="app">
<div v-for="(item, index) in state.persons" :key="index">
{{ item.name }}是{{ item.age }}岁
</div>
<div>
<h3>修改zhangsan的年龄</h3>
<input type="text" v-model="zAge" />
</div>
</div>
</template>
<script lang="ts" setup="props, {emit}">
import { reactive, ref } from 'vue'
export const zAge = ref(12)
export const state = reactive({
persons: [
{
name: 'zhangsan',
age: zAge
},
{
name: 'lisi',
age: 20
}
]
})
</script>
computed:
声明:
效果:
watchEffect
声明:
效果:
04 组件系统
全局注册
App.vue
main.js
局部注册
App.vue
props
- END -
本篇到此结束
想必您还没有看够吧
想了解更多的关于vite和vue3.0的技术
请持续关注我们
如果您比较着急想更快的了解,也可以去官方文档
官方文档:https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md
更多推荐
所有评论(0)