一起来揭开Vue 3.0的One Piece神vue+vite新体验

前言

2020年9月19日凌晨，尤雨溪大大正式发布了3.0版本，代号：One Piece。

vue从一开始就是以快速上手的特性被众多开发者欢迎的框架。在随着使用者的逐渐增多，框架的规范也在不断扩大，以适应不断增长的需求。随着时间的推移，它成为了所谓的“渐进式框架”：一个可以逐步学习和采用的框架，同时随着用户应对越来越多的需求场景而提供持续的支持。

首先

3.0版本的特点  

1. 在Vue3中，基于对象的 2.x API 基本没有变化，3.0 还引入了 [Composition API]，旨在解决 Vue 在大规模应用中的使用痛点，实现了类似于 React 钩子的逻辑组成和重用，比 2.x 基于对象的 API 更灵活的代码组织模式和更可靠的类型推理。

2. Vue3与Vue2相比，在捆绑大小 (tree-shaking 时减少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和内存使用 (少了 54%) 方面都有[显著的性能提升]。

3. Vue3的代码库是用 TypeScript 编写的，具有自动生成，测试和捆绑的类型定义，因此它们始终是最新的。Composition API 可以很好地处理类型推断。Vetur 是我们的官方 VSCode 扩展，现在利用 Vue 3 改进的内部键入功能支持模板表达式和 props 类型检查。哦，如果您愿意，Vue 3 的打字完全支持 TSX。

4. 为单文件组件 (SFC，即 `.vue` 文件) 提出了两个新特性：`<script setup>`和 `<style vars>`。

Vue3.0项目例子

在开始Vue3.0的项目之前，先说明一下。根据尤大神在Vue3.0 beta直播中提到了一个vite工具，而且还发推表示再也回不去webpack了，还引来了webpack核心开发人员肖恩的搞笑回复。

那么首先就先来了解一下vite的到底有啥魔力？为什么会被尤大神这么夸赞？

vite是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。它主要具有的特点有以下：

1. • 快速的冷启动

   • 即使的模块热更新

   • 真正的按需编译

话不多说，我们接下来跟着一个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