2.vue3之reactive全家桶

你应该离开舒适的床, 起来坐在冰冷的板凳上, 提什修为.

1. reactive()

于ref的区别:

1. ref支持所有的类型, 而reactive只支持引用类型 Array Object Map Set

let form = reactive({
    name: '鲁班七号',
    age: 12
})
// 定义类型
type M = {
    name: string
    age: number
}
let form = reactive<M>({
    name: '鲁班七号',
    age: 12
})

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

form.age = 18

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

<ul>
  <li v-for="item in list">{{item}}</li>
</ul>
<button @click=add>提交</button>


let list = reqctive<string[]>([])
const add = () => {
  setTimeout(() => {
    let res = ['伽罗', '香香', '阿狸']
    list = res
    console.log(res); // 此时数组是有值, 但是页面视图不会更新!
  }, 2000);
}

解决方案:

// 1. 使用数组的方法加es6语法
const add = () => {
  setTimeout(() => {
    let res = ['伽罗', '香香', '阿狸']
    list.push(...res)
    console.log(res);
  }, 2000);
}

// 2. 改变数据结构为对象形式,把数组作为一个属性解决
<ul>
  <li v-for="item in list.arr">{{item}}</li>
</ul>
<button @click=add>提交</button>

let list = reactive<{arr: string[]}>({arr: []})
const add = () => {
  setTimeout(() => {
    let res = ['伽罗', '香香', '阿狸']
    list.arr = res
    console.log(res);
  }, 2000);
}

2. readonly()

把reactive中的属性变为只读的

let obj = reactive({name: '香香'});
const read = readonly(obj)
read.name = '狼狗'  // 报错, 无法修改, 因为是只读的

readonly()会受reactive的影响的

<button @click=show>修改</button>

const show = () => {
  // read.name = '狼狗';    // 无法修改, 只读的
  obj.name = '狼狗';   // 可以修改, 并且read也会跟着修改
  console.log(obj,read);
}

3. shallowReactive()

效果和 shallowRef 是一样的