vueday01——ref响应式

特性：持续监控某个响应式变量的属性名变化，可以使用shallowRef来取消这一特性，只监控对象整体的变化

ref测试代码：

<template><div :id="idValue" ref="myDiv">打印obj{{ obj }}</div><!-- <div v-if="true"> 我是if</div> --><!-- <div v-show="false"> 我是if</div> --><!-- <button :disabled="true" @click="printId">Print ID {{ resultId }}</button> --><button v-on:[eventName]="doSomething">我是click动态参数按钮</button>
</template><script setup="ts">
import { ref } from 'vue'// 响应式状态
const idValue = ref("defaultValue")
const resultId =ref("")
const eventName = "click"
const obj = ref({attribute1:[1,2,3,4,5,6,7,8,9,10],attribute2:{cont:0},
})
// 用来修改状态、触发更新的函数
// const  increment = ()=> {
//   count.value++
// }
const doSomething =()=>{obj.value.attribute1.push(11)obj.value.attribute2.cont++
}
// const rawHtml ="<span style='color:red'>htmlTest</span>"</script>

结果1：

shallowRef测试代码：

<template><div :id="idValue" ref="myDiv">打印obj{{ obj }}</div><!-- <div v-if="true"> 我是if</div> --><!-- <div v-show="false"> 我是if</div> --><!-- <button :disabled="true" @click="printId">Print ID {{ resultId }}</button> --><button v-on:[eventName]="doSomething">我是click动态参数按钮</button>
</template><script setup="ts">
import { ref, shallowRef } from 'vue'// 响应式状态
const idValue = ref("defaultValue")
const resultId =ref("")
const eventName = "click"
const obj = shallowRef({attribute1:[1,2,3,4,5,6,7,8,9,10],attribute2:{cont:0},
})
// 用来修改状态、触发更新的函数
// const  increment = ()=> {
//   count.value++
// }
const doSomething =()=>{obj.value.attribute1.push(11)obj.value.attribute2.cont++
}
// const rawHtml ="<span style='color:red'>htmlTest</span>"</script>

 结果：