前言

vue3.0 发布了，啊啊啊啊  刺激啊 （学哦）

博客平台、公众号、朋友圈基本都被传闻了，

可见 Vue3.0 的被期待程度，因为 React 16 发布的时候，也米有那么疯狂，让我有点震惊的是 Vue 有 130 万的使用者。

 

其实在4月的时候就已经出来，只不过在9月的时候正式发布了，前面也学习了下3.0的语法糖，现在在看看

 

Vue3.0 更新了什么

一个是 Composition API，另一个是对 TypeScript 的全面支持。

团队还会出一个 Vue 2.7 的版本，给予 2.x 用户一些在 3.0 版本中被删除方法的警告，这有助于用户的平稳升级。

Nuxt3 好像还在路上，但是目前看来，市面上的各大组件库还没来得及针对 Vue3.0 进行改版升级。

周边的插件如 Vue-Router、Vuex、VSCode 插件 Vetur 等都在有序的进行

Vue3.0 变化在哪？

下面以代码片段的形式为大家介绍一下 Vue3.0 作出

setup 函数

• 执行机制

setup是在创建组件实例并完成props初始化之后执行的，也是在beforeCreate钩子之前执行，无法访问option(data、comupted、methods等)选项，而option可使用setup中返回的变量。

• 没有 this：在解析其他组件选项之前就已经调用了 setup()

• 接受两个参数：

  • props：组件传参
  • context：执行上下文，包含三个属性方法：attrs、slots、emit

export default {
    props: {
        user: {
            type: String,
            defalut: 'Libai'
        }
    },
    setup(props, context) {
        console.log(props.user)
        console.log(context)
    }
}

• 生命周期

其内部使用生命周期钩子需要在前面加上on

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

import { onMounted } from 'vue'
export default {
    setup() {
        // mounted
        onMounted(() => {
            console.log('Component is mounted!')
        })
    }
}

 

钩子函数	stup使用
beforeCreate	不支持
created	不支持
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

• 渲染函数

setup 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态：

// MyBook.vue
import { h, ref, reactive } from 'vue'
export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // Please note that we need to explicitly expose ref value here
    return () => h('div', [readersNumber.value, book.title])
  }
}

provide & inject

类似于vue2中provide与inject, vue3提供了对应的provide与inject API，实现组件传参。

provide 函数允许你通过两个参数定义 property：

• property 的 name (<String> 类型)
• property 的 value

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'
export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
</script>

inject 函数有两个参数：

• 要注入的 property 的名词
• 一个默认的值 (可选)

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>

应用的配置项

config 是一个包含 Vue 应用程序全局配置的对象。可以在挂载应用程序之前修改下面列出的属性。

• devtools 类型： boolean 默认值： true 如何使用：

app.config.devtools = true

是否开启 vue-devtools 工具的检测，默认情况下开发环境是 true，生产环境下则为 false。

• errorHandler 类型： Function 默认值： undefined 如何使用：

app.config.errorHandler = (err, vm, info) => {
  // info 为 Vue 在某个生命周期发生错误的信息
}

为组件渲染功能和观察程序期间的未捕获错误分配处理程序。

• globalProperties