vue知识点总结

vue2知识点总结

watch:

watch 是 Vue 提供的一个选项，它允许你观察 Vue 实例上的数据变化。当观察的数据发生变化时，会执行相应的回调函数，这样你就可以对数据的变化做出响应，执行一些特定的操作。

javascript 复制代码

export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message 从', oldValue,'变成了', newValue);
    }
  }
};

在上述代码中：

watch 是 Vue 组件的一个选项，是一个对象。

message 是要观察的数据属性。

message 的值是一个函数，这个函数接收两个参数：newValue 和 oldValue。

当 message 的值发生变化时，该函数会被调用，newValue 表示变化后的新值，oldValue 表示变化前的旧值。

数据监听和响应：

最常见的使用场景是当某个数据发生变化时，需要执行一些逻辑，例如发送网络请求、更新另一个数据或执行一些计算操作。

export default {
  data() {
    return {
      searchText: '',
      searchResults: []
    };
  },
  watch: {
    searchText(newValue) {
      // 当 searchText 发生变化时，发起网络请求
      this.fetchSearchResults(newValue);
    }
  },
  methods: {
    async fetchSearchResults(query) {
      // 发送网络请求
      const results = await fetch(`/api/search?query=${query}`);
      this.searchResults = await results.json();
    }
  }
};

在这个例子中，当 searchText 的值发生变化时，会调用 fetchSearchResults 方法发送网络请求并更新 searchResults 的值。

深度监听：
- 当要观察的数据是一个对象或数组时，默认情况下，watch 只会观察到对象或数组的引用是否发生变化，而不会观察对象或数组内部元素的变化。如果需要深度观察对象或数组内部元素的变化，可以使用 deep: true。
- 在这个例子中，使用 deep: true 对 user 对象进行深度观察，当 user 对象内部的 name 或 age 发生变化时，handler 函数会被调用。
```
export default {
  data() {
    return {
      user: {
        name: '',
        age: 0
      }
    };
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('user 对象发生了变化');
      },
      deep: true
    }
  }
};
```
立即执行：
- 有时你可能希望在组件创建时就立即执行 watch 的回调函数，可以使用 immediate: true。
- 这个例子中，使用 immediate: true，会在组件创建时立即执行 handler 函数，打印出 count 的初始值。
```
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count: {
      handler(newValue) {
        console.log('count 的值为', newValue);
      },
      immediate: true
    }
  }
};
```
computed和watch的区别：
computed：
主要用于计算属性，根据依赖的数据自动计算出新的值。
计算属性是基于它们的依赖进行缓存的，只有依赖的数据发生变化时才会重新计算。
适合于根据其他数据计算出一个新的值，例如根据 firstName 和 lastName 计算出 fullName。
watch ：
- 主要用于观察数据的变化并执行相应的操作。
- 更侧重于执行一些异步或复杂的逻辑，例如发送网络请求、修改其他数据等。