浅谈 vue 中的 watcher

关于“浅谈 Vue 中的 Watcher”，我将分以下几个部分来详细阐述。

Watcher 概述

在 Vue 中，Watcher 是一个可以观察并响应数据变化的对象。当数据变化时，Watcher 会自动重新渲染视图。

在 Vue 中有三种 Watcher：Computed Watcher、User Watcher 和渲染 Watcher。其中，Computed Watcher 和 User Watcher 都可以手动创建，而渲染 Watcher 是 Vue 内部自动创建的。

创建 Watcher 的方式

1. Computed Watcher

Computed Watcher 是通过 computed 属性来创建的，在模板中使用 computed 的值，并不直接使用数据，因为 computed 属性支持缓存，只有相关的数据改变了，computed 才会重新计算。下面是一个例子：

<template>
  <div>
    <p>num1: {{ num1 }}</p>
    <p>num2: {{ num2 }}</p>
    <p>computed: {{ computedNum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 1,
      num2: 2
    };
  },
  computed: {
    computedNum() {
      console.log('computed');
      return this.num1 + this.num2;
    }
  }
};
</script>

上面的代码中，computedNum 就是一个 Computed Watcher。

1. User Watcher

User Watcher 是通过使用 $watch API 创建的，不同于 computed 属性，使用 $watch API 创建的 Watcher 并没有缓存功能。下面是一个例子：

<template>
  <div>
    <p>num1: {{ num1 }}</p>
    <p>num2: {{ num2 }}</p>
    <p>userWatcher: {{ userWatcher }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 1,
      num2: 2,
      userWatcher: ''
    };
  }，
  created() {
    this.$watch(
      function () {
        return this.num1 + this.num2;
      },
      function (newValue, oldValue) {
        console.log('userWatcher');
        this.userWatcher = newValue;
      }
    );
  }
};
</script>

上面的代码中，使用 $watch API 创建了一个 User Watcher，它会观察 num1 和 num2 的变化。

Watcher 的原理

Watcher 本质上是一个订阅者，会在数据变化时接收通知，并采取相应的操作。

在 Vue 的实现中，当数据改变时，会触发一个派发更新的操作，派发的更新会通知所有使用了此数据的 Watcher 执行更新视图的操作。同时，Watchers 之间也会建立起一定的依赖，也就是所谓的依赖收集。

以下是一个 Watcher 的简单示例：

class Watcher {
  constructor(data, key, cb) {
    this.data = data;
    this.key = key;
    this.cb = cb;
    this.value = this.get();
  }
  get() {
    Dep.target = this;
    const value = this.data[this.key];
    Dep.target = null;
    return value;
  }
  update() {
    const oldValue = this.value;
    this.value = this.get();
    this.cb(this.value, oldValue);
  }
}

以上是一个简单的 Watcher 实现代码，其中，Dep 是一个被观察者的数据存储器。

Watcher 的实际使用场景

1. 监听 Form 表单输入框的数据，进行校验

<template>
  <form>
    <input type="text" v-model="username" />
    <input type="password" v-model="password" />
    <button :disabled="!formValid">Sign in</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  computed: {
    formValid() {
      console.log('formValid computed');
      return this.username && this.password;
    }
  },
  watch: {
    formValid: {
      handler(newValue, oldValue) {
        console.log('formValid watch');
      }
    }
  }
};
</script>

1. 监听 Array 类型数据的变化

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <button @click="changeList">修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    };
  },
  methods: {
    changeList() {
      this.list.push('watermelon');
      this.list.splice(0, 1);
    },
    watch: {
      list(newValue, oldValue) {
        console.log('list watch');
      }
    }
  }
};
</script>

以上是 Watcher 在 Vue 中的一些使用场景和实现原理的详细讲解。希望能对你有帮助。