|
|
@@ -10,6 +10,20 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+/**
|
|
|
+ * 1.监视ref定义的基本类型数据：直接写数据名即可，监视的是其value值的改变。
|
|
|
+ * 2.监视ref定义的引用类型数据：直接写数据名，监视的是对象的地址值，若想监视对象内部的数据，要手动开启深度监视。
|
|
|
+ * 注意：
|
|
|
+ * 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。
|
|
|
+ * 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。
|
|
|
+ * 3.监视reactive定义的引用类型数据，且默认开启了深度监视。
|
|
|
+ * 4.监视ref或reactive定义的引用类型数据中的某个属性，注意
|
|
|
+ * 若该属性值不是引用类型数据，需要写成函数形式。
|
|
|
+ * 若该属性值是依然是引用类型数据，可直接编，也可写成函数，建议写成函数。
|
|
|
+ * 监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视
|
|
|
+ * 5.监视多个数据
|
|
|
+ * 写成数组+函数体
|
|
|
+ */
|
|
|
import {reactive,watch} from "vue"
|
|
|
let obj = reactive({
|
|
|
name:"图图",
|
zheng