组合式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
