Vue.js+Node.js全栈开发教程：Vue.js方法详解

8.2.1　观察属性方法
Vue.js框架设计了一个$watch方法，用于“观察”Vue实例上的属
性是否发生变化。这里的属性变化，具体可以是一个属性表达式的变
化，也可以是稍微复杂的一个函数计算结果的变化。如果$watch方法
观察到了变化，就会通过一个回调函数得到两个参数，分别表示变化
后的新值和变化前的旧值。
下面是关于$watch方法的基本语法格式：

语法：vm.$watch(expOrFn, callback, [options])>
参数说明：
{string ? Function} expOrFn
{Function ? Object} callback
返回值：{Function} unwatch // 返回一个取消观察函数，用来停止触发回
调

关于这个$watch方法如何实现“观察”Vue实例上的属性变化，我
们还是通过具体的代码实例进行讲解。请看下面这个“观察”计数器
变化的代码。
【代码8-15】（详见源代码vuemethod目录中的vuewatch.html文
件）

 

 【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义了其id属性值（"id-di?-counter"）。在第02行代码中，通过
Vue.js 框 架 的 插 值 模 板 语 法 （ {{ }} ） 引 用 了 一 个 对 象
（counter），实现了一个计数器的展示功能。
第20～25行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。同时，这段代码创建了Vue对象的入口，并将该
对象所定义的内容渲染到页面中对应的DOM元素中。具体说明如
下：
■　第21行代码中，通过el属性绑定DOM元素（"id-di?-
counter"）。
■　第22～2?行代码中，通过data属性进行绑定数据操作。
其 中 ， 在 第 2? 行 代 码 中 定 义 了 一 个 计 数 器 属 性
（counter），并初始化为数值1。该计数器属性
（counter）对应第02行代码引用的对象（counter），
实现了页面数据同步渲染的功能。
第2?～2?行的脚本代码定义的就是?m.$?atch()“观察”函数，具
体说明如下：
■ 　第 2? 行 代 码 中 ， 指 定 的 观 察 对 象 就 是 计 数 器
（counter）。
■　第2?行代码中，回调函数定义了两个参数（ne?Val,
oldVal），分别表示计数器对象（counter）变化后和变
化前的值。
■　第28行代码中，将两个参数（ne?Val, oldVal）的调试
信息输出到命令行控制?中显示。
■ 　另 外 ， 第 2? 行 代 码 中 ?m.$?atch() 函 数 的 返 回 值
（un?atch），定义的就是取消观察函数，用来停止触发
回调。
第?1～??行代码中定义的onBtnStartWatch()函数，实现了第06～
10行代码定义的<in?ut>控件的单击事件方法。其中，第?2行代码
通过对?m对象实例?ro?erty（$data）的引用，将计数器对象
（counter）的数值进行累加（+1）。
第?6～?8行代码中定义的onBtnCancelWatch()函数，实现了第12
～16行代码定义的<in?ut>控件的单击事件方法。其中，第??行代
码通过调用un?atch()方法，实现了取消观察函数、并停止触发回
调的操作。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuewatch.html页面，页面初始效果如图8.9所示。
如图8.9中的箭头所示，页面中显示了计数器（counter）的初始
值（1）。然后，我们尝试单击“Start Watch”按钮，页面更新效果
如图8.10所示。

 

如图8.10中的箭头和标识所示，在单击“Start Watch”按钮后，
计数器（counter）的数值从1变为2。同时，命令行控制台中也同步输
出了体现计数器（counter）旧值到新值变化的调试信息。我们可以进
行多次尝试，观察浏览器页面的变化更新以及命令行控制台跟踪的调
试信息，如图8.11所示。

 

最后，尝试单击“Cancel Watch”按钮，取消观察函数及其回调
函数。然后，再进行单击“Start Watch”按钮的测试，效果如图8.12
所示。

 

如图8.12中的箭头和标识所示，在单击“Cancel Watch”按钮取
消“观察”函数后，每次单击“Start Watch”按钮后，页面视图中的
数值会同步增?，但命令行控制台中就不再同步输出体现计数器
（counter）从旧值到新值变化的调试信息了。
在【代码8-15】中“观察”的是一个对象表达式，根据$watch方
法的语法描述，还可以“观察”一个函数方法，这种情况适用于较复
杂的场景。下面，我们还是通过具体的代码实例进行讲解，请看下面
这个“观察”计算算术和变化的代码：
【 代 码 8-16 】 （ 详 见 源 代 码 vuemethod 目 录 中 的
vuewatchfunc.html文件）

 

 【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义了其id属性值（"id-di?-sum"）。其中在第02行代码中，通过
Vue.js框架的插值模板语法（{{ }}）引用了一个表达式（a + b
= sum），实现了一个计算算术和的展示功能。
第20～2?行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。同时，这段代码创建了Vue对象的入口，并将该
对象所定义的内容渲染到页面中对应的DOM元素中。具体说明如
下：
■　第21行代码中，通过el属性绑定DOM元素（"id-di?-
sum"）。
■　第22～26行代码中，通过data属性进行绑定数据操作。
其中，在第2?、2?行代码分别定义了两个加数属性（a和
b），并均初始化为数值1。第25行代码定义了算术和属
性（sum），并初始化为计算结果数值2。这三个属性
（a、b、sum）对应第02行代码引用的对象（a、b、
sum），实现了页面数据同步渲染的功能。
第2?～??行的脚本代码定义的就是?m.$?atch()“观察”函数，具
体说明如下：
■　第2?～?1行代码中，指定的观察对象是一个自定义函
数，该函数返回两个加数属性（a和b）的算术和，实际
对应的是属性（sum）。
■　第?1～??行代码中，回调函数定义了两个参数（ne?Val,
oldVal），分别表示算术和属性（sum）变化后和变化前
的值。第?2行代码中，将两个参数（ne?Val,oldVal）的
调试信息输出到命令行控制?中显示。
■ 　另 外 ， 第 2? 行 代 码 中 ?m.$?atch() 函 数 的 返 回 值
（un?atch），定义的就是取消观察函数，用来停止触发
回调。
第?5～?2行代码中定义的onBtnStartWatch()函数，实现了第06～
10行代码定义的<in?ut>控件的单击事件方法，具体说明如下：
■ 　第 ?6 行 和 第 ?8 行 代 码 通 过 对 ?m 对 象 实 例
?ro?erty（$data）的引用，分别将两个加数属性（a和
b）重新赋值为一个随机自然数（0～100）。
■　第?0行代码通过对?m对象实例?ro?erty（$data）的引
用，将两个加数属性（a和b）的算术和赋值给属性
（sum）。
第??～?6行代码中定义的onBtnCancelWatch()函数，实现了第12
～16行代码定义的<in?ut>控件的单击事件方法。其中，第?5行代
码通过调用un?atch()方法，实现了取消观察函数，并停止触发回
调的操作。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuewatch.html页面，页面初始效果如图8.13所示。

 如图8.13中的箭头所示，页面中显示了计算算术和的表达式初始
值（1+1=2）。然后，尝试单击“Start Watch”按钮，页面更新效果
如图8.14所示。

如图8.14中的箭头和标识所示，在单击“Start Watch”按钮后，
算术表达式从（1+1=2）变化为（26+60=86）。同时，命令行控制台中
也同步输出了算术和（sum）从旧值变化到新值的调试信息。
最后，尝试单击一下“Cancel Watch”按钮，取消观察函数及其
回调函数。然后，再进行单击“Start Watch”按钮的测试，效果如图
8.15所示。

 如图8.15中的箭头和标识所示，在单击“Cancel Watch”按钮取
消“观察”函数后，每次单击“Start Watch”按钮后，页面视图中的
算术表达式会同步更新，但命令行控制台中就不再同步输出体现算术
和（sum）从旧值到新值变化的调试信息了。

8.2.2　事件触发方法
Vue.js框架设计了一个$emit事件触发方法，用于触发Vue实例上
定义的事件。下面是$emit方法的基本语法格式：

语法：vm.$emit(eventName, […args])
参数说明：
{string} eventName // 事件名称
[...args] // 附加参数

关于这个$emit事件触发方法如何使用，我们还是通过具体的代码
实例进行讲解。请看下面这个“消息按钮”的代码。
【代码8-17】（详见源代码vuemethod目录中的vueemit.html文
件）

 

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义了其id属性值（"id-di?-?ue-emit"）。在第02行代码中，通过
Vue.js框架的组件（Com?onent）语法（{{ }}）引用了一个“消
息按钮<?elbutton>”，实现了一个可以输出消息的按钮控件功
能。
第06～10行的脚本代码中，通过“Vue.com?onent()”方法实现了
第02行代码中引用的“消息按钮<?elbutton>”组件。具体说明如
下：
■　第06行代码中，定义了组件的名称（'?elbutton'）。
■　第0?～0?行代码中，通过tem?late模板属性定义了组件
的内容，一个基于<button>元素实现的功能按钮。同
时 ， 通 过 Vue.js 框 架 定 义 的 ?-on 指 令 绑 定 了 单 击
（click）事件，实现了$emit('e?hello')事件触发方
法。注意，参数（'e?hello'）为定义在“消息按钮
<?elbutton>”组件上的自定义事件名称，在实际使用时
需要绑定该自定义事件（见第02行代码）。
第12～1?行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象的（?m）。具体说明如下：
■　第1?行代码中，通过el属性绑定DOM元素（"id-di?-?ue-
emit"）。
■　第1?～18行代码中，通过methods属性进行绑定方法操
作。其中，在第15～1?行代码中实现了sayHello方法，
该方法对应第02行代码中自定义事件（'e?hello'）所触
发的方法。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vueemit.html页面，页面初始效果如图8.16所示。

 

如图8.16所示，尝试单击页面中的“Click me to say hello”按
钮，页面更新效果如图8.17所示。

 

如图8.17中的箭头所示，命令行控制台中输出了【代码8-17】中
第16行代码中定义的日志消息，我们定义的“消息按钮<welbutton>”
组件，通过$emit事件触发方法实现了单击响应功能。
8.2.3　自定义事件方法
Vue.js框架还设计了一组自定义事件触发方法（$on和$once），
用于触发Vue实例上用户自定义的事件。其中，$once方法只能触发一
次，而$on方法在触发次数上是没有限制的。
首先，介绍$on自定义事件触发方法的基本语法格式。

语法：vm.$on(event, callback)
参数说明：
{string ? Array<string>} event // 数组只在2.2.0+版本中支持
{Function} callback // 回调函数 

 关于这个$on自定义事件触发方法如何使用，我们还是通过具体的
代码实例进行讲解。请看下面这个自定义“测试事件”按钮的代码：
【代码8-18】（详见源代码vuemethod目录中的vueon.html文件）

【代码说明】
第01～0?行代码中，在页面中通过<di?>元素定义了一个层，并定
义了其id属性值（"id-di?-?ue-on"）。在第02行代码中，通过
Vue.js框架的插值模板语法（{{ }}）引用了一个对象（msg），
实现了一个页面消息展示的功能。
第06～10行代码中，通过<button id='id-btn-e?ent-on'>元素定
义了一个按钮，用于触发下面用户自定义的“test”事件。
第1?行的脚本代码中，定义了一个全局计数器变量（_times），
初始化数值为0。
第16～21行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。具体说明如下：
■　第1?行代码中，通过el属性绑定DOM元素（"id-di?-?ue-
on"）。
■　第18～20行代码中，通过data属性进行绑定数据操作。
其中，在第1?行代码中定义了一个消息属性（msg），其
对应第02行代码引用的对象（msg），用于显示用户单击
按钮（<button id='id-btn-e?ent-on'>）次数的信息，
该信息是在页面中同步渲染出来的。
第2?～26行代码中，通过?m.$on()方法定义了用户自定义test事
件。具体说明如下：
■　在第2?～26行代码定义的回调函数中，接收一个msg消息
参数。
■　第25行代码中，通过?m.$data将msg参数绑定到第1?行代
码定义的消息属性（msg）上。
第 28 ～ ?? 行 代 码 是 第 08 行 代 码 定 义 的 按 钮 单 击 事 件
（onBtnTestOn()）的具体实现过程。说明如下：
■　第?0行代码中，通过自增表达式（_times++）对计数器
变量（_times）进行（+1）算术运算。
■　第?2行代码中，通过$emit()事件触发方法实现了对用户
自定义test事件的触发操作。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vueon.html页面，页面初始效果如图8.18所示。 

如图8.18中的箭头所示，页面初始时显示的单击次数为0。然后，
尝试单击页面中的“Test ?n”按钮，页面更新效果如图8.19所示。

 

如图8.19中的箭头所示，每单击一次“Test ?n”按钮，就会触发
一次用户自定义的test事件，页面中渲染更新的信息与命令行控制台
中输出的日志消息是同步的。
在Vue.js框架中，除了这个on自定义事件，还定义了一个类似的
$once自定义事件。如上文所述，二者的区别主要就体现在触发次数
上，$once自定义事件只能触发一次。$once自定义事件触发方法的基
本语法格式如下：

语法：vm.$once(event, callback)
参数说明：
{string} event
{Function} callback // 回调函数 

关于这个$once自定义事件触发方法如何使用，我们还是通过具体
的代码实例进行讲解。请看下面这个自定义“测试事件”按钮的代
码。
【代码8-19】（详见源代码vuemethod目录中的vueonce.html文
件）

【代码说明】
【代码8-1?】与【代码8-18】基本类似，主要的区别如下：
■　在第2?～26行代码中，是通过?m.$once()方法（仅仅触
发一次）定义了用户自定义test事件。
■　第??行代码中，另外记录了用户单击按钮<button
id='id-btn-e?ent-once'>的次数，用以和用户自定义
test事件触发次数区分开来。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vueonce.html页面，页面初始效果如图8.20所示。 

如图8.20中的箭头所示，页面初始时显示的单击次数为0。然后，
尝试单击页面中的“Test ?nce”按钮，页面更新效果如图8.21所示。

 

如图8.21中的箭头和标识所示，无论单击多少次“Test ?nce”按
钮，只会触发一次用户自定义的test事件（由vm.$once()事件触
发），而用户单击按钮的次数是同步增?的。另外，对比页面中渲染
更新的信息与命令行控制台中输出的日志消息，可以清楚地看到二者
的区别。