From 812e2b55e471391982026a3cafe4390d294aad16 Mon Sep 17 00:00:00 2001
From: "yingfeng.ai" <aiyingfeng110@qq.com>
Date: Wed, 30 Oct 2024 17:55:48 +0800
Subject: [PATCH] =?UTF-8?q?vue=E5=AD=A6=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 学习VUE/hello_vue3/src/components/Person.vue  | 75 +++++++++----------
 学习VUE/hello_vue3/笔记/computed计算属性.vue  | 46 ++++++++++++
 .../笔记/reactive监视某一个属性某个对象.vue   | 67 +++++++++++++++++
 学习VUE/hello_vue3/笔记/ref对比reactive.vue   | 48 ++++--------
 .../笔记/监视reactive定义的对象数据.vue       | 47 ++++++++++++
 .../hello_vue3/笔记/监视ref定义的对象数据.vue | 47 ++++++++++++
 学习VUE/hello_vue3/笔记/监视ref定义的数据.vue | 36 +++++++++
 7 files changed, 295 insertions(+), 71 deletions(-)
 create mode 100644 学习VUE/hello_vue3/笔记/computed计算属性.vue
 create mode 100644 学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue
 create mode 100644 学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue
 create mode 100644 学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue
 create mode 100644 学习VUE/hello_vue3/笔记/监视ref定义的数据.vue

diff --git a/学习VUE/hello_vue3/src/components/Person.vue b/学习VUE/hello_vue3/src/components/Person.vue
index d48a373..df38bf0 100644
--- a/学习VUE/hello_vue3/src/components/Person.vue
+++ b/学习VUE/hello_vue3/src/components/Person.vue
@@ -1,63 +1,60 @@
 <template>
   <div class="person">
-    <h2>{{ name }}</h2>
-    <h2>{{ age }}</h2>
-    <h2>{{ address }}</h2>
-    <h2>{{ car.price }}-----{{ car.brand }}</h2>
+    <h2>姓名：{{ person.name }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
+    <h2>汽车：{{ person.car.c1 }}-{{ person.car.c2 }}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
-    <button @click="showTel">查看联系方式</button>
-    <button @click="changeCar">修改汽车价格和名字</button>
-    <ul>
-      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
-    </ul>
-    <button @click="changeGame">修改第一个游戏的样式</button>
+    <button @click="changeCar">修改车</button>
   </div>
 
 </template>
 
-<!--语法糖写法-->
 <script setup>
-// 响应式--基本数据类型
-import {ref} from "vue";
-// 响应式--对象数据类型
-import {reactive} from "vue";
+import {reactive, watch} from "vue";
 
-let name = ref('ayf')
-let age = ref(19)
-let tel = '143334132144'
-let address = '北京昌平区'
-let car = reactive({brand: 'byd', price: 10000000})
-
-let games = reactive([
-  {id: 'ayf002', name: '王者荣耀'},
-  {id: 'ayf001', name: '原神'},
-  {id: 'ayf003', name: '三国志'},
-])
-
-console.log(name)
+let person = reactive({
+  name: '张三',
+  age: 18,
+  car: {
+    c1: '奔驰',
+    c2: '宝马',
+  }
+})
 
 function changeName() {
-  name.value = 'dddd'
+  person.name += '~~~'
 }
 
 function changeAge() {
-  age.value += 1
-}
-
-function showTel() {
-  alert(tel)
-}
-
-function changeGame() {
-  games[0].name = '王者荣耀国际版'
+  person.age += 1
 }
 
 function changeCar() {
-  games[0].name = '王者荣耀国际版'
+  person.car.c1 = "雅迪"
 }
+
+
+//监视某个属性
+watch(() => {
+  return person.name
+}, (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
+//监视某个对象
+watch(() => person.car, (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
+//监视多个数据
+watch([() => person.car, () => person.name], (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
 </script>
 
+
 <style scoped>
 .person {
   background-color: antiquewhite;
diff --git a/学习VUE/hello_vue3/笔记/computed计算属性.vue b/学习VUE/hello_vue3/笔记/computed计算属性.vue
new file mode 100644
index 0000000..23c19b6
--- /dev/null
+++ b/学习VUE/hello_vue3/笔记/computed计算属性.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="person">
+    姓：<input type="text" v-model="firstName"><br>
+    名：<input type="text" v-model="lastName"><br>
+    全名：<span>{{fullName}}</span>
+    <button @click="changeFullName">修改全名</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+let firstName = ref('涨')
+let lastName = ref('三')
+
+// 只读的计算属性
+// let fullName = computed(()=>{
+//   return firstName.value + lastName.value
+// })
+
+// 可读可写计算属性
+let fullName = computed({
+  get(){
+    return firstName.value + lastName.value
+  },
+  set(val){
+    console.log(val)
+    firstName.value = 'dddddd'
+  }
+})
+
+function changeFullName(){
+  fullName.value = 'dddddd'
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue b/学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue
new file mode 100644
index 0000000..df38bf0
--- /dev/null
+++ b/学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="person">
+    <h2>姓名：{{ person.name }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
+    <h2>汽车：{{ person.car.c1 }}-{{ person.car.c2 }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeCar">修改车</button>
+  </div>
+
+</template>
+
+<script setup>
+import {reactive, watch} from "vue";
+
+let person = reactive({
+  name: '张三',
+  age: 18,
+  car: {
+    c1: '奔驰',
+    c2: '宝马',
+  }
+})
+
+function changeName() {
+  person.name += '~~~'
+}
+
+function changeAge() {
+  person.age += 1
+}
+
+function changeCar() {
+  person.car.c1 = "雅迪"
+}
+
+
+//监视某个属性
+watch(() => {
+  return person.name
+}, (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
+//监视某个对象
+watch(() => person.car, (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
+//监视多个数据
+watch([() => person.car, () => person.name], (nValue, oValue) => {
+  console.log(nValue, oValue)
+}, {deep: true})
+
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/笔记/ref对比reactive.vue b/学习VUE/hello_vue3/笔记/ref对比reactive.vue
index 3bdcbc8..22f877b 100644
--- a/学习VUE/hello_vue3/笔记/ref对比reactive.vue
+++ b/学习VUE/hello_vue3/笔记/ref对比reactive.vue
@@ -3,12 +3,11 @@
     <h2>{{ name }}</h2>
     <h2>{{ age }}</h2>
     <h2>{{ address }}</h2>
-    <h2>{{ car.price }}</h2>
-    <h2>{{ car.brand }}</h2>
+    <h2>{{ car.price }}-----{{ car.brand }}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
     <button @click="showTel">查看联系方式</button>
-
+    <button @click="changeCar">修改汽车价格和名字</button>
     <ul>
       <li v-for="g in games" :key="g.id">{{ g.name }}</li>
     </ul>
@@ -17,34 +16,6 @@
 
 </template>
 
-<!--基本写法-->
-<!--<script>-->
-<!--export default {-->
-<!--  name: "Person",-->
-<!--  // setup() {-->
-<!--  //   // 数据-->
-<!--  //   let name = 'ayf'-->
-<!--  //   let age = 19-->
-<!--  //   let tel = '143334132144'-->
-<!--  //   let address = '北京昌平区'-->
-<!--  //-->
-<!--  //   function changeName() {-->
-<!--  //     name = 'dddd'-->
-<!--  //   }-->
-<!--  //-->
-<!--  //   function changeAge() {-->
-<!--  //     age += 1-->
-<!--  //   }-->
-<!--  //-->
-<!--  //   function showTel() {-->
-<!--  //     alert(tel)-->
-<!--  //   }-->
-<!--  //-->
-<!--  //   return {name: name, age: age, changeName, changeAge, showTel, address}-->
-<!--  // }-->
-<!--}-->
-<!--</script>-->
-
 <!--语法糖写法-->
 <script setup>
 // 响应式--基本数据类型
@@ -56,7 +27,7 @@ let name = ref('ayf')
 let age = ref(19)
 let tel = '143334132144'
 let address = '北京昌平区'
-let car = reactive({brand: 'byd', price: 10000000})
+let car = ref({brand: 'byd', price: 10000000})
 
 let games = reactive([
   {id: 'ayf002', name: '王者荣耀'},
@@ -81,6 +52,19 @@ function showTel() {
 function changeGame() {
   games[0].name = '王者荣耀国际版'
 }
+
+
+//字典覆盖方式
+function changeCar() {
+  // reactive 才能用分方式
+  // Object.assign(car, {brand: 'ft', price: 20000000})
+
+  // 不能这样写
+  // car = {brand: 'ft', price: 20000000}
+
+  // 但是ref可以
+  car.value = {brand: 'ft', price: 20000000}
+}
 </script>
 
 <style scoped>
diff --git a/学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue b/学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue
new file mode 100644
index 0000000..5fc7ae9
--- /dev/null
+++ b/学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="person">
+    <h2>{{ me.name }}</h2>
+    <h2>{{ me.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeAll">同时修改名字年龄</button>
+  </div>
+
+</template>
+
+<script setup>
+import { reactive, watch } from "vue";
+let me = reactive({name: '比亚迪', age: 100})
+
+//方法
+function changeName(){
+  me.name = "丰田"
+}
+
+function changeAge(){
+  me.age = 101
+}
+
+function changeAll(){
+  me = Object.assign(me, {name: '特斯拉', age: 200})
+}
+
+//监视reactive定义的对象数据
+const stopWatch = watch(me, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+}, {deep:true})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue b/学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue
new file mode 100644
index 0000000..f731f0f
--- /dev/null
+++ b/学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="person">
+    <h2>{{ me.name }}</h2>
+    <h2>{{ me.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeAll">同时修改名字年龄</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+let me = ref({name: '比亚迪', age: 100})
+
+//方法
+function changeName(){
+  me.value.name = "丰田"
+}
+
+function changeAge(){
+  me.value.age = 101
+}
+
+function changeAll(){
+  me.value = {name: '特斯拉', age: 200}
+}
+
+//监视ref定义的对象数据
+const stopWatch = watch(me, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+}, {deep:true})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/笔记/监视ref定义的数据.vue b/学习VUE/hello_vue3/笔记/监视ref定义的数据.vue
new file mode 100644
index 0000000..ff915fd
--- /dev/null
+++ b/学习VUE/hello_vue3/笔记/监视ref定义的数据.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="person">
+    <h2>当前求和：{{sum}}</h2>
+    <button @click="changeSum">点击我sum+1</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+let sum = ref(0)
+
+//方法
+function changeSum(){
+  sum.value += 1
+}
+
+//监视ref定义的数据,当你使用 watch 监听一个响应式的数据或 ref 时，它返回一个函数，这个函数被称为停止函数（stop function）。调用这个函数可以停止对该响应式数据的监听。
+const stopWatch = watch(sum, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
\ No newline at end of file