计算属性和 watcher 监听器都可以监听 data 中的数据的变化，然后根据具体的业务逻辑对数据进行操作。它们两个的区别是，computed() 计算属性一般是把 data 中的数据进行一番包装和计算之后，返回新的值，例如对数组进行过滤后的值，而并不会直接修改 data 中的属性：

data() {
    return {
      blogPosts: [
        "Vue 3.0x 入门实战",
        "Vue 3.x 完全指南",
        "React 18 新特性介绍",
        "JavaScript 基础语法概览",
      ],
    };
  },
  computed: {
    count() {
      return this.blogPosts.length;
    },
  },

到现在，我们接触了 computed 计算属性，methods 方法和 watchers 监听器，这三者使用起来好像没有什么区别，都能响应数据的变化，那么这三者之间该怎们进行选择呢？计算属性、方法和监听器这三种方式是有一定的区别的，但有时候也并不严格区分，接下来的几节课我们看一下它们的区别，之后你就会自己决定什么时候使用哪一个了，这些课的内容如果觉得听不太懂也没关系，后面你会见到它们更多的用法，在以后使用 Vue 的过程中，你也能慢慢的理解了。

Computed 计算属性和 Methods 方法的区别​

我们看一下计算属性和方法的区别，在这之前，看一下它们的相同点。在讲计算属性的时候，我们说过，它适合根据 data 里的属性作一些稍微复杂的计算，例如数组过滤，筛选等，并且需要复用的情况：

<ul>
  <li v-for="vueBlog in vueBlogs">{{ vueBlog }}</li>
</ul>

data() { 
   return { 
      blogPosts: [ "Vue 3.0x 入门实战", "Vue 3.x 完全指南", "React 18 新特性介绍", "JavaScript 基础语法概览", ],
    }; 
}, 
computed: { 
   vueBlogs() {
      return this.blogPosts.filter((blog) => blog.includes("Vue")); 
   }, 
}

我们知道在 Vue 应用中，当 data 里边的属性变化的时候，HTML 模板中使用到这个属性的地方，会自动更新，但是如果我们想在 JavaScript 中，监听某个属性的变化，并做一些操作，该怎么办呢？这个时候可以使用 Vue 提供的 watch 选项，为属性添加一个监听器。

Watch 的应用场景​

watch 适合根据属性的变化，做一些开销比较大的操作，或者异步操作，例如设置定时器，请求远程 API 等，它不会返回任何值，而是根据属性的变化，直接修改其它属性的值，这样其它属性修改之后，就能够在 Vue 的响应性机制下，自动更新依赖这个属性的 HTML 视图部分。

Vue 中的 methods 方法，或者也可以叫做函数。无论是在 Vue 中，还是在原生的 JavaScript 中，处理事件总是会涉及到比较复杂的业务逻辑，例如说表单验证，发起异步请求，或者是和产品具体业务有关的计算，这个时候，如果都像之前的例子那样直接把事件处理的代码写在 HTML 模板中，是不推荐的：

<button @click="showAnswer = !showAnswer">{{ label }}</button>

这种写法虽然简单，但是和 html 杂糅到了一起，另外也不方便逻辑复用，对于大量的业务逻辑代码，这种方式写起来就是灾难。好在 vue 提供了 methods 方法这个配置项，可以让我们定义一些方法来处理事件。

市面上的编程语言越来越多，如果你考虑到后续的工作中有可能需要用到新的编程语言，或者你想转型成新的、热门的编程语言开发，那么就可能会有这样的顾虑：到底需不需要学习新的编程语言？如果要学的话，该怎么快速的学会？这篇文章我们就来看看，为何要学习多门编程语言，以及如何学会任何一门编程语言。

学习多门编程语言有什么好处？​

对于软件工程师来说，我们可以把编程语言当做一个工具，当你有不同的需求的时候，可以选择最合适的工具来实现它。不同的编程语言有不同的优势，比如说 Node.js 是单线程的，它对于处理高并发的应用会很有帮助，而 Java 是完全面向对象的编程语言，类型系统丰富并且完善，编写起来非常整洁，简单易用，那对于大型的项目开发和团队开发来说，选择 Java 是最合适的。

学习多种编程语言也能够让你发现当前使用的编程语言有什么缺陷，进而拓宽你的知识水平和眼界。当你知道一个问题可以用其他语言能够更好、更快速的解决，你也可以尝试把其他编程语言的特性拿到你当前使用的编程语言上来，看看能不能用类似的技巧实现功能需求，来提高你的开发效率。

如果你想转型为其他编程语言的开发， 或者公司内部转岗需要你学会新的编程语言，而你正好学过这门编程语言，你就能够更快的进入状态。

这样看来，学习多个编程语言是很有必要的。

在上一篇文章的示例里边，我们通过点击一个按钮来展示一个问题的答案，而按钮的文案会根据答案的显示与否，而动态的发生变化。但是呢，这个文案的判断逻辑我们是写在 html 模板里边的，用了一串三目运算符：

<button @click="showAnswer = !showAnswer">
  {{ showAnswer ? "隐藏" : "显示" }}答案
</button>

对于只在一个地方使用这个逻辑的时候，可能并没有什么问题，但是如果有多次使用到这个逻辑的地方，那么我们需要反复复制粘贴这个逻辑：

到现在，我们把 Vue 基本的展示逻辑介绍完了，覆盖了常见的场景：

• 在开合标签内引用 data 里的数据。
• 在标签属性中引用 data 的数据。
• 展示列表数据。
• 根据条件展示数据。

不过，这些都是静态的展示，没有数据的变化，体现不了 vue 的优点。这篇文章我们将通过处理 html DOM 事件，来修改 data 里的数据，并看到页面根据 data 的变化而变化，也就是 vue 的响应性机制。

在前端开发中，除了需要经常展示列表内容外，还经常会根据一定条件展示页面内容，例如点击按钮的时候弹出对话框，当列表内容为空时，显示空白提示，或者在表单中展示验证错误等。那么在 Vue 3 中，我们使用 v-if 以及相关的 v-else-if 和 v-else 指令来实现条件判断，或者使用 v-show 指令。我们分别看一下它们的作用、使用方法和区别。

v-if、v-else-if 和 v-else​

v-if、v-else-if 和 v-else 和 JavaScript 中的 if...else if...else 功能是一样的：

if (books.length === 0) {
} else if (books.length === 1) {
} else {
}

这篇文章我们来看一下在 vue 中展示列表内容。在前端开发中，经常会有展示列表的需求，例如博客列表，任务列表等等，那么 vue 中提供了 v-for 指令，来让我们方便的展示列表数据。

展示纯数组数据​

我们知道，data() 函数返回的对象中，它的属性可以是任何类型，那么要展示列表数据，最合适的就是数组类型了：

data() {
  return {
    todos: ["把项目做完", "去超市购物", "看10分钟的书"],
  };
},

假设我们要把 todos （待办事项）数组渲染到由 ul 和 li 构成的无序列表中，那么我们可以先定好结构：

这篇文章我们看一下如何使用 data 来为 HTML 模板提供数据。在普通 HTML 中，我们编写的文本都是静态的，如果要改变一段文字，需要使用 JavaScript 来修改：

// html
<div>原始文本</div>;

// js
const div = document.querySelector("div");
div.innerHTML = "新文本";

而在 Vue 中，我们可以通过它的 data 属性，来把数据绑定到 HTML 中：

<div>{{ msg }}</div>

{ data() { return { msg: "你好" } } }