快速了解Vue 3 Composition API

Vue 2和Vue 3的区别

• createApp()取代了 new Vue()

• Vue 3的 Compostion API和 Vue 2的data options

    Vue 2，数据定义在data，函数定义在methods，代码分散，耦合度高。

    Vue 3，数据和方法都写在setup里，方法可以抽离出来放在单独的文件里，方便我们做一些代码结构上的优化。

关于Composition API的意义，看完这篇文档就很清楚了。

Composition API

setup

我们可以在setup中使用ref定义响应式的对象，然后使用它。

setup() {
  const xxx = ref(null)
}

在setup中使用：xxx.value

在模板中使用：{{xxx}}

参数

• props

    setup的第一个参数，通过它可以获取组件的props。

    props是响应式的 ，当传入新的prop时它会更新。它不能用ES6解构，解构会消除它的响应性。

    如果要解构props，需要用到toRefs或者toRef。

• context

    setup的第二个参数，它是一个普通的JavaScript对象（因此可以解构），包括attrs、slots、emit三个属性。

    attrs和slots都是有状态的对象，会根据组件的状态变化而变化（需要用.语法获取，如attrs.x），但是跟props不同，它们不是响应式的 。如果要对它们的变化做一些操作，需要在onUpdated生命周期中去做。

执行时机

setup 选项在组件实例创建之前 执行。

可以访问的property：props、attrs、slots、emit；

不能访问的组件选项：data、computed、methods。

谨慎使用this

由于setup是在创建组件实例之前执行的，因此它里面的this不能获取到当前组件实例。

返回值

返回响应式变量，然后就能在模板中使用了。

setup() {
  const x = ref(null)
  const y = function() {  
    //... 
  }
  return { x, y }
}

此外，还能返回渲染函数。

 setup() {
  const readersNumber = ref(0)
  const book = reactive({ title: 'Vue 3 Guide' })
  // 请注意这里我们需要显式调用 ref 的 value
  return () => h('div', [readersNumber.value, book.title])
}

生命周期钩子

在setup中使用onX来使用声明周期钩子：

setup() {
  // mounted
  onMounted(() => {
    console.log('Component is mounted!')
  })
}

这些函数接受一个回调函数，当钩子被组件调用时将会被执行。

注意beforeCreate和created并没有对应的onX函数，因为setup就是围绕这两个生命周期钩子运行的。在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

Provide / Inject

Provide / Inject是一对用来解决组件多层嵌套时数据传递问题的API。

使用时需要从vue中导入provide或者inject函数，然后就能在setup中使用了。

使用Provide

provide(name, property)

使用Inject

inject(name)

getCurrentInstance

在setup中不能使用this来获取当前组件实例，因此Vue 3提供了getCurrentInstance 来访问内部组件实例。

官方文档建议，不要在应用中使用这个函数，而是在库中等高阶使用场景使用。

注意

这篇文章只是快速过一下Vue 3的Composition API，有一些细节没有提到，详细请参考文档。

参考

Vue 3 | composition-api-introduction