From 34bd3c0a8bcce86118e551a4e7db9284192a343b Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Sat, 14 Jun 2025 18:47:36 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=209-=E7=9B=91=E8=A7=86=E5=B1=9E?=
=?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
vue2-tutorials/import-script/9-监视属性.html | 40 +++++
vue2-tutorials/import-script/9-监视属性.md | 166 +++++++++++++++++++
2 files changed, 206 insertions(+)
create mode 100644 vue2-tutorials/import-script/9-监视属性.html
create mode 100644 vue2-tutorials/import-script/9-监视属性.md
diff --git a/vue2-tutorials/import-script/9-监视属性.html b/vue2-tutorials/import-script/9-监视属性.html
new file mode 100644
index 0000000..d32497b
--- /dev/null
+++ b/vue2-tutorials/import-script/9-监视属性.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+ 监视属性
+
+
+
+
+
天气很什么：{{isHot}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/vue2-tutorials/import-script/9-监视属性.md b/vue2-tutorials/import-script/9-监视属性.md
new file mode 100644
index 0000000..5cb2582
--- /dev/null
+++ b/vue2-tutorials/import-script/9-监视属性.md
@@ -0,0 +1,166 @@
+# Vue2 监视属性（Watch）详解文档
+
+## 一、基本概念
+
+监视属性（Watch）是 Vue2 中用于观察和响应数据变化的机制。它允许你在数据变化时执行异步操作或更复杂的逻辑。
+
+## 二、代码示例解析
+
+```html
+
+
天气很什么：{{isHot ? '炎热' : '凉爽'}}
+
+
+
+
+```
+
+## 三、核心特性
+
+### 1. 基本语法结构
+
+```javascript
+watch: {
+ 要监视的属性: {
+ handler(newValue, oldValue) {
+ // 响应变化
+ },
+ immediate: false, // 是否立即执行
+ deep: false // 是否深度监视
+ }
+}
+```
+
+### 2. 简写形式（不需要配置项时）
+
+```javascript
+watch: {
+ isHot(newVal, oldVal) {
+ console.log("天气变化", newVal, oldVal);
+ }
+}
+```
+
+### 3. 深度监视（deep watch）
+
+通常监视对象属性。
+
+```javascript
+watch: {
+ someObject: {
+ handler(newVal) {
+ console.log("对象内部变化", newVal);
+ },
+ deep: true // 深度监视对象内部值变化
+ }
+}
+```
+
+## 四、配置选项说明
+
+| 选项 | 类型 | 默认值 | 说明 |
+| --------- | -------- | ------ | ---------------------------- |
+| handler | Function | 必填 | 数据变化时的回调函数 |
+| immediate | Boolean | false | 是否立即以当前值执行handler |
+| deep | Boolean | false | 是否深度观察对象内部值的变化 |
+
+## 五、最佳实践
+
+1. **命名规范**：
+ - 监视属性通常以 `watch` 开头命名方法（如 `watchIsHotChange`）
+ - 或者直接使用被监视的属性名
+
+2. **使用场景**：
+ - 数据变化需要执行异步操作时
+ - 数据变化需要执行开销较大的操作时
+ - 需要观察嵌套数据结构变化时
+
+3. **性能考虑**：
+ - 避免在handler中执行复杂同步操作
+ - 对于大对象，谨慎使用deep watch
+
+## 六、高级用法
+
+### 1. 监视计算属性
+
+```javascript
+computed: {
+ weatherDesc() {
+ return this.isHot ? "炎热" : "凉爽";
+ }
+},
+watch: {
+ weatherDesc(newVal) {
+ console.log("天气描述变化:", newVal);
+ }
+}
+```
+
+### 2. 监视路由变化
+
+```javascript
+watch: {
+ '$route'(to, from) {
+ console.log("路由变化", to.path, from.path);
+ }
+}
+```
+
+### 3. 多属性监视
+
+```javascript
+watch: {
+ // 监视多个属性
+ 'a.b.c': function(newVal) {
+ // 当a.b.c变化时执行
+ },
+ 'x.y': 'someMethod' // 直接调用methods中的方法
+}
+```
+
+## 七、与计算属性的比较
+
+| 特性 | 计算属性 | 监视属性 |
+| ------ | ------------ | ------------ |
+| 目的 | 派生新数据 | 响应数据变化 |
+| 缓存 | 有缓存 | 无缓存 |
+| 异步 | 不支持 | 支持 |
+| 返回值 | 必须返回 | 不需要返回 |
+| 复杂度 | 适合简单计算 | 适合复杂逻辑 |
+
+## 八、常见问题
+
+1. **为什么handler没有被调用？**
+ - 检查监视的属性名拼写是否正确
+ - 确认属性值确实发生了变化（对于对象/数组，可能需要深度监视）
+
+2. **什么时候使用deep watch？**
+ - 当需要检测对象内部属性变化时
+ - 注意性能影响，必要时可以指定具体路径如 `'obj.prop'`
+
+3. **如何取消监视？**
+ - 使用 `vm.$watch()` 返回的取消函数：
+ ```javascript
+ const unwatch = this.$watch('someProp', handler);
+ unwatch(); // 取消监视
+ ```