随笔- 101 文章- 4 评论- 11 阅读- 23万

vue3（二）（reactive，readonly，shallowReactive，toRef ，toRefs， toRaw）

reactive

用来绑定复杂的数据类型例如对象数组，他是不可以绑定普通的数据类型这样是不允许会报错

绑定普通的数据类型我们可以使用昨天讲到ref

你如果用ref去绑定对象或者数组等复杂的数据类型我们看源码里面其实也是去调用reactive

使用reactive 去修改值无须.value

reactive 基础用法

<template>
  <div>
    {{ person.name }}
  </div>
</template>
  
<script setup lang='ts'>
import { reactive } from 'vue'
let person = reactive({
   name:"小满"
})
person.name = "大满"
</script>
<style scoped>
</style>

数组异步赋值问题

这样赋值数据是变了，但是页面是不会变化的因为会脱离响应式，需要使用数组方法操作

<template>
  <div>
    {{ person }}
  </div>
</template>
  
<script setup lang='ts'>
import { reactive } from 'vue'
let person = reactive<number[]>([])
setTimeout(() => {
  person = [1, 2, 3]
  console.log(person);
   
},1000)
</script>
<style scoped>
</style>

解决方案1　　使用push

<template>
  <div>
    {{ person }}
  </div>
</template>
  
<script setup lang='ts'>
import { reactive } from 'vue'
let person = reactive<number[]>([])
setTimeout(() => {
  const arr = [1, 2, 3]
  person.push(...arr)
  console.log(person);
   
},1000)
</script>
<style scoped>
</style>

方案2

包裹一层对象

<template>
  <div>
    {{ person }}
  </div>
</template>
  
<script setup lang='ts'>
import { reactive } from 'vue'
type Person = {
  list?:Array<number>
}
let person = reactive<Person>({
   list:[]
})
setTimeout(() => {
  const arr = [1, 2, 3]
  person.list = arr;
  console.log(person);
   
},1000)
</script>
<style scoped>
</style>

readonly

拷贝一份proxy对象将其设置为只读

<template>
  <div>
    {{ person.count }}
  </div>
</template>
  
<script setup lang='ts'>
import { reactive ,readonly} from 'vue'
const person = reactive({count:1})
const copy = readonly(person)
  
 //person.count++ //可以增加
  
 copy.count++   //只读不可以增加
</script>
<style scoped>
</style>

shallowReactive

只能对浅层的数据如果是深层的数据只会改变值不会改变视图

<template>
  <div>
    <div>{{ state }}</div>
    <button @click="change1">test1</button>
    <button @click="change2">test2</button>
  </div>
</template>
  
  
<script setup lang="ts">
import { shallowReactive } from 'vue'
  
const obj = {
  a: 1,
  first: {
    b: 2,
    second: {
      c: 3
    }
  }
}
  
const state = shallowReactive(obj)
  
function change1() {
  state.a = 7  //可以改变视图
}
function change2() {
  state.first.b = 8  //不可以改变视图
  state.first.second.c = 9 //不可以改变视图
  console.log(state);
}
  
  
  
  
</script> 
  
  
<style>
</style>

toRef toRefs toRaw

toRef

如果原始对象是非响应式的就不会更新视图数据是会变的

<template>
   <div>
      <button @click="change">按钮</button>
      {{state}}
   </div>
</template>
  
<script setup lang="ts">
import { reactive, toRef } from 'vue'
  
const obj = {
   foo: 1,
   bar: 1
}
  
  
const state = toRef(obj, 'bar')
// bar 转化为响应式对象
  
const change = () => {
   state.value++
   console.log(obj, state);
  
}
</script>

如果原始对象是响应式的是会更新视图并且改变数据的　，为源响应式对象上的某个元素新创建一个 ref

<template>
   <div>
      <button @click="change">按钮</button>
      {{state}}
   </div>
</template>
  
<script setup lang="ts">
import { reactive, toRef } from 'vue'
  
const obj = reactive({
   foo: 1,
   bar: 1
})
  
  
const state = toRef(obj, 'bar')
// bar 转化为响应式对象
  
const change = () => {
   state.value++
   console.log(obj, state);
  
}
</script>

更改person.age的值时，
通过ref(person.age)得到的age1不会改变，因为ref是复制，拷贝了一份新的数据值单独操作, 更新时相互不影响
通过toRef(person,‘age’)得到的age2会改变，因为 toRef是引用。它为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的

<template>
  <div>
    <button @click="change">按钮</button>
    <h1>{{age1}}</h1>
    <h1>{{age2}}</h1>
  </div>
</template>
  
<script setup lang="ts">
import { reactive,ref, toRef } from "vue";
let person =reactive( { name: "long",age:23 });
 
    let age1 = ref(person.age);
    let age2=toRef(person,'age')
 
    const change = () => {
      person.age++
    };
 
</script>

应用: 当要将某个prop 的 ref 传递给复合函数时，toRef 很有用
useFeatureX函数需要使用props中的foo属性，且foo要为ref。　

setup (props, context) {
  const length = useFeatureX(toRef(props, 'foo'))
 
  return {
    length
  }
}

toRefs

可以帮我们批量创建ref对象主要是方便我们解构使用，将响应式对象Proxy 转换为普通对象，且元素都指向原始对象的ref

<template>
  <div>
    <button @click="change">按钮</button>
    {{ foo }}
  </div>
</template>
  
<script setup lang="ts">
import { reactive, toRefs } from "vue";
const obj = reactive({
  foo: 1,
  bar: 1,
});
 
let { foo, bar } = toRefs(obj);
 
const change = () => {
  foo.value++;
  console.log(foo, bar);
};
</script>

toRaw

将响应式对象转化为普通对象，返回 reactive或readonly代理的原始对象

import { reactive, toRaw } from 'vue'
  
const obj = reactive({
   foo: 1,
   bar: 1
})
  
  
const state = toRaw(obj)
// 响应式对象转化为普通对象
  
const change = () => {
  
   console.log(obj, state);
  
}