Vue methods 方法和 watch 监听器的区别

这篇文章我们看一下方法和 watch 监听器之间的区别。

Methods 方法和 Watch 监听器的区别

Methods 和 Watch 之间其实并没有什么太大的可比性，只是当 methods 方法作为 computed 计算属性那样使用时，那么它和 Watch 监听器之间的区别和计算属性跟监听器中间的区别就很类似了，当在 HTML 模板中调用方法时，会把方法的返回值计算出来并显示：

<ul>
  <li v-for="vueBlog in getVueBlogs()">{{ vueBlog }}</li>
</ul>

methods: {
  getVueBlogs() {
    return this.blogPosts.filter((blog) => blog.includes("Vue"));
  },
},

而 watch 只能监听某个属性的变化，做一些命令式的操作，也就是直接修改 data 中的属性，从而反应到使用这些属性的 html 模板上：

data() {
  return {
    blogPosts: [
      "Vue 3.0x 入门实战",
      "Vue 3.x 完全指南",
      "React 18 新特性介绍",
      "JavaScript 基础语法概览",
    ],
    newBlog: "",
  };
},
watch: {
  newBlog(newVal) {
    // 模拟耗时操作
    setTimeout(() => {
      this.blogPosts.push(newVal);
    }, 2000);
  },
}

<ul>
  <li v-for="blog in blogPosts">{{ blog }}</li>
</ul>
<h1>共（{{ count }}）篇博客</h1>
<button @click="newBlog = 'Vue 3.x 方法和监听器的区别'">
  添加一篇博客
</button>
{{ newBlog }}

当 Methods 方法作为普通函数时，可以在 watch 里边调用它，以减少 watch 监听器中的代码量，其它地方用到同样的处理逻辑时，可以调用相同的方法：

data() {
    return {
      blogPosts: [
        "Vue 3.0x 入门实战",
        "Vue 3.x 完全指南",
        "React 18 新特性介绍",
        "JavaScript 基础语法概览",
      ],
      newBlog: "",
    };
  },
  methods: {
    addANewBlog() {
      // 模拟耗时操作
      setTimeout(() => {
        this.blogPosts.push(this.newBlog);
      }, 2000);
    },
    handleButtonClick() {
      this.newBlog = "Vue 3.x 方法和监听器的区别";
    },
  },
  watch: {
    newBlog(newVal) {
      this.addANewBlog();
    },
  },
}

<ul>
  <li v-for="blog in blogPosts">{{ blog }}</li>
</ul>
<button @click="handleButtonClick">添加一篇博客</button>
{{ newBlog }}

示例

我们来看看如何在监听器里调用 methods 中的方法的示例，这个例子和之前的例子类似，不过把按钮的点击事件放到了方法中。我们打开 index.js 文件， 这里继续使用 newBlog 保存新添加的文章标题，之后我们在 methods 配置对象中，添加一个 addANewBlog() 方法，在里边写上之前 watch 监听器中的逻辑，在 2 秒后把博客文章添加到 blogPosts 数组中：

// methods
addANewBlog() {
  // 模拟耗时操作
  setTimeout(() => {
    this.blogPosts.push(this.newBlog);
  }, 2000);
},

再添加一个按钮点击事件处理函数，handleButtonClick()，在里面设置 newBlog 的值：

// methods
handleButtonClick() {
      this.newBlog = "Vue 3.x 方法和监听器的区别";
    },

打开 index.html 文件，把按钮的 @click 点击事件代码改成使用 handleButtonClick 这个方法：

<button @click="handleButtonClick">添加一篇博客</button>

这个时候 watch 仍然监听 newBlog 的变化，只是调用 addANewBlog() 这个方法，来执行操作，我们在 index.js 里，把 watch 中的 newBlog 监听代码，改成调用 addANewBlog()，这里调用 methods 里定义的方法时，要使用 this：

  watch: {
    newBlog(newVal) {
      this.addANewBlog();
    },
  },

这时我们再运行一下示例，点击按钮，可以看到 newBlog 属性的变化，等待 2 秒之后，新的文章也追加到了数组中。这样我们把 methods 方法作为了普通 JavaScript 函数使用，可以方便的抽离代码逻辑进行复用，如果其它地方也用到了这个添加新的博客的方法 addANewBlog，那么可以直接调用这个方法。

小结

好了，到现在我们介绍完了计算属性、方法和监听的区别，是不是听的一头雾水？没关系，这里先简单的了解下，后面随着课程的深入还有你日常的开发实践，会更清楚什么时候用哪一个了，我们这里总结一下这三者的主要应用场景：

• computed 计算属性适合根据 data 里的属性，来做一些简单的计算并返回结果，例如数组的排序、筛选等等，它的结果会缓存起来，只有 data 中的属性发生变化时才会重新计算，其它情况会直接返回计算结果，以提高效率。计算属性可以像 data 属性一样直接在 html 模板中使用。
• watch 适合在 javascript 中监听 data 属性的变化，并根据变化做一些耗时的操作或者发送远程 API 请求。watch 中的方法一般没有返回值，而是直接修改 data 中的属性。
• methods 适合做一些更复杂的计算，通常是作为事件处理函数使用，或者是抽取公用的业务逻辑，当作普通的 JavaScript 函数一样使用。