vue知识点总结

vue2知识点总结

watch: 

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

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：
  • 主要用于观察数据的变化并执行相应的操作。
  • 更侧重于执行一些异步或复杂的逻辑，例如发送网络请求、修改其他数据等。