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

原创

sidiot

修改于 2023-11-21 08:11:47

2600

修改于 2023-11-21 08:11:47

前言

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

插值表达式

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

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

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

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

<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 两个数据，代码此处跳转：

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

数据内容如下所示：

<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 入门指南：了解插值表达式和响应式特性 的所有内容了，希望本篇博文对大家有所帮助！

代码：