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

原文地址：https://blog.csdn.net/2301_81253185/article/details/145248516

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！