vue3

13.Vue3/project2/src/App.vue

@@ -8,8 +8,11 @@
     <Demo5/>
     <Demo6/>
     <Demo7/>
-    <Demo8/> -->
-    <Demo9/>
+    <Demo8/>
+    <Demo9/> 
+    <Demo10/>
+    <Demo11/>-->
+    <Demo12/>
   </div>
 </template>
 
@@ -23,6 +26,9 @@
 // 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 Demo11 from './components/Demo11.vue'
+import Demo12 from './components/Demo12.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

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

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>第十个</h1>
+    <p>我叫{{obj.name}},今年{{obj.age}}岁了</p>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeAll">修改全部</button>
+  </div>
+</template>
+
+<script setup>
+// watch监听reactive定义的数据 默认开启深度监听
+import { watch, reactive } from "vue";
+let obj = reactive({
+  name: "孙悟空",
+  age: 10,
+});
+function changeName() {
+    obj.name = '唐僧'
+}
+function changeAge() {
+    obj.age = 100
+}
+function changeAll() {
+    Object.assign(obj,{name:'猪八戒',age:3})
+}
+watch(obj,(newValue,oldValue)=>{
+  console.log(newValue,oldValue)
+})
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h1>第十一个</h1>
+    <p>我叫{{person.name}},今年{{person.age}}</p>
+    <p>我会{{person.desc.desc1}}和{{person.desc.desc2}}</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changePart1">修改第一个</button>
+    <button @click="changePart2">修改第二个</button>
+    <button @click="changeAll">修改全部</button>
+  </div>
+</template>
+
+<script setup>
+import { watch, reactive } from "vue";
+let person = reactive({
+  name: "孙悟空",
+  age: 20,
+  desc: {
+    desc1: "金箍棒",
+    desc2: "火眼金睛",
+  },
+});
+function changeName() {
+  person.name = "哈哈哈";
+}
+function changeAge() {
+  person.age = 12;
+}
+function changePart1() {
+  person.desc.desc1 = '吃饭'
+}
+function changePart2() {
+  person.desc.desc2 = '睡觉'
+}
+function changeAll() {
+  person.desc = {
+    desc1:'打羽毛球',
+    desc2:'打网球'
+  }
+}
+// 监听响应式对象的某个属性 并且所监听的值是基本数据类型时 要写成函数式
+// watch(()=>person.name,(newValue,oldValue)=>{
+//   console.log(newValue,oldValue)
+// })
+// 监听响应式对象的某个属性 并且所监听的值是引用数据类型时
+// 如果监听对象中的属性时  可以开启深度监听
+// 如果不开启深度监听 监听的则是对象本身
+watch(()=>person.desc,(newValue,oldValue)=>{
+  console.log(newValue,oldValue)
+},{deep:true})
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <h1>第十二个</h1>
+    <p>我叫{{person.name}},今年{{person.age}}</p>
+    <p>我会{{person.desc.desc1}}和{{person.desc.desc2}}</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changePart1">修改第一个</button>
+    <button @click="changePart2">修改第二个</button>
+    <button @click="changeAll">修改全部</button>
+  </div>
+</template>
+
+<script setup>
+import { watch, reactive } from "vue";
+let person = reactive({
+  name: "孙悟空",
+  age: 20,
+  desc: {
+    desc1: "金箍棒",
+    desc2: "火眼金睛",
+  },
+});
+function changeName() {
+  person.name = "哈哈哈";
+}
+function changeAge() {
+  person.age = 12;
+}
+function changePart1() {
+  person.desc.desc1 = '吃饭'
+}
+function changePart2() {
+  person.desc.desc2 = '睡觉'
+}
+function changeAll() {
+  person.desc = {
+    desc1:'打羽毛球',
+    desc2:'打网球'
+  }
+}
+// 监听多个响应式对象的某个属性 并且属性是基本数据类型 要写成函数式
+watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
+  console.log(newValue,oldValue)
+})
+</script>
+<style lang="scss" scoped></style>