watchEffect函数

20_脚手架/vue3_test/10.src_watchEffect函数/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <Demo/>
+</template>
+
+<script>
+import {reactive} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+}
+</script>

20_脚手架/vue3_test/10.src_watchEffect函数/components/demo.vue

@@ -0,0 +1,54 @@
+<template>
+  <h2>当前求和为：{{ sum }}</h2>
+  <button @click="sum++">点击+1</button>
+  <hr>
+  <h2>当前信息为：{{ msg }}</h2>
+  <button @click="msg+='!'">修改信息</button>
+  <hr>
+  <h2>姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
+  <h2>薪资：{{ person.job.j1.salary }}</h2>
+  <button @click="person.name+='~'">修改姓名</button>
+  <button @click="person.age++">修改年龄</button>
+  <button @click="person.job.j1.salary++">修改薪资</button>
+  <h2></h2>
+</template>
+
+<script>
+import {reactive, ref, watch, watchEffect} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    let sum = ref(0)
+    let msg = ref('你好呀')
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    // 方法一： ref的对象监视，通过value实现
+    // watch(person, (newValue, oldValue) => {
+    //   console.log('person的值变了', newValue, oldValue)
+    // })
+
+    watchEffect(() => {
+      const x1 = sum.value
+      const x2 = person.job.j1.salary
+      console.log('watchEffect所指定的回调执行了')
+    })
+
+    return {
+      sum,
+      msg,
+      person
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/10.src_watchEffect函数/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/components/demo.vue

@@ -15,29 +15,15 @@
 </template>
 
 <script>
-import {reactive, ref, watch} from "vue";
+import {reactive, ref, watch, watchEffect} from "vue";
 
 export default {
   name: 'Demo',
-  // watch: {
-  //   // Vue2中的实现
-  //   // sum(newValue, oldValue) {
-  //   //   console.log('sum的值变了', newValue, oldValue)
-  //   // }
-  //   // Vue2中的实现二
-  //   // sum: {
-  //   //   immediate: true,
-  //   //   deep: true,
-  //   //   handler(newValue, oldValue) {
-  //   //     console.log('sum的值变了', newValue, oldValue)
-  //   //   }
-  //   // }
-  // },
 
   setup() {
     let sum = ref(0)
     let msg = ref('你好呀')
-    let person = ref({
+    let person = reactive({
       name: '张三',
       age: 18,
       job: {
@@ -48,14 +34,15 @@ export default {
     })
 
     // 方法一： ref的对象监视，通过value实现
-    // watch(person.value, (newValue, oldValue) => {
+    // watch(person, (newValue, oldValue) => {
     //   console.log('person的值变了', newValue, oldValue)
     // })
 
-    // 方法二： ref的对象监视，通过deep实现
+    watchEffect(() => {
-    watch(person, (newValue, oldValue) => {
+      const x1 = sum.value
-      console.log('person的值变了', newValue, oldValue)
+      const x2 = person.job.j1.salary
-    },{deep: true})
+      console.log('watchEffect所指定的回调执行了')
+    })
 
     return {
       sum,