vue3

15.vue3/project1/src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  
-  <Demo10/>
-  <br>
+  <Demo12/>
   <!-- <Demo1 />
   <Demo2 />
   <Demo3 />
@@ -10,8 +8,9 @@
   <Demo6 />
   <Demo7 />
   <Demo8/> 
-  
   <Demo9/>
+  <Demo10/>
+  <Demo11/>
   -->
 </template>
 
@@ -25,6 +24,8 @@
 // import Demo7 from "./components/Demo7.vue";
 // import Demo8 from "./components/Demo8.vue";
 // import Demo9 from "./components/Demo9.vue";
-import Demo10 from "./components/Demo10.vue";
+// import Demo10 from "./components/Demo10.vue";
+// import Demo11 from "./components/Demo11.vue";
+import Demo12 from "./components/Demo12.vue";
 </script>
 <style lang="scss" scoped></style>

15.vue3/project1/src/components/Demo11.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <h3>这是第十一个demo:watch:监听ref、reactive:引用数据类型中的某个属性</h3>
+    <p>我叫{{person.name}},今年{{person.age}}岁</p>
+    <p>我会{{person.weapon.weapon2}},我有{{person.weapon.weapon1}}</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeWeapon1">修改第一个</button>
+    <button @click="changeWeapon2">修改第二个</button>
+    <button @click="changeAll">修改整个武器</button>
+  </div>
+</template>
+
+<script setup>
+import { watch, reactive} from 'vue'
+
+let person = reactive({
+    name:"孙悟空",
+    age:20,
+    weapon:{
+        weapon1:"金箍棒",
+        weapon2:"七十二变"
+    }
+})
+function changeName() {
+    person.name = '猪八戒'
+}
+function changeAge() {
+    person.age = 40
+}
+function changeWeapon1() {
+    person.weapon.weapon1 = '九齿钉耙'
+}
+function changeWeapon2() {
+    person.weapon.weapon2 = '三十六变'
+}
+function changeAll() {
+    person.weapon = {
+        weapon1:"画画",
+        weapon2:"哈哈哈"
+    }
+}
+// 监听响应式对象的某个属性 并且改属性是基本数据类型时 要写成函数式
+watch(()=>person.name,(newValue,oldValue) => {
+    console.log('改变了',newValue,oldValue)
+})
+
+// 监听响应式对象的某个属性 并且改属性是引用数据类型时 
+// a.如果是单独写出 需要配合深度监听 可以分别监听属性
+// b.如果是函数式 
+// 1.添加深度监听 对象及属性全部可以监听到
+// 2.不添加深读监听 只能监听到对象
+watch(()=>person.weapon,(newValue,oldValue) => {
+    console.log('改变了1',newValue,oldValue)
+},{deep:true})
+
+</script>
+<style lang='scss' scoped>
+
+</style>

15.vue3/project1/src/components/Demo12.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <h3>这是第十二个demo:watch:监听ref、reactive:引用数据类型中的某个属性</h3>
+    <p>我叫{{person.name}},今年{{person.age}}岁</p>
+    <p>我会{{person.weapon.weapon2}},我有{{person.weapon.weapon1}}</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeWeapon1">修改第一个</button>
+    <button @click="changeWeapon2">修改第二个</button>
+    <button @click="changeAll">修改整个武器</button>
+  </div>
+</template>
+
+<script setup>
+import { watch, reactive} from 'vue'
+
+let person = reactive({
+    name:"孙悟空",
+    age:20,
+    weapon:{
+        weapon1:"金箍棒",
+        weapon2:"七十二变"
+    }
+})
+function changeName() {
+    person.name = '猪八戒'
+}
+function changeAge() {
+    person.age = 40
+}
+function changeWeapon1() {
+    person.weapon.weapon1 = '九齿钉耙'
+}
+function changeWeapon2() {
+    person.weapon.weapon2 = '三十六变'
+}
+function changeAll() {
+    person.weapon = {
+        weapon1:"画画",
+        weapon2:"哈哈哈"
+    }
+}
+// 监听多个响应式对象的某个属性 并且改属性是基本数据类型时 要写成函数式
+watch([()=>person.name,()=>person.age],(newValue,oldValue) => {
+    console.log('改变了',newValue,oldValue)
+})
+
+</script>
+<style lang='scss' scoped>
+
+</style>