Vue.js+Node.js全栈开发教程：Vue.js数据冻结

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

【代码说明】

第02行和第03行代码中，分别通过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.free?e(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”操作后的数值。