Setup、ref、reactive、toRef、toRefs基础用法
ref 与reactive区别
ref
ref 用与基本数据类型 xxx.value 取值操作
<template>
{{sum}}
</template>
<script>
import {ref} from 'vue';
export default {
name: 'App',
setup(){
const sum=ref(99)
console.log("sum",sum.value)
return {
sum
}
}
}
</script>
reactive
reactive 用于一个对象的响应式
<template>
{{sum.age}}
{{sum.name}}
</template>
<script>
import {reactive} from 'vue';
export default {
name: 'App',
setup(){
const sum=reactive({
name:"chen",
age:23
})
console.log("sum",sum.age,sum.name)
return {
sum
}
}
}
</script>
toRefs
- 将一个响应式对象转换为普通对象 但是其属性 还是具有响应式
- 可以在不失去响应性的情况下破坏结构
- 对象本身没有响应式 属性是有的
<template>
{{foo}}
{{bar}}
</template>
<script>
import {reactive,toRefs} from 'vue';
function useFeatureX() {
const state = reactive({
foo: 1,
bar: "hello"
})
return toRefs(state)
}
export default {
name: 'App',
setup(){
const {foo,bar}=useFeatureX()
return {
foo,
bar
}
}
}
</script>
toRefs 和 toRef
context (不具有响应式) 父组件调用子组件的方法
attrs 还有slot插槽
区别就是一个是转换成多个ref 另一个是单个ref转换
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3
setup用法
props(具有响应式) 里的值需要用toRefs 才能有响应式
context (不具有响应式) 父组件调用子组件的方法
attrs 还有slot插槽