setup是vue3中的一个新的配置项，我们可以将组件中用到的数据，方法配置在setup中
setup处于beforeCreate和created两个钩子函数之前
beforeCreate() {
console.log('beforeCreate');
},
setup() {
console.log('setup', this);
},
created() {
console.log('create');
}
image.png
setup内部
this指向undefined
setup接受两个参数props和context
- props
setup函数的props是响应式的，但如果将其解构，响应式会丢失，如果必须解构，或者想要将某个 prop 传入到一个外部函数中但想保持响应性，那么你可以使用 toRefs() toRef() 这两个工具 API
import { toRefs, toRef } from 'vue'
toRefs 将props全部转换为ref再解构
const { title } = toRefs(props)
toRef 将props的一个属性转换为一个ref
const title = toRef(props, 'title')
props: {
title: String,
name: String
},
setup(props) {
const {title, name} = toRefs(props)
console.log(title.value);
console.log(name.value);
}
- context
setup上下文，暴露了一些属性，可解构为{ attrs, slots, emit, expose }
attrs: 一个非响应式对象，等价于$attrs
slots: 插槽，非响应式对象，等价于$slots
emit: setup内部没有this,使用emit代替this.$emit,用来抛出事件
expose: 暴露公共属性，可选择性的暴露想要暴露的属性和方法，也可整个关闭组件，不暴露数据
setup中的值需要通过.value来获取
setup() {
let count = ref(0)
console.log(count);
console.log(count.value); //0
}
image.png
setup中的属性和方法都必须return出去，否则无法使用
setup() {
let count = ref(0)
let title = '我是父组件传来的值'
return {
title
}
},
created() {
console.log(this.count); //undefined
console.log(this.title); //我是父组件传来的值
}
setup函数只能是同步的，不能是异步的
尚在学习中，欢迎指正和建议
