8.1.1　Vue.js数据同步
对于Vue.js框架编程而言，当创建一个新的Vue实例对象时，其会
将数据（data）对象中的所有的property属性?入到Vue.js框架的响
应式系统当中去。该操作带来的最直接效果就是，当这些property属
性值发生改变时，视图（View）将会随之发生“响应”——也就是同
时更新为新匹配的属性值。以上关于Vue.js数据的描述听起来会感觉
比较晦涩，下面我们通过具体实例进行解释。
（1）在页面中定义一个层（<div>）元素，用于显示Vue组件定义
的对象，代码如下：
【代码8-1】（详见源代码vuedata目录中的vuedata.html文件）

【代码说明】
第 01 行 代 码 中 ， 定 义 了 <div> 元 素 的 id 属 性 （ "id-div-
number"）。
第02行代码中，通过Vue.js框架的插值模板语法（{{ }}），引用
了一个对象（dNum）。
（2）通过js脚本代码定义一个对象（oNum），在该对象内定义一
个属性（n），并进行初始化操作，代码如下：
【代码8-2】（详见源代码vuedata目录中的vuedata.html文件） 

 3）通过Vue脚本代码定义一个Vue对象（vm），将对象（oNum）
所定义的数据写进该Vue对象（vm），代码如下：
【代码8-3】（详见源代码vuedata目录中的vuedata.html文件）

【代码说明】
第01～06行代码中，通过“ne? Vue()”构造函数实例化Vue对象
（?m）。同时，这段代码创建了Vue对象的入口，并将该对象所定
义的内容渲染到页面中对应的DOM元素中。具体说明如下：
■　第02行代码中，通过“el”属性绑定DOM元素（id =
'id-di?-number'），该DOM元素定义在【代码8-1】中。
■　第0?～05行代码中，通过“data”属性绑定数据操作。
其 中 ， 在 第 0? 行 代 码 中 定 义 了 一 个 ?ro?erty 属 性
（dNum），其将该属性值初始化为【代码8-2】中定义的
对象（oNum）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuedata.html页面，效果如图8.1所示。

 

如图8.1中的箭头所示，【代码8-3】中定义的Vue对象成功渲染到
【代码8-1】中定义的页面D?M元素中。
这里需要特别关注的是，Vue对象中data属性的property属性的
“响应式”特性。也就是当这些数据发生改变时，页面视图会随之进
行重新渲染。为了验证这个Vue.js数据的特性，我们在页面中添?一
个文本输入框和一个关联按钮，通过人工输入修改property属性
（dNum）的值，并观察页面视图的变化。代码如下：
【代码8-4】（详见源代码vuedata目录中的vuedata.html文件） 

【代码说明】
第0?行代码中，通过<in?ut ty?e="text">元素定义了一个文本输
入框。
第0?～08行代码中，<in?ut ty?e="button">元素定义了一个按
钮。
然后，定义上面按钮控件（id='id-input-btn-vm'）的onclick方
法（onBtnVMClk()），以修改property属性（dNum）的值，代码如
下：
【代码8-5】（详见源代码vuedata目录中的vuedata.html文件）

 

【代码说明】
第0?行代码中，将从文本输入框中获取的用户输入值，赋值给?m
对象的?ro?erty属性（dNum）。
接下来，通过VS Code开发工具启动FireFox浏览器，运行测试
vuedata.html页面，效果如图8.2所示。

 

如图8.2中的箭头所示，【代码8-5】通过获取人工输入的数值并
赋值给property属性（dNum）后，页面视图中的D?M元素的内容也同步
进行了更新。注意，这个过程是通过修改vm对象实现的。那如果直接
修改【代码8-2】中定义的对象（oNum）呢？
为了验证这个Vue.js数据的特性，我们在页面中再添?一个文本
输入框和一个关联按钮，通过人工输入修改对象（oNum）的值，并观
察页面视图的变化。代码如下：
【代码8-6】（详见源代码vuedata目录中的vuedata.html文件）

 

【代码说明】
第0?行代码中，通过<in?ut ty?e="text">元素定义了一个文本输
入框。
第0?～08行代码中，<in?ut ty?e="button">元素定义了一个按
钮。
然后，定义上面按钮控件（id='id-input-btn-data'）的onclick
方法（onBtnDataClk()），以修改对象（oNum）的值，代码如下：
【代码8-7】（详见源代码vuedata目录中的vuedata.html文件）

 【代码说明】
第0?行代码中，将从文本输入框中获取的用户输入值，赋值给对
象（oNum）的属性（n）。
下面我们还是通过VS Code开发工具启动FireFox浏览器，运行测
试vuedata.html页面，效果如图8.3所示。

如图8.3中的箭头所示，【代码8-7】通过获取人工输入的数值并
赋值给对象（oNum）的属性（n）后，页面视图中的D?M元素的内容也
同步进行了更新。

提示
只有当Vue对象实例被创建时，就已经?在于data属性中的
?ro?erty属性才是响应式的。如果在晚些时候才需要使用某个
?ro?erty属性，那么还是需要在一开始初始化时定义好该?ro?erty
属性。即使一开始该?ro?erty属性为空或不?在，那么也需要设置
一些初始值（比如：空字符串）。 

8.1.2　Vue.js数据冻结
Vue.js数据“同步更新”的功能很实用，页面渲染效果也很惊
艳。不过，我们不总是需要全部数据都保持同步更新，那么该如何操
作呢？Vue.js框架为数据对象定义了“冻结”方法，可以实现阻止
property属性同步更新的功能。
这个方法就是由?bject对象所提供的freeze()方法，通过在一个
对象上使用freeze()方法，就会阻止修改现有的property属性，也就
意味着Vue.js框架的视图响应系统无法追踪property属性的变化。下
面通过一个具体的代码实例进行详细介绍。
（1）在页面中定义一个层（<div>）元素，用于显示Vue组件定义
的对象，代码如下：
【代码8-8】（详见源代码vuedata目录中的vuedata.html文件）

 

【代码说明】
第02行和第0?行代码中，分别通过Vue.js框架的插值模板语法
（{{ }}），引用了两个对象（dNumA和dNumB）。
（2）通过JS脚本代码定义两个对象（oNumA和oNumB），分别在两
个对象内定义一个属性（a和b），并进行初始化操作，代码如下：
【代码8-9】（详见源代码vuedata目录中的vuedata.html文件）

 

【代码说明】
我们的设计想法是，通过?bject.freeze()方法冻结其中一个对象
（oNumB），这样就可以与另一个对象（oNumA）进行对比参照。
（3）通过Vue脚本代码定义一个Vue对象（vm），将对象（oNumA
和oNumB）所定义的数据写进该Vue对象（vm），代码如下：
【代码8-10】（详见源代码vuedata目录中的vuedata.html文件）

 

【代码说明】
第0?～06行代码中，通过“data”属性进行绑定数据操作。具体
说明如下：
■　第0?行代码中定义了一个?ro?erty属性（dNumA），它将
该 属 性 值 初 始 化 为 【 代 码 8-8 】 中 定 义 的 对 象
（oNumA）。
■　第05行代码中定义了一个?ro?erty属性（dNumB），它将
该 属 性 值 初 始 化 为 【 代 码 8-8 】 中 定 义 的 对 象
（oNumB）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuedata.html页面，效果如图8.4所示。

 

如图8.4所示，【代码8-10】中定义的Vue对象成功渲染到【代码
8-8】中定义的页面D?M元素中。
（4）然后是本例中关键的一步，通过?bject.freeze()方法冻结
其中对象（dNumB），代码如下：
【代码8-11】（详见源代码vuedata目录中的vuedata.html文件）

01 Object.freeze(oNumB); 

为了验证上面这个Vue.js数据冻结的特性，我们在页面中添?相
应的文本输入框和关联按钮，通过人工输入修改property属性的值，
并观察页面视图的变化。代码如下：
【代码8-12】（详见源代码vuedata目录中的vuedata.html文件）

 

【代码说明】
第2?行和第2?行代码中，将从文本输入框中获取的用户输入值，
分别赋值给?m对象的?ro?erty属性（dNumA和dNumB）。
第2?行和第?0行代码中，将从文本输入框中获取的用户输入值，
分别赋值给对象（oNumA和oNumB）的属性（a和b）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuedata.html页面，效果如图8.5和图8.6所示。

 

如图8.5中的箭头（实线）所示，通过获取人工输入的数值并赋值
给property属性（dNumA）后，页面视图中的D?M元素的内容也同步进
行了更新。而图8.5中的箭头（虚线）表示，通过获取人工输入的数值
并赋值给property属性（dNumB）后，页面视图中的D?M元素的内容没
有进行同步更新，这就表明【代码8-11】中的数据冻结操作生效了。
同样如图8.6中的箭头（实线和虚线）所示，通过获取人工输入的
数值并赋值给对象（oNumA）的属性（a）和对象（oNumB）的属性
（b）后，页面视图中的D?M元素（对应oNumA对象）的内容同样也同步
进行了更新，而D?M元素（对应oNumB对象）的内容没有进行同步更
新，同样表明【代码8-11】中的数据冻结操作生效了。

8.1.3　Vue.js实例property属性
除了前面介绍的Vue数据property属性之外，Vue.js框架还定义了
一个非常有用的“Vue实例property属性”的概念。需要注意的是，在
使用该功能时必须要?上前缀“$”符号，主要是便于与用户定义的数
据property属性进行区分。
首先，我们介绍一下“Vue实例property属性”的内容。为了便于
理解这个“Vue实例property属性”的术语，我们通过具体实例进行解
释。请看下面的代码。
【代码8-13】（详见源代码vuedata目录中的vuedata.html文件）

 

【代码说明】
第2?行代码中，通过?m对象实例?ro?erty属性（$data）的引用，
代理了对?m对象中data属性中?ro?erty属性（dNum）的访问。这
里，通过命令行控制?输出了“?m.$data.dNum.n”的数值。
第2?行代码中，通过?m对象实例?ro?erty属性（$el）的引用，代
理了对?m对象中el属性DOM元素的访问。这里，通过命令行控制?
输出了?m.$el代表的内容。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuedata.html页面，效果如图8.7所示。

 

如图8.7中的箭头所示，在浏览器的命令行控制台中，【代码8-
13】的第23行代码输出了数值“1”，第24行代码输出了D?M元素。
现在，估计读者已经能大概理解“Vue实例property属性”的含义
了。而Vue.js框架定义这个概念的目的，就是为了帮助设计人员以更
简洁的方式操作Vue对象中定义的各个字段属性。
接下来，我们在【代码8-13】的基础上稍作修改，看一下如何实
际使用“Vue实例property属性”进行操作。请看下面的代码。
【代码8-14】（详见源代码vuedata目录中的vuedata.html文件）

 

【代码说明】
第2?～2?行代码中，通过?m对象实例?ro?erty（$el）的引用，获
取了其DOM元素的innerText属性内容，并将该内容输出到命令行
控制?中。
第25行代码中，通过?m对象实例?ro?erty（$data）的引用，代理
了对其data属性中?ro?erty属性（dNum）的访问，并对其n属性值
进行了“+1”操作。
下面，通过VS C ode开发工具启动FireFox浏览器运行测试
vuedata.html页面，效果如图8.8所示。在浏览器的命令行控制台中，
【代码8-14】中的第24行代码输出了D?M元素的innerText属性内容，
第25行代码输出了n属性经过“+1”操作后的数值。