Vue核心技术-9,监视属性(侦听器)

一,前言

上一节介绍了Vue的计算属性,当计算属性依赖的实例变量发生改变时,会触发计算属性的执行并刷新页面显示
这一节介绍Vue另一个类似的属性:监视属性,官网也称作侦听器,
监视属性用于对属性进行监听,当属性值发生变化时或执行响应的监听方法

---

###二,监听器的使用 上一节计算属性,我们使用了经典例子firstName+lastName=fullName制作了Demo,演示了计算属性 例子中我们通过计算属性获取fullName,当firstName,lastName任何一个发生变化时触发重新计算 这次还是使用firstName+lastName=fullName经典例子 实现两个监听器(不同实现方式)分别监听firstName和lastName的改变,当数据变化时触发事件 “`

fullName:

{{fullName}}

firstName:
lastName:

const vm = new Vue({ el: '#app', data: { firstName: 'Jack', lastName: 'Green', fullName: 'Jack-Green' }, watch: { // 监视firstName firstName: function (newValue, oldValue) { console.log("watch-firstName - newValue = " + newValue + ", oldValue = " + oldValue); this.fullName = newValue + '-' + this.lastName } } }) // 监视lastName vm. $watch('lastName', function (newValue, oldValue) { console.log("$watch-lastName - newValue = " + newValue + ", oldValue = " + oldValue); this.fullName = this.firstName + '-' + newValue })

运行结果:

工程初始化,firstName,lastName,fullName分别显示初始值:

对firstName进行修改,fullName在firstName的监听器作用下被赋值:

对lastName进行修改,fullName在lastName的监听器作用下被赋值:

以上Demo展示了监听器的两种写法

---

结尾

监听器就介绍到这里,实际项目中用到的不是很多,知道有这个东西就好