Vue3之ref全家桶

vue3定义的值都不是响应式的，所以需要申明定义的值为响应式

ref  接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

例如：

<template>

<div>

    {{name}}

    <button @click="changeName">改变</button>

  </div>

</template>

<!-- setup语法糖 -->

<script setup lang="ts"> 

  import {ref} from 'vue'

  //通过变量名称.value改变值 注意：没有this

  const name =ref<string>('这是一个名字')

  const changeName = () => {

    name.value = '改变了名字'

  }

</script>

isRef   判断是不是一个ref对象   console.log(isRef(name)) //true

shallowRef   ref为深层次的响应  shallowRef 为浅层次的响应

type Obj = {

    name:string

  }

const obj = shallowRef<Obj>({name:"小名"})

const changeValue = () => {

    obj.value.name = '小姜' //视图不会变化

    obj.value = { //视图会更新 只对value进行响应

      name:'小姜'

    }

  }

注意：ref和shallowRef不能一块写，不然shallowRef会被影响，造成视图的更新

triggerRef  强制更新页面DOM

 const aa = shallowRef('强制更新')

  const changed = () => {

    aa.value = '强制更新了'

    triggerRef(aa)

  }