今天你out了吗？从零到一我们一起学习vue3最新API（持续更新中～）

atwill007
1,430 阅读5分钟

vue3已经呼之欲出了，目前最新release版本是v3.0.0-beta.4，发版速度还是挺频繁的，尤小右前几天还在B站做了vue3相关的直播，已经推荐在小的项目中使用vue3相关功能了，但是线上项目还是要慎重，但是vue3相关的学习不能停～～～

搭建开发环境

工欲善其事，必先利其器。下面我们先利用vue-cli搭建一个vue的开发环境

觉得麻烦的朋友，可以跳过下面步骤，直接Fork这个gitHub项目vue3-beta来做vue3.beta.x相关功能的尝试

第一步，使用下面的命令安装和查看vue-cli的版本

npm install -g @vue/cli
vue -V

我这边的版本是最新版的 @vue/cli 4.3.1

第二步，我们来初始化项目

vue create my-vue3-beta

然后会出现vue-cli的命令行交互界面，我们选择Manually select features来根据自己的需求自定义我们的插件选项

Vue CLI v4.3.1
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

接下来我们选择一些项目相关的功能选项来

注意不要选择TypeScript，目前vue-cli的vue版本还是2.x的，后面我们会用到vue-cli-plugin-vue-next来做vue3的依赖升级，该插件对ts支持还在TODO List里面，所以我们暂时不勾选ts

? Check the features needed for your project:

 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◯ E2E Testing

剩下的的选项我们就按照自己的需求进行选择，也可一路回车使用默认选项，vue-cli会帮我们生成最终的项目

下面是我这边的选项，仅供参考

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Rou
ter, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server s
etup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CS
S Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint,
etc.? In dedicated config files
? Save this as a preset for future projects? No

加入Vue 3 Beta支持

这里我们使用vue-cli的插件vue-cli-plugin-vue-next，来使用Vue 3 Beta

我们运行下面命令

温馨提示，暂时不要在公司项目中使用，可能有未知的bug

vue add vue-next

这个插件会自动帮我们把vue3.0-beta.x相关的依赖安装和升级完成

"vue": "^3.0.0-beta.1",
"vue-router": "^4.0.0-alpha.5",
"vuex": "^4.0.0-alpha.1"
...

并且把vue2.x相关语法升级到vue3的语法

vue2.x我们实例化vue是这样

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app")

vue3是这样

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"

createApp(App)
  .use(router)
  .use(store)
  .mount("#app")

然后就可以愉快的玩耍了～～～

下面是Vue3六大功能亮点

后面会挑重点来学习

  • Composition API
  • Performance
    • 性能比 Vue 2.0 更强，主要体现在包的的大小和运行效率上
  • Tree shaking support
    • 可以将 Vue 的无用模块移除，仅打包需要的功能
  • Fragment, Teleport, Suspense
    • Fragment 碎片
    • Teleport 即 Protal 传送门
    • Suspense 悬念
  • Better TypeScript support
    • 更优秀的 TS 支持
  • Custom Renderer API
    • 暴露了自定义渲染 API

Composition API

按照官方的说明，这是一组基于功能的附加API，允许灵活地组成组件逻辑

下面直接上代码

<template>
  <div class="composition-api">
    <p>Count is: {{ state.count }}, double is: {{ state.double }}</p>
    <button @click="increment">Click Me</button>
  </div>
</template>
<script>
import { reactive, computed } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  }
};
</script>

上面这堆代码就是使用vue提供的reactive函数来完成计数展示的

下面我们抽取个函数看看(用过React的应该比较熟悉)

<template>
  <div class="composition-api">
    <p>Count is: {{ state.count }}, double is: {{ state.double }}</p>
    <button @click="increment">Click Me</button>
  </div>
</template>
<script>
import { reactive, computed } from "vue";

// 这和React的Hook也太像了吧 😂
function useCount(defaultVal) {
  const state = reactive({
    count: defaultVal,
    double: computed(() => state.count * 2)
  });

  function increment() {
    state.count++;
  }

  return {
    state,
    increment
  };
}

export default {
  setup() {
    return useCount(0);
  }
};
</script>

和React的Hook惊人的相似，但确实填充了vue这一块的短板，给vue提供了一套新的代码组织方式

关键点

  • setup 函数
    • setup 函数是新的组件选项，是组件内使用 Composition API 的入口点
    • 调用时机：创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用
    • 组合式 API 会在 2.x 的选项 (data、computed 和 methods) 之前解析，并且不能提前访问这些选项中定义的 property
    • this 在 setup() 中不可用,已经不是vue2中的vue实例了
    • setup() 函数返回的 property 将会被暴露给 this。它们在 2.x 的选项中可以访问到。
  • reactive
    • 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()
  • ref
    • 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value
    • 注意使用时不能使用对象解构，vue3利用的是Object的地址引用进行的实现

未完待续～

后面这个项目vue3-beta也会加入一些新的功能，欢迎star

对前端技术交流有兴趣的同学，可以微信扫码下面的关注公众号【见闻号】或者加入前端开发者微信群，方便大家交流前端技术

本文为原创文章，仅作个人存档所用，请勿随意转载。如确有转载需求，请在转载时务必带上原文链接！码字不易，多谢合作！

avatar
文章
阅读
粉丝