ref


<button @click='change'>change</button>

const a = ref<string>('a';)

console.log(a.vlaue)

const change = () => {
    a.value = 'aaaa'
}


isRef(a)  //true  是否是ref对象

shallowRef

他只能做浅层响应式

注意：ref和shallowRef不要同时写，否则会影响shallowRef,造成视图更新


{{sha.name}}


const sha = shallowRef({name:‘小满’})

const change = () => {
    sha.value.name = '大满'   //页面并没有更新成大满
    
   // triggerRef()
    如果加上triggerRef(),会强制更新成大满
}

如果想写成响应式的，可以这样写：

const change = () => {
    sha.value = {
        name:大满‘’
    }
}

ref读取dom

<div ref='dom'>我是dom</div>


const dom = ref() // 声明的变量名称必须和ref的值相等

vue3之ref和shallowref

ref

shallowRef