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

1. 将一个响应式对象转换为普通对象 但是其属性 还是具有响应式
2. 可以在不失去响应性的情况下破坏结构
3. 对象本身没有响应式 属性是有的

<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插槽