Vue3+TypeScript学习笔记（二）

reactive和ref的区别:

1. ref支持所有数据类型,但reactive只能支持引用数据类型(object Array Map Set)
2. ref取值都需要.value(无论是否是引用数据类型),reactive则不用

reactive使用注意事项:不能覆盖响应式对象,否则会导致响应式失效。解决方案:使用扩展运算符解构或在对象上再添加一个属性,针对属性进行操作

<template>
    <form>
        <ul>
            <li>{{ form }}</li>
        </ul>
    </form>
    <div v-for="(item, index) in form" :key="index">
        <li>{{ item }}</li>
    </div>
    <div v-for="item in list.arr">
        {{ item }}
    </div>
    {{ obj }}
    <!-- 阻止默认事件 -->
    <button @click.prevent="add">添加</button>
    <button @click="changeObj">修改obj</button>
</template>

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

// ref适用于所有数据类型,但reactive仅适用于对象、数组、Map、Set
// ref取值都需要加.value,但reactive不用
// reactive不需要.value
// reactive proxy不能直接给对象赋值,因如此做会覆盖响应式对象导致响应式失效
// 解决方案:数组可以使用push+解构
let form = reactive<Array<string>>(['小满'])
let list = reactive<{ arr: string[] }>({
    arr: [],
})
let obj = shallowReactive({
    foo: {
        arr: [1, 2, 3],
    },
})
const add = () => {
    setTimeout(() => {
        let res = ['1', '2', '3']
        // 破坏了响应式对象:可以使用解构
        // form = res
        form.push(...res)
        // 或者在对象中再开一块属性,然后针对属性做修改达到不破坏的目的
        list.arr = res
        console.log(form)
    }, 200)
}
// shallowReactive和shallowRef相似,shallowReactive只能监测到第一层对象的改变,shallowRef只能监测到.value
// shallowReactive和shallowRef同样不能写在一起
const changeObj = () => {
    obj.foo.arr = [4, 5, 6]
    console.log(obj.foo.arr)
}