Composion API

原因

• 处理大型应用时，解决代码的共享和重用问题
• 让代码变得更紧凑，能够将同一个逻辑关注点相关代码收集在一起

compositon-api 相关函数和属性

• setup
• ref和reactive
• watch和watchEffect
• computed
• 生命周期钩子
  
  

setup

setup 接收两个参数，一个是prop, 另一个是context。
用法：

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title) //这里的props是响应式的
  }
}

这里的props是响应式的，但是不能直接使用ES6解构，比如 const {title} = props ，这样会消除prop的响应性。需要借助 toRefs来实现，如 const {title} = toRefs(props)，如果是可选属性，只能使用const title = toRef(props,'title')。toRefs和toRef需要使用前要先引入。

context

// MyBook.vue

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

context是非响应性的，可以放心使用ES6变量解析。

在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

//To be continue

参考：
Vue3官方文档 - 组合式 API 介绍