Vue 3.x Composition API
setup
调用时机
创建组件实例,然后初始化 props ,紧接着就调用setup 函数;
从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用;
https://composition-api.vuejs.org/zh/api.html
tempalte
如果 setup 返回一个对象,则对象的属性将会被合并到组件模板的渲染上下文
<template>
<div>{{ count }} {{ object.foo }}</div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
setup() {
const count = ref(0)
const object = reactive({ foo: 'bar' })
// export 给模板
return {
count,
object,
}
},
}
</script>
注意 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
- 减少代码冗余,提高可读性,可维护性
https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/
- 提高代码复用,替代 mixin
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!