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 ="htmlTest"
 
 
</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 ="htmlTest"
 
 
</script>
 

 结果：