setup()基本使用
<script>
import { ref } feom 'vue'
const count = ref(0)
console.log(this.count)
return {
count
}
</script>
这是组合api最基本的用法，ref（）方法是用来定义相应式数据的。记住一定要retun 对象出来才能在模版中使用，才是相应式的。
在其中调用可以直接使用this来调用
还有一种用法，是使用模版<script setup>
<script setup>
import { ref } feom 'vue'
const count = ref(0)
console.log(count.value)
</script>
这是组合api最基本的用法，ref（）方法是用来定义相应式数据的。在这里可以不需要retun因为语法糖已经帮你处理了。
在其中调用可以不能使用this来调用，调用的结果是undefined。需要通过.value来调用
访问Props
<script>
export default{
props:{
title: String
},
setup(props){
console.log(props.title)
}
}
</script>
你要注意了，props在不解构的情况下是响应式的。一但解构将不再是相应式数据。建议通过props.来调用你的值
如果你想要通过解构的方式，需要如下来再次给你的数据加上相应式
<script>
import { toRefs,toRef } feom 'vue'
export default{
props:{
title: String
},
setup(props){
const { title } = toRefs(props)
const title = toRef(props,'title')
}
}
</script>
那么toRefs和toRef有什么区别呢
toRefs是给可枚举的对象添加响应式的，如果是基本类型或者不存在的不可能枚举的建议使用toRef来创建
setup上下文
传入setup函数的第二个参数是一个setup上下文对象，具体如何上代码
<script>
import { toRefs,toRef } feom 'vue'
export default{
props:{
title: String
},
setup(props，context){
// 透传Attributes (非响应式的对象，等价于$attrs)
console.log(context.attrs)
// 插槽 (非响应式的对象，等价于$slotts)
console.log(context.slotts)
// 触发事件 (非响应式的对象，等价于$emit)
console.log(context.emit)
// 暴露公共属性 (非响应式的对象，等价于$expose)
console.log(context.expose)
}
}
</script>
那么在setup语法糖<script setup> </script> 中如何使用的呢。看下面代码!
<script setup>
import { defineProps,defineEmits,useAttrs,useSlots } feom 'vue'
// 获取 props
const props = defineProps({
title:String
})
// 获取emit 方法，入参是一个数组支持多个输入
const emit =defineProps(["onFn1","onFn2"])
// 调用方式
emit("onFn1",123)
emit("onFn2",234)
// 获取 $attrs
const attrs = useAttrs()
// 获取$slots
const slots= useSlots()
</script>
在这里特别提醒：我们使用setup语法糖相当于闭包，处理当前的template模版能访问谁度都访问不到包括使用ref访问子组件的方式所以有了如下api
<script setup>
import { defineExpose} feom 'vue'
const a = 1
const b = 2
// 这个时候通过 defineExpose将a暴露出去了就能通过ref访问到了，但是b不行
defineExpose({
a
})
</script>
那么我们如何获取DOM元素调用DOM元素呢
- 语法糖 <p ref="refName"> 调用 const refName = ref() 这样就行了只要保持和你在模版中的命名一致就行
- 非语法糖就更加简单和vue2 保持一致 可以直接 this.refs.refName
