[vue3]新特性 组合式API（Composition API）学习

组合式api的主要目的是将同一个逻辑关注点相关代码收集在一起

setup

1.在 setup应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。
2.setup的两个参数是props和context
我们先来打印一下props

props: {
    msg: String
},
setup(props,context) {
    console.log(props.msg,props)
}

打印的结果是

props

可以看到props是一个proxy 我们能用this.直接访问其实也是通过代理来实现的
打印context

context

可以看到context暴露了 attrs emit slots 说明在setup中data methods computed是访问不到的
下面是简单的应用

setup(props,context) {
    console.log(props.msg,props)
    console.log(context)
    const data = reactive({ // reactive使其成为响应式
      count: 1,
      doubleCount: computed(() => data.count * 2) // 独立的 computed 属性
    })
    let timer
    onMounted(() => { // 生命周期钩子
      timer = setInterval(() => {
        data.count ++
      }, 1000)
    }),
    onUnmounted(() => {
      clearInterval(timer)
    })

    const msg = ref('ref msg') // setup中的优先级更高
    return {data, msg}
  }

----to continue