学习Vue3——Reactive全家桶

reactive

• reactive只用于给引用类型来创建响应（Array,Object,Map,Set），ref是支持所有类型

<template>
  <div>{{ obj }}</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

type T = {
  name: string
  age: number
}
// let p = reactive(1) // 会报错
let obj = reactive<T>({
  name: 'zs',
  age: 18
})
</script>

• ref 取值、赋值都需要加.value ,reactive是不需要.value

<template>
  <div>{{ obj }}</div>
  <button @click="change">修改</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

type T = {
  name: string
  age: number
}
// let p = reactive(1) // 会报错
let obj = reactive<T>({
  name: 'zs',
  age: 18
})

const change = () => {
  obj.name = 'ls'
  obj.age = 20
}

• reactive是proxy代理的对象,不能直接赋值，会破坏响应式对象

<template>
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
  <button @click="add">添加</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

let list = reactive<string[]>([])

const add = () => {
  // 模拟请求获取数据,赋值给我们定义的变量
  setTimeout(() => {
    let res = ['1', '2', '3']
    list = res
    // 页面没有改变
    console.log(list) // ['1', '2', '3']
  }, 1000)
}
</script>

解决方案一:使用push

import { reactive } from 'vue'

let list = reactive<string[]>([])

const add = () => {
  setTimeout(() => {
    let res = ['1', '2', '3']
    // 使用push
    list.push(...res)
    console.log(list) 
  }, 1000)
}

解决方案二：包裹一层对象

<template>
  <ul>
    <li v-for="item in obj.list">{{ item }}</li>
  </ul>
  <button @click="add">添加</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

type person = {
  list: Array<string>
}

let obj = reactive<person>({
  list: []
})

const add = () => {
  setTimeout(() => {
    let res = ['1', '2', '3']
    obj.list = res
    console.log(obj.list)
  }, 1000)
}
</script>

readonly

设置只读

<script setup lang="ts">
import { reactive, readonly } from 'vue'

let person = reactive({ name: 'zs' })

let read = readonly(person)

// error:无法分配到 "name" ，因为它是只读属性
read.name = 'ls'
</script>

可以修改源数据的值,这样只读对象也会改变

<template>
  <button @click="change">修改</button>
</template>

<script setup lang="ts">
import { reactive, readonly } from 'vue'

let person = reactive({ name: 'zs' })

let read = readonly(person)

let change = () => {
  // error:无法分配到 "name" ，因为它是只读属性
  // read.name = 'ls'
  // 可以修改原数据的值,这样只读对象也会改变
  person.name = 'ls'
  console.log(person, read)
}
</script>

shallowReactive

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

<template>
  <div>{{ obj }}</div>
  <button @click="change">修改</button>
</template>

<script setup lang="ts">
import { shallowReactive } from 'vue'

let obj = shallowReactive({
  foo: {
    bar: {
      name: 'ls'
    }
  }
})

let change = () => {
  obj.foo.bar.name = 'hhh'
  // 值改变,视图不会更新
  console.log(obj)
}
</script>

shallowReactive跟shallowRef一样，只能修改第一层的数据

<script setup lang="ts">
import { shallowReactive } from 'vue'

let obj = shallowReactive({
  foo: {
    bar: {
      name: 'ls'
    }
  }
})

let change = () => {
	// 这样可以
  obj.foo = {
    bar: {
      name: 'hhh'
    }
  }
  // obj.foo.bar.name = 'hhh'
  // 值改变,视图不会更新
  console.log(obj)
}
</script>

同时shallowReactive跟shalllowRef一样，shalllowRef会受到ref的影响，shallowReactive也会受到reactive的影响

<template>
  <div>{{ person }}</div>
  <div>{{ obj }}</div>
  <button @click="change">修改</button>
</template>

<script setup lang="ts">
import { reactive, shallowReactive } from 'vue'

let person = reactive({ name: 'zs' })

let obj = shallowReactive({
  foo: {
    bar: {
      name: 'ls'
    }
  }
})

let change = () => {
  person.name = '我改变了'
  obj.foo.bar.name = '我受到了影响'
  // 值,视图都改了
  console.log(person, obj)
}
</script>