setup
setup 是vue3 新增的一个选项,他是组件内使用 composition API的入口
setup 执行时间是在 beforeCreate 和 created之间,这个结论时错误的。setup 再beforeCreate和created之前
setup 的两个参数 props context
props指的是父组件传递过来的值,setup 中接受的props是响应式的,当传入新的props时会及时被跟新
context 指的是上下文 触发事件 emit 插槽slots以及attrs
在使用props时不能使用 es6的解构,因为这会让props不支持响应式
ref
ref 用来创建基础数据类型的响应式数据
const a = ref(0)
console.log("aaa",a.value)
ref创建的响应式数据 在js 里需要加上.value 才能访问,在模板中可以直接通过变量名访问
<div class="about">
{{a}}
</div>
reactive
reactive用来创建引用数据类型的响应式数据
let info = reactive({
name:'小明',
age:18,
sex:'男'
})
toRef
toRef的作用,使用ref将某个对象的属性变成响应式数据,修改当前的数据是不会影响到原数据的,
但是使用toRef将对象的某个属性编程响应式数据,修改当前的数据式会影响到原数组的
toRef可以理解为是将对象的某个属性浅拷贝为某个值
setup() {
const a = ref(0)
let info = reactive({
name:'小明',
age:18,
sex:'男'
})
const nameRef = toRef(info,'name')
setTimeout(()=>{
info.name="小红"
console.log("info",info.name,nameRef.value)//小红 小红
},3000)
setTimeout(()=>{
nameRef.value='我是小虎'
console.log("info",info.name,nameRef.value)//我是小虎 我是小虎
},6000)
console.log("aaa",a.value)
console.log("info",info)
onMounted(() => {});
return {
a,
info,
nameRef
}
},
toRef 将经过reactive处理过的数据的某个属性拿到,然后修改这个属性,无论是修改原引用数据类型还是toRef处理后的数据,他们都会相互影响
toRefs
将对象的所有属性浅拷贝为另一个对象,
const user = reactive({
userName:'小朋友',
age:25
})
const userMore = toRefs(user)
userMore.userName.value="大朋友"
console.log("userMore-userName",userMore.userName.value,user.userName)//小朋友 小朋友
使用toRefs处理后的数据 在使用时要加上 .value 不论是在模板还是在js中