Vue 3.x Composition API

setup

调用时机

创建组件实例，然后初始化 props ，紧接着就调用setup 函数;

从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用;

https://composition-api.vuejs.org/zh/api.html

tempalte

如果 setup 返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文

注意 setup 返回的 ref 在模板中会自动解开，不需要写 .value;

function / jsx

setup 也可以返回一个函数，函数中也能使用当前 setup 函数作用域中的响应式数据

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })

    return () => h('div', [count.value, object.foo])
  },
}

why-the-composition-api

1. 减少代码冗余，提高可读性，可维护性

https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

2. 提高代码复用，替代 mixin

Composition API

official en-US docs ?

https://vuejs.org/api/composition-api-setup.html

https://vuejs.org/guide/extras/composition-api-faq.html

official zh-Hans docs ?

https://staging-cn.vuejs.org/

https://staging-cn.vuejs.org/api/composition-api-setup.html

https://staging-cn.vuejs.org/guide/extras/composition-api-faq.html

shit unofficial zh-Hans docs ??

https://v3.cn.vuejs.org/api/composition-api.html#setup

https://v3.cn.vuejs.org/guide/composition-api-introduction.html#什么是组合式-api

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！