前端学习-vue视频学习015-其他API

尚硅谷视频教程

shallowRef shallowReactive

• 浅层次的响应式数据（仅第一层）
• shallowRef ：只能整体修改 person.value可以修改，但是person.value.name无法修改
• shallowReactive ：只能修改对象的第一层数据 car.brand可以修改，但是car.options.color无法修改
• 主要用处在于：如果数据量非常大的时候，所有数据都要保持响应式会性能不好

<template>
    <h3>{{ person }}</h3>
    <button @click="changeName">changeName</button>
    <button @click="changePerson">changePerson</button>
    <h3>{{ car }}</h3>
    <button @click="changeBrand">changeBrand</button>
    <button @click="changeColor">changeColor</button>

</template>

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

let person = shallowRef({
    name:'aaa',
    age:18
})

function changeName(){
    person.value.name = 'vvvvvvvvvv'
}
function changePerson(){
    person.value = {name:'eeeeeeee',age:99}
}

let car = shallowReactive({
    brand:'car',
    options:{
        color:'red'
    }
})

function changeBrand(){
    car.brand = 'vvvvvvvvvv'
}
function changeColor(){
    car.options.color = 'blue'
}
</script>

readonly,shallowReadonly

• readonly 创建只读的对象快照
• shallowReadonly 仅第一层只读，更深层次的数据可以修改

<template>
    <h3>{{ copyPerson }}</h3>
    <button @click="changeName">changeName</button>
    <button @click="changePerson">changePerson</button>
    <h3>{{ car }}</h3>
    <button @click="changeBrand">changeBrand</button>
    <button @click="changeColor">changeColor</button>

</template>

<script setup name="App" lang="ts">
import { ref,reactive } from 'vue';
// import { shallowRef,shallowReactive } from 'vue';
import { readonly,shallowReadonly } from 'vue';

let person = ref({
    name:'aaa',
    age:18
})
let copyPerson = readonly(person)

function changeName(){
    copyPerson.value.name = 'vvvvvvvvvv' // 不能修改
}
function changePerson(){
    copyPerson.value = {name:'eeeeeeee',age:99} // 不能修改
}

let car = reactive({
    brand:'car',
    options:{
        color:'red'
    }
})
let copyCar = shallowReadonly(car)

function changeBrand(){
    copyCar.brand = 'vvvvvvvvvv' // 不能修改
}
function changeColor(){
    copyCar.options.color = 'blue' // 能修改
}
</script>

toRaw,markRaw

• toRaw: 可以将reactive定义的响应式数据变为普通对象，用于要将响应式对象传给非vue的库或者其他系统时
• markRaw：标记为非响应式，防止被改；如mockjs

<template>
    <h3>{{ rawPerson }}</h3>
    <button @click="changeName">changeName</button>
    <button @click="changePerson">changePerson</button>
    <h3>{{ rawCar }}</h3>
    <button @click="changeBrand">changeBrand</button>
    <button @click="changeColor">changeColor</button>

</template>

<script setup name="App" lang="ts">
import { ref,reactive } from 'vue';
// import { shallowRef,shallowReactive } from 'vue';
// import { readonly,shallowReadonly } from 'vue';
import { toRaw,markRaw } from 'vue';

let person = {
    name:'aaa',
    age:18
}
// let rawPerson = ref(person)
let rawPerson = markRaw(person)
console.log(person);
console.log(rawPerson);


function changeName(){
    rawPerson.value.name = 'vvvvvvvvvv'
}
function changePerson(){
    rawPerson.value = {name:'eeeeeeee',age:99}
}

let car = reactive({
    brand:'car',
    options:{
        color:'red'
    }
})
let rawCar = toRaw(car)
console.log(car);
console.log(rawCar);


function changeBrand(){
    rawCar.brand = 'vvvvvvvvvv'
}
function changeColor(){
    rawCar.options.color = 'blue'
}
</script>

customRef自定义ref

• 重点在：track监视数据的变化，trigger通知vue数据已经变化了
• get在数据被读取时调用，set在数据被修改时调用
• 可以使用hooks的知识封装方法（需要return）

// App.vue
<template>
    <h3>msg {{ msg }}</h3>
    <input type="text" v-model="msg">
    <h3>customMsg {{ customMsg }}</h3>
    <input type="text" v-model="customMsg">
</template>

<script setup name="App" lang="ts">
import { ref,customRef } from 'vue';
import useMsgRef from './useMsgRef'

let msg = ref('111')
let {customMsg} = useMsgRef('ssssss',2000)

</script>

// useMsgRef.vue
import { ref,customRef } from 'vue';

export default function(initMsg,delay){
    let timer:number
    let customMsg = customRef((track,trigger)=>{
        return {
            // 数据被读取时调用
            get() {
                // 监视数据的变化
                track()
                return initMsg
            },
            // 数据被修改时调用
            set(value) {
                clearInterval(timer)
                timer = setTimeout(()=>{
                    initMsg = value
                    // 通知vue数据已经变化了
                    trigger()
                },delay)
            }
        }
    })
    return {customMsg}
}