粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

theme: smartblue

这是我参与更文挑战的第14天，活动详情查看：更文挑战

一、Vue3的介绍

Vue.js3.0正式版在2020年9月份发布, 支持Vue2的大多数特性, 更好的支持Typescript, 虚拟Dom完全重构, 结合模板编译提高运行性能, 减少运行时开销, 使用Proxy(代理)代替defineProperty实现数据的响应式, 新增特性Composition(组合)Api。

在学习Vue3之前一定要先学习Vue2，毕竟是Vue2的升级版，性能得到更好的提升，打包后体积减少了约41%，初次渲染快55%，更新渲染快133% ，内存减少54% ，使用Proxy(代理)代替defineProperty实现数据的响应式，调整代码结构使其可以和Tree-sharking配合起来, 没有用到的代码在编译时扔掉. 需要注意目前Vue3不支持Ie浏览器, 所以需要兼容Ie浏览器还是用Vue2开发。

Vue2与Vue3的响应式不同, 在Vue3中使用Proxy(代理)代替defineProperty实现数据的响应式, 由于Vue2使用defineProperty实现数据的响应式, 直接通过下标修改元素, 比如arr[3]=xxx或者更新数组的长度, 界面不会自动更新, 需要使用Vue.set或者this.$set来实现数据的响应式。

在实际开发中Vue3支持Vue2的大部分代码，但是企业一般要求用Typescript开发，所以在学习Vue3之前一定要先学习Typescript

二、创建项目

1. 更新vue-cli脚手架至最新的版本（4.5以后）

yarn global add @vue/cli
# OR
npm install -g @vue/cli

ps： 设置淘宝镜像，不然很慢
npm config get registry  // 查看npm当前镜像源

npm config set registry https://registry.npm.taobao.org/  // 设置npm镜像源为淘宝镜像

2. 创建项目截图

vue create vue3-demo

按空格选中取消, 回车下一步

选3.x

不要选择class风格的组件

其他的就一路回车

3. 创建好的项目目录

区别vue2:

views目录代替了pages目录, 当然你改成pages目录也是可以用的
多了shims-vue.d.ts文件, 是typescript适配vue的文件

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

tsconfig.json, 顾名思义typescript的配置文件
函数式编程风格 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')

route.js不再是new的形式, 采用方法的风格

4. 启动项目

npm run serve

可以发现路由是history模式

改成hash模式

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

5. defineComponent

home.js中

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
});
</script>

defineComponent是一个重载函数, 只是对setup进行封装, 返回options对象, 目的是定义一个组件, 内部可以传递一个配置对象, defineComponent函数最重要的是, 在Typescirpt下,给与组件正确的参数类型推断。

ps: vue3中的vue不需要根元素了 home.js 去掉外面那层还是可以正常运行, 因为外面有一层文档碎片的东西, 当然为了兼容性还是添加上好

<template>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
});
</script>

三、 Vue3新特性Compositon Api

1. Compositon Api定义

Compositon Api是一组低侵入式的、函数式的Api、它使我们更灵活的组合组件逻辑。Compositon Api的灵感来自React Hooks，比mixin更强大。它可以提高代码逻辑的可服用性，从而实现与模板的无关性，同时函数式编程使代码的可压缩性更强。另外Vue3的响应式模块可以与其他框架相结合。

2. setUp函数初体验

在学习Compositon Api之前，需要先了解一下setUp（）函数。setUp函数是Vue3新增内容。它基于Compositon Api的新特性提供了统一的入口, 所有组合的Api函数都在此使用, 只在初始化时执行一次, setUp函数在create生命周期之前执行, 如果在setup函数内返回对象, 对象中的属性或方法可以模板template中直接使用例子: home.js中

<template>
  <div class="home">
    {{msg}}{{sayHello()}}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
  setup() {
    let msg = 'hello world'
    function sayHello() {
      return ', 你好 !'
    }
    return {
      msg,
      sayHello
    }
  }
});
</script>

恭喜你, vue3项目就搭好了, 明天再来逛逛vue3的新内容吧~