通过10个实例小练习，快速入门熟练 Vue3.0 核心新特性

Vue3.0 发 beta 版都有一段时间了，正式版也不远了，所以真的要学习一下 Vue3.0 的语法了。

GitHub 博客地址: https://github.com/biaochenxu...

环境搭建

$ git pull https://github.com/vuejs/vue-next.git
$ cd vue-next && yarn

下载完成之后打开代码， 开启 sourceMap :

• tsconfig.json 把 sourceMap 字段修改为 true: "sourceMap": true
• rollup.config.js 在 rollup.config.js 中，手动键入： output.sourcemap = true
• 生成 vue 全局的文件：yarn dev
• 在根目录创建一个 demo 目录用于存放示例代码，并在 demo 目录下创建 html 文件，引入构建后的 vue 文件

---

api 的使用都是很简单的，下文的内容，看例子代码就能懂了的，所以下面的例子不会做过多解释。

reactive

reactive: 创建响应式数据对象

setup 函数是个新的入口函数，相当于 vue2.x 中 beforeCreate 和 created，在 beforeCreate 之后 created 之前执行。

    
    
    
    
    
    


    
reactive
    

ref & isRef

ref : 创建一个响应式的数据对象
isRef : 检查值是否是 ref 的引用对象。

    
    
    
    
    
    


    
ref & isRef
    

Template Refs

使用 Composition API 时，反应性引用和模板引用的概念是统一的。

为了获得对模板中元素或组件实例的引用，我们可以像往常一样声明 ref 并从 setup() 返回。

    
    
    
    
    
    


    
Template Refs
    

---

    
    
    
    
    
    


    
Template Refs
    

toRefs

toRefs : 将响应式数据对象转换为单一响应式对象

将一个 reactive 代理对象打平，转换为 ref 代理对象，使得对象的属性可以直接在 template 上使用。

    
    
    
    
    
    


    
toRefs
    

computed

computed : 创建计算属性

    
    
    
    
    
    


    
computed
    

---

    
    
    
    
    
    


    
computed
    

watch & watchEffect

watch : 创建 watch 监听

watchEffect : 如果响应性的属性有变更，就会触发这个函数

    
    
    
    
    
    


    
watch && watchEffect
    

v-model

v-model：就是双向绑定

    
    
    
    
    
    


    
v-model
    

readonly

使用 readonly 函数，可以把 普通 object 对象、reactive 对象、ref 对象 返回一个只读对象。

返回的 readonly 对象，一旦修改就会在 console 有 warning 警告。

程序还是会照常运行，不会报错。

    
    
    
    
    
    


    
readonly
    

provide & inject

provide 和 inject 启用类似于 2.x provide / inject 选项的依赖项注入。

两者都只能在 setup() 当前活动实例期间调用。

import { provide, inject } from 'vue'

const ThemeSymbol = Symbol()

const Ancestor = {
  setup() {
    provide(ThemeSymbol, 'dark')
  }
}

const Descendent = {
  setup() {
    const theme = inject(ThemeSymbol, 'light' /* optional default value */)
    return {
      theme
    }
  }
}

inject 接受可选的默认值作为第二个参数。

如果未提供默认值，并且在 Provide 上下文中找不到该属性，则 inject 返回 undefined。

Lifecycle Hooks

Vue2 与 Vue3 的生命周期勾子对比：

| Vue2 | Vue3 |
| :------ | :------ |
| beforeCreate | setup(替代) |
| created | setup(替代) |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
| 空 | onRenderTracked |
| 空 | onRenderTriggered |

除了 2.x 生命周期等效项之外，Composition API 还提供了以下调试挂钩：

• onRenderTracked
• onRenderTriggered

这两个钩子都收到一个 DebuggerEvent，类似于观察者的 onTrack 和 onTrigger 选项：

export default {
  onRenderTriggered(e) {
    debugger
    // inspect which dependency is causing the component to re-render
  }
}

---

例子：

    
    
    
    
    
    


    
Lifecycle Hooks
    

最后

本文只列出了笔者觉得会用得非常多的 api，Vue3.0 里面还有不少新特性的，比如 customRef、markRaw ，如果读者有兴趣可看 Vue Composition API 文档。

• Vue Composition API 文档: https://composition-api.vuejs...
• vue-next 地址: https://github.com/vuejs/vue-...

参考文章：

• Vue3 尝鲜

推荐阅读：

1. 重磅：GitHub 上 100K+ Star 的前端面试开源项目汇总（进大厂必备）

1. 强烈推荐: GitHub 上 170K+ Star 的前端学习的数据结构与算法项目
2. 一张图理清Vue 3.0的响应式系统，实现精简版的响应式系统
3. 黑学习方式：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

支持一下下