#Vue3：shallowRef--shallowReactive--readonly--shaloowReadonly--toRow--markRow--customRef--Teleport--传

shallowRef----一层这整体修改 性能更高

浅层次的

.value 一层可以 后面的层次就不行了

shallowReactive–关注第一层

绕开深度响应。

readonly–只读属性

let sum1 = ref(0)
let sum2 = redaonly(sum1)

let car1 = reactive({
    barnd:'奔驰'，
    options: {
      color: red
    }
})
let car2 = readonly(car2)

shaloowReadonly–只读属性 只针对顶层次

toRow–用于获取响应式对象的原始对象

普通数据

用于获取响应式对象的原始对象

场景

对象交给别人用 不想改变页面数据的时候

markRow 标记一个对象使其永远不是响应式

标记一个对象使其永远不是响应式

let car = markRow({brand: '奔驰'})
ler car2 = reactive(car) // 不是响应式

场景

mockjs

使用第三方库时 避免变成响应式

customRef–自定义ref —在原有的ref上加自己的逻辑

场景

等响应式变了之后 某一个等几秒再变

import { customRef } from 'vue'
// track跟踪 trigger触发
let initValue = '你好'
let msg = customRef((track,trigger) => {
    return {
        get() {
            track() // 告诉vue数据msg很重要，要对msg持续关注，一旦msg变化就更新
            return initValue
        },
        set(value) {
            initValue = value
            trigger() // 通知vue数据变化   
        }
    }
})

写成hooks

useMsgRef.ts

export default funtion(initValue:string) {
    let num = 0
      return {
          num

      }

}

Teleport–传送门

<teleport to='bady'>
 <div>213div>
teleport>

Suspense–实验性api —子组件中有异步任务

// setup顶级 async不用写

import { Suspense } from 'vue'

全局api

app.component

app.config

app.config.globalProperties.x = 99
app.directive

非兼容性改变

v-if v-for可以一块使用 v-if优先级更高
非兼容性官网介绍