Vue.js 中 computed 和 watch 的区别及运用场景-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 中 computed 和 watch 的区别及运用场景

在 Vue.js 中，computed 和 watch 是两个非常重要的属性。它们都可以监听数据的变化，但它们的用途和运用场景不同。在本文中，我们将会深入探讨 computed 和 watch 的区别以及它们各自的使用场景，并通过示例代码来说明它们的具体使用方法。

computed

computed 属性用来计算派生数据，可以依赖其他数据的变化而自动更新视图。computed 应该是纯函数，也就是说，computed 的值只能由 computed 中的其他属性计算而来，不能修改其它的数据。这样可以确保 computed 代码的可靠性和可预测性。

使用 computed 的场景：

对于需要动态计算的数据，比如列表的筛选、排序等，可以使用 computed 来处理。
如果一个数据的值需要基于多个数据计算才能得出，也应该使用 computed 来处理。

示例代码：

----------
  -----
    ------ ----------- ---------------------
    ----
      --- ----------- -- ---------------- ---- -------
    -----
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ----- --------- --------- ----------
      ----------- --
    -
  --
  --------- -
    -------------- -
      ------ --------------------- -- -
        ------ ----------------------------- --- --
      --
    -
  -
-
---------

运行效果：在输入框中输入文字，就可以动态筛选出包含该文字的水果。

watch

watch 属性用来观察数据的变化，当数据发生变化时，会执行对应的方法。watch 用来监听数据的变化，是响应性编程的重要工具。

使用 watch 的场景：

监听一个数据的变化并进行一些操作，比如在某个数据发生变化后发送一个请求或更新本地存储等。
监听组件中的路由变化，根据路由参数获取数据并更新视图。

示例代码：

----------
  -----
    ------------------
    ------ ------------- ---------- -----------------------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      -------- ------ ------
    -
  --
  -------- -
    --------------- -
      ------------ - --------
    -
  --
  ------ -
    ----------------- --------- -
      ----------------------------------------------
    -
  -
-
---------

运行效果：点击按钮可以改变 message 的值，并且在控制台上会输出新旧值。

总结

通过本文的介绍，我们可以看到，computed 和 watch 都有自己的特点和运用场景。在实际开发中，要根据具体的需求来选择使用哪个属性。同时，在编写代码时，应该遵循 Vue.js 的响应式规则，保证代码的可靠性和性能的高效性。

参考文献

Vue.js官方文档 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7
Vue.js官方文档 https://cn.vuejs.org/v2/guide/computed.html#%E5%AE%9E%E4%BE%8B%E5%A4%9A%E4%B8%AA%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7
Vue.js官方文档 https://cn.vuejs.org/v2/guide/watch.html#%E7%9B%91%E5%90%AC%E5%8D%95%E4%B8%AA%E5%A4%9A%E7%9A%84%E5%AD%97%E6%AE%B5%EF%BC%88%E6%B3%A8%E6%84%8F%E5%A4%9A%E6%AC%A1%EF%BC%89
Vue.js官方文档 https://cn.vuejs.org/v2/guide/watch.html#%E5%A4%84%E7%90%86%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6470842e968c7c53b0ea6206