Vue3 从新出发

整理两篇关于vue3文章。我不是生产者，但努力做好一个传递者

一、使用vite初始化项目

vite 介绍

vite是尤大大在今年新鼓捣出来的一个工具，尤大大对vite的描述是这样的: Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. 翻译成中文就是：Vite 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于Rollup打包。

为什么要用vite

为什么尤大大要推出vite，在我们使用webpack的时候，每次开发时候启动项目都需要几十秒甚至超过一分钟，比较慢，而且热更新也比较慢，而vite的主要特点就是快，官网对于vite的特点是这样描述的

快速的冷启动即时的模块热更新真正的按需编译 yarn create vite-app my-vue3

执行之后就会输出以下内容，可以看到新建项目特别快，仅仅用了1.63s

cd my-vue3 yarn dev是不是相比之前，快很多

查看项目结构

与vue-cli4创建的项目结构基本一样

打开main.js

import { createApp } from 'vue' import App from './App.vue' import './index.css' createApp(App).mount('#app')

发现创建Vue的方式变了，原来是通过new Vue的方法来初始化Vue，在Vue3.0中，修改为了通过createApp的方式

二、配置Typescript

安装 typescript

yarn add typescript -D

初始化tsconfig.json

npx tsc --init

将main.js修改为main.ts,同时将index.html里面的引用也修改为main.ts, 通过还需要修改App.vue与HelloWorld.vue文件，修改方式如下

<!--将 <script> 修改为 <script lang="ts">--> <script lang="ts"> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>

修改完之后，重启就可以访问项目了。虽然这样配置是可以了，但是打开main.ts会发现import App from App.vue会报错 找不到模块.,这是因为现在ts还没有识别vue文件

需要进行下面的配置:

接下来你就可以开开心心的在组件中使用ts了

在项目根目录添加shim.d.ts文件

添加以下内容

declare module "*.vue" { import { Component } from "vue"; const component: Component; export default component; }

三、配置 vue-router

版本是4.0.0-beta13

安装vue-router 因为当前vue-router针对vue3.0的版本还是beta版本，所以不能直接通过yarn add vue-router进行安装，而是需要带上版本号

yarn add vue-router@4.0.0-beta13

配置vue-router 在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容

import {createRouter, createWebHashHistory} from 'vue-router' // 在 Vue-router新版本中，需要使用createRouter来创建路由 export default createRouter({ // 指定路由的模式,此处使用的是hash模式 history: createWebHashHistory(), // 路由地址 routes: [] })

与新的Vue3.0初始化方式发生变化一样，vue-router的初始化方式也发生了变化，变成了通过createRouter来初始化路由。

将router引入到main.ts中，main.ts文件内容如下

import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from './router/index' const app = createApp(App) // 通过use 将 路由插件安装到 app 中 app.use(router) app.mount('#app')

四、配置 vuex

与vue-router一样，新的vuex当前也处于beta版本，当前版本是4.0.0-beta.4

安装vuex

yarn add vuex@4.0.0-beta.4

配置vuex 在项目src目录下面新建store目录，并添加index.ts文件，文件中添加以下内容

import { createStore } from 'vuex' interface State { userName: string } export default createStore({ state(): State { return { userName: "搬砖", }; }, });

引入到main.ts中

import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from './router/index' import store from './store/index' const app = createApp(App) app.use(router) app.use(store) app.mount('#app')

页面调用

<template> <div> {{ state.userName }} </div> </template> <script> import { useStore } from 'vuex'; setup(props, context) { const store = useStore(); const state = reactive({ userName: store.state.userName // 取值 }) return { state } } </script>

开发TodoList

通过上面的一系列操作，我们的开发环境就已经配置完成了，接下来我们就通过新的开发环境先开发一个TodoList，来验证一下是否正常。

添加todolist页面 首先我们先在src目录下面新建一个views目录，然后在其中新建文件todo-list.vue，并为文件添加以下内容

<template> <div class="todo-list"> <div> <label>新增待办</label> <input v-model="state.todo" @keyup.enter="handleAddTodo"> </div> <div> <h3>待办列表({{todos.length}})</h3> <ul> <li v-for="item in todos" :key="item.id" @click="handleChangeStatus(item, true)"> <input type="checkbox"> <label>{{item.text}}</label> </li> </ul> </div> <div><h3>已办列表({{dones.length}})</h3></div> <ul> <li v-for="item in dones" :key="item.id" @click="handleChangeStatus(item, false)"> <input type="checkbox" checked> <label>{{item.text}}</label> </li> </ul> </div> </template> <script lang="ts"> // 在vue2中 data 在vue3中使用 reactive代替 import { reactive, computed } from 'vue' import { useRouter } from 'vue-router' export default { // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成 setup(props, context) { // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似 const state = reactive({ todoList: [{ id: 1, done: false, text: '吃饭' },{ id: 2, done: false, text: '睡觉' },{ id: 3, done: false, text: '打豆豆' }], todo: '' }) // 使用计算属性生成待办列表 const todos = computed(() => { return state.todoList.filter(item => !item.done) }) // 使用计算属性生成已办列表 const dones = computed(() => { return state.todoList.filter(item => item.done) }) // 修改待办状态 const handleChangeStatus = (item ,status) => { item.done = status } // 新增待办 const handleAddTodo = () => { if(!state.todo) { alert('请输入待办事项') return } state.todoList.push({ text: state.todo, id: Date.now(), done: false }) state.todo = '' } // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用 return { state, todos, dones, handleChangeStatus, handleAddTodo } } } </script> <style scoped> .todo-list{ text-align: center; } .todo-list ul li { list-style: none; } </style>

调整路由 首先将App.vue文件内容修改为

<template> <router-view></router-view> </template> <script lang="ts"> export default { name: 'App' } </script>

然后修改 router/index.ts文件，添加新的路由

import {createRouter, createWebHashHistory} from 'vue-router' // 在 Vue-router新版本中，需要使用createRouter来创建路由 export default createRouter({ // 指定路由的模式,此处使用的是hash模式 history: createWebHashHistory(), // 路由地址 routes: [{ path: '/todolist', // 必须添加.vue后缀 component: () => import('../views/todo-list.vue') }] })

这时候我们就可以通过http://localhost:3000/#/todolist来访问TodoList了，效果如下图所示

创建一个 template

组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。 这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments)解决了这个问题。对于有完美强迫症的童鞋“真的是太棒了”。我们这里的例子里就不展示了，用简单的单根节点的组件。

template

<template> <div class='form-element'> <h2> {{ title }} </h2> <input type='text' v-model='username' placeholder='Username' /> <input type='password' v-model='password' placeholder='Password' /> <button @click='login'> Submit </button> <p> Values: {{ username + ' ' + password }} </p> </div> </template>

在Vue3的唯一真正的不同在于数据获取。Vue3中的反应数据（Reactive Data）是包含在一个反应状态（Reactive State）变量中。— 所以我们需要访问这个反应状态来获取数据值。

<template> <div class='form-element'> <h2> {{ state.title }} </h2> <input type='text' v-model='state.username' placeholder='Username' /> <input type='password' v-model='state.password' placeholder='Password' /> <button @click='login'> Submit </button> <p> Values: {{ state.username + ' ' + state.password }} </p> </div> <div>测试</div> <div>测试</div> <div>测试</div> </template>

建立数据 data

这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API） 旧的选项型API在代码里分割了不同的属性（properties）：data，computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。 现在我们来对比一下Vue2写法和Vue3写法在代码里面的区别。 Vue2 - 这里把两个数据放入data属性中

export default { data () { return { username: '', password: '' } } }

在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。 为了可以让开发者对反应型数据有更多的控制，我们可以直接使用到 Vue3 的反应API（reactivity API）。 使用以下三步来建立反应性数据: 从vue引入reactive 使用reactive()方法来声明我们的数据为反应性数据 使用setup()方法来返回我们的反应性数据，从而我们的template可以获取这些反应性数据 上一波代码，让大家更容易理解是怎么实现的。

import { reactive } from 'vue' export default { setup () { const state = reactive({ username: '', password: '' }) return { state } } }

这里构造的反应性数据就可以被template使用，可以通过state.username和state.password获得数据的值。

Vue2 对比 Vue3的 methods 编写

Vue2 的选项型API是把methods分割到独立的属性区域的。我们可以直接在这个属性里面添加方法来处理各种前端逻辑。

export default { data () { return { username: '', password: '' } }, methods: { login () { // 登陆方法 } } }

Vue3 的合成型API里面的setup()方法也是可以用来操控methods的。创建声明方法其实和声明数据状态是一样的。— 我们需要先声明一个方法然后在setup()方法中返回(return)， 这样我们的组件内就可以调用这个方法了。

export default { setup () { const state = reactive({ username: '', password: '' }) const login = () => { // 登陆方法 } return { login, state } } }

生命周期钩子 — Lifecyle Hooks

在 Vue2，我们可以直接在组件属性中调用Vue的生命周期的钩子。以下使用一个组件已挂载（mounted）生命周期触发钩子。

export default { data () { return { username: '', password: '' } }, mounted () { console.log('组件已挂载') }, methods: { login () { // login method } } }

现在 Vue3 的合成型API里面的setup()方法可以包含了基本所有东西。生命周期的钩子就是其中之一！ 但是在 Vue3 生周期钩子不是全局可调用的了，需要另外从vue中引入。和刚刚引入reactive一样，生命周期的挂载钩子叫onMounted。 引入后我们就可以在setup()方法里面使用onMounted挂载的钩子了。

import { reactive, onMounted } from 'vue' export default { props: { title: String }, setup () { // .. onMounted(() => { console.log('组件已挂载') }) // ... } }

计算属性 - Computed Properties

我们一起试试添加一个计算属性来转换username成小写字母。在 Vue2 中实现，我们只需要在组件内的选项属性中添加即可

export default { // .. computed: { lowerCaseUsername () { return this.username.toLowerCase() } } }

Vue3 的设计模式给予开发者们按需引入需要使用的依赖包。这样一来就不需要多余的引用导致性能或者打包后太大的问题。Vue2就是有这个一直存在的问题。 所以在 Vue3 使用计算属性，我们先需要在组件内引入computed。 使用方式就和反应性数据（reactive data）一样，在state中加入一个计算属性:

import { reactive, onMounted, computed } from 'vue' export default { setup () { const state = reactive({ username: '', password: '', lowerCaseUsername: computed(() => state.username.toLowerCase()) }) // ... }

接收 Props

接收组件props参数传递这一块为我们带来了Vue2和Vue3之间最大的区别。—this在vue3中与vue2代表着完全不一样的东西。 在 Vue2，this代表的是当前组件，不是某一个特定的属性。所以我们可以直接使用this访问prop属性值。就比如下面的例子在挂载完成后打印出当前传入组件的参数title。

mounted () { console.log('title: ' + this.title) }

但是在 Vue3 中，this无法直接拿到props属性，emit events（触发事件）和组件内的其他属性。不过全新的setup()方法可以接收两个参数： props - 不可变的组件参数 context - Vue3 暴露出来的属性（emit，slots，attrs） 所以在 Vue3 接收与使用props就会变成这样：

setup (props) { // ... onMounted(() => { console.log('title: ' + props.title) }) // ... }

事件 - Emitting Events

在 Vue2 中自定义事件是非常直接的，但是在 Vue3 的话，我们会有更多的控制的自由度。 举例，现在我们想在点击提交按钮时触发一个login的事件。 在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。

login () { this.$emit('login', { username: this.username, password: this.password }) }

但是在 Vue3中，我们刚刚说过this已经不是和vue2代表着这个组件了，所以我们需要不一样的自定义事件的方式。 那怎么办呀 不用慌，在setup()中的第二个参数content对象中就有emit，这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。 然后我们在login方法中编写登陆事件：

setup (props, { emit }) { // ... const login = () => { emit('login', { username: state.username, password: state.password }) } // ... }

文件