vue3

13.Vue3/project2/src/App.vue

@@ -1,24 +1,28 @@
 <template>
   <div>
     <!-- {{msg}} -->
-    <Demo1/>
+    <!-- <Demo1/>
     <Demo2/>
     <Demo3/>
     <Demo4/>
     <Demo5/>
     <Demo6/>
     <Demo7/>
+    <Demo8/> -->
+    <Demo9/>
   </div>
 </template>
 
 <script setup name="App">
-import Demo1 from './components/Demo1.vue'
-import Demo2 from './components/Demo2.vue'
-import Demo3 from './components/Demo3.vue'
-import Demo4 from './components/Demo4.vue'
-import Demo5 from './components/Demo5.vue'
-import Demo6 from './components/Demo6.vue'
-import Demo7 from './components/Demo7.vue'
+// import Demo1 from './components/Demo1.vue'
+// import Demo2 from './components/Demo2.vue'
+// import Demo3 from './components/Demo3.vue'
+// import Demo4 from './components/Demo4.vue'
+// import Demo5 from './components/Demo5.vue'
+// import Demo6 from './components/Demo6.vue'
+// import Demo7 from './components/Demo7.vue'
+import Demo8 from './components/Demo8.vue'
+import Demo9 from './components/Demo9.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

13.Vue3/project2/src/components/Demo8.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>监听器</h1>
+    <h3>我有{{flower}}朵花</h3>
+    <!-- 1.watch监听ref基本数据类型 -->
+    <button @click="reduceFlower">减少</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch} from 'vue'
+let flower = ref(100)
+function reduceFlower() {
+    flower.value-=10;    
+    
+}
+/**
+ * watch字段
+ * 1.监听对象
+ * 2.回调函数
+ * 3.开启深度监听 
+ */
+watch(flower,(newValue,oldValue)=>{
+    console.log(newValue,'newValue')
+    if(newValue <= 60) {
+        alert("需要补充库存了")
+    }
+},{
+    deep:true, //开启深度监听
+    immediate: true //立即执行
+})
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project2/src/components/Demo9.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>watch</h1>
+    <h3>我在{{obj.city}},现在是{{obj.month}}</h3>
+    <!-- 2.watch监听ref引用数据类型 -->
+    <button @click="changeCity">修改城市</button>
+    <button @click="changeMonth">修改月份</button>
+    <button @click="changeAll">修改全部</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch} from 'vue'
+let obj = ref({
+  city:'哈尔滨',
+  month: '三月'
+})
+function changeCity() {
+  obj.value.city = '天津'
+}
+function changeMonth() {
+  obj.value.month = '5月'
+}
+function changeAll() {
+  obj.value = {city:'北京',month:'6'}
+}
+watch(obj,(newValue,oldValue)=>{
+  console.log(newValue,oldValue)
+},{
+  deep:true,
+  immediate: true
+})
+</script>
+<style lang='scss' scoped>
+
+</style>