Vue3 Reactive全家桶

1. ref 支持所有类型，reactive 只支持应用类型 Array、Object、Map、Set、Date、Function

2. ref 取值 赋值 都需要加 .value reactive 取值 赋值 不需要加 .value

3. reactive 是proxy 代理对象 不能直接赋值 否则会破坏响应式对象

• 解决方案1： 数组可以使用push + 解构赋值

<template>
  <div>
    <ul v-for="item in list" :key="item">
      <li>{{ item }}</li>
    </ul>
    <button @click.prevent="add">提交</button>
  </div>
</template>

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

let list = reactive<string[]>([])
const add = () => {
  setTimeout(() => {
    let res = ['apex','cs','lol']
    //list = res //数据变化了 但是视图没有变化
    list.push(...res)//解决方案1
    console.log(list);
  }, 1000);
}

</script>
<style scoped>

</style>

• 解决方案2：添加一个对象，把数组作为一个属性去解决

  <div>
    <ul v-for="item in list.arr" :key="item">
      <li>{{ item }}</li>
    </ul>
    <button @click.prevent="add">提交</button>
  </div>
</template>

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

//解决方案2
let list = reactive<{arr:string[]}>({
  arr:[]
})
const add = () => {
  setTimeout(() => {
    let res = ['apex','cs','lol']
    list.arr = res
    console.log(list);
  }, 1000);
}

</script>
<style scoped>

</style>

4. readonly 只读属性

<template>
  <div>
    <button @click="show">查看</button>
  </div>
</template>

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

let obj = reactive({name:'zhangsan'})
const read = readonly(obj)

//read.name = 'lisi' //只读 无法赋值
const show = () => {
  read.name = 'lisi'// 只读 无法赋值
  obj.name = 'lisi'//  可赋值 因为readonly会受原始值影响
  console.log(obj,read)
}

</script>
<style scoped>

</style>

5. shallowReactive 浅层次响应数据变化

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

<script setup lang='ts'>
import { ref,reactive,readonly,shallowReactive } from 'vue'
//shallowReactive 浅层 知道第一个属性bar 
//shallowReactive 也会被 reactive 所影响

const obj = shallowReactive({
  foo:{
    bar:{
      num:1
    }
  }
})
const edit = () => {
  obj.foo.bar.num = 123
  console.log(obj)
}

</script>
<style scoped>

</style>