前言

本篇博文是《Vue.js 打怪升级之路》中入门系列的第二篇博文，主要内容是探索插值表达式和响应式特性的奥秘，深入学习其中的语法和用法，了解如何将数据动态地展示在页面上 ，往期系列文章请访问博主的 Vue 专栏，博文中的所有代码全部收集在博主的 GitHub 仓库中；

插值表达式

在 Vue 中，插值表达式 是一种特殊的语法，用于将数据动态地插入到HTML模板中。它使用双大括号 {{ }} 将表达式包裹起来，并将其放置在 HTML 元素的文本内容中。

具体地，Vue 的编译器将解析插值表达式，并通过创建虚拟 DOM 节点来表示插值的位置和内容。在运行时，这些虚拟 DOM 节点将被动态地更新，以反映数据的变化。

如上图所示，这里的 name 是 Vue 实例的一个数据属性，将会在渲染时插入到 <div> 元素的文本内容中。

插值表达式一些常见的语法如下，代码此处跳转：

html 复制代码

<h3>{{name}}</h3>
<p>{{motto.toUpperCase()}}</p>
<p>{{age >= 18 ? '成年':'未成年'}}</p>
<p>{{friend.sex}}</p>
<p>{{fn()}}</p>

运行结果：

需要注意的是，插值表达式只能处理简单的表达式，因为 Vue 的编译器只能解析和生成特定的代码逻辑。对于复杂的逻辑，例如条件判断和循环，Vue 提供了其他的指令和语法来处理。

因此需要注意以下几点：

在插值表达式中的数据需要在 data 中存在。 比如使用 data 中不存在的数据 desc，控制台会提示 Property or method "desc" is not defined on the instance but referenced during render.。
不支持使用语句。比如 for。
不能在标签的属性中使用插值表达式。如果要给标签属性动态赋值，根据提示用 v-bind 指令。

响应式特性

Vue 中的响应式特性指的是 Vue 框架能够自动追踪数据变化并立即更新相关视图的能力。

这种响应式特性是通过 Vue 的 "数据劫持" 机制来实现的，具体实现过程如下：

数据对象的初始化 ：定义一个包含数据的 JavaScript 对象，作为 Vue 实例的 data 选项。
监听数据对象属性 ：Vue 将遍历 data 选项中的所有属性，并使用 Object.defineProperty 方法将它们转换为 "响应式属性"。在转换过程中，Vue 会为每个属性创建一个监听器 Watcher 对象，用于追踪属性的变化状态。
建立数据依赖关系：这是 Vue 实现 "响应式" 的关键步骤。当使用响应式属性时，模板中的视图会创建对应的依赖，Vue 之所以能够追踪到视图，依赖于相对应的数据属性。
捕获响应数据变化：当响应式属性被修改时，Vue 能够捕获到这个变化，并通知依赖于该属性的相关视图进行更新。
同步更新依赖视图：一旦某个响应式属性发生变化，Vue 会立即更新所有依赖于该属性的视图，以保持与数据的同步。

比如我们需要渲染 title 和 content 两个数据，代码此处跳转：

html 复制代码

<div id="app">
    <h3>{{title}}</h3>
    {{content}}
</div>

数据内容如下所示：

js 复制代码

<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            title: "响应式数据",
            content: "这里是响应式内容！"
        }
    })
</script>

作为响应式数据，在 content 中添加内容 Hello, World! --sidiot.，页面上也会随之添加。

运行结果：

当然也可以在浏览器控制台进行修改：

开发者工具

在动态调试数据时，可能浏览器控制台使用的没有那么利索，这时候我们可以寻求插件的帮助，在谷歌商店搜索 Vue.js，选择第一个进行安装；

这样我们就可以通过插件快速地修改数据了：

后记

当你完成了阅读这篇博文时，希望你对 Vue.js 的插值表达式和响应式特性有了更全面的了解。通过插值表达式，可以轻松地将数据动态地显示在 HTML 模板中，实现数据的灵活绑定和展示。同时，Vue.js 独特的响应式特性使得数据的变化能够自动地反映在应用程序的 UI 上，无需手动操作 DOM，这样可以专注于数据的处理和逻辑的编写，提高开发效率和代码的可维护性。

以上就是 Vue.js 入门指南：了解插值表达式和响应式特性 的所有内容了，希望本篇博文对大家有所帮助！

代码：

插值表达式；
响应式数据；

参考：

📝 上篇精讲：Vue.js 入门指南：从安装到创建第一个应用程序

💖 我是 𝓼𝓲𝓭𝓲𝓸𝓽，期待你的关注，创作不易，请多多支持；

👍 公众号：sidiot的技术驿站；

🔥 系列专栏：Vue.js 打怪升级之路

【Vue】「Vue.js 入门指南」（二）了解插值表达式和响应式特性

前言

插值表达式

响应式特性

开发者工具

后记