用Vue.js实现监听属性的变化
前言创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 观察属性变化Vue 的实例提供了 $watch 方法,用于观察属性变化。 vm.$watch('foo',function (newValue,oldValue) {
console.log(newValue,oldValue) // 输出 2 1 console.log(this.foo) // 输出 2 }) vm.foo = 2 当属性变化后,响应函数将会被调用,在其内部,this 自动绑定到 Vue 的实例 vm 上。 需要注意的是,响应是异步的。 如下:vm.$watch('foo',oldValue) {
console.log('inner:',newValue) // 后输出 "inner" 2 }) vm.foo = 2 通过 如下:vm.$watch('foo',newValue) // 后只输出一次 "inner" 5
}) vm.foo = 2 计算属性MV* 中,将 Model 层数据展现到 View,经常有复杂的数据处理逻辑,这种情况下,使用计算属性 (computed property) 更加明智。 0 && this.height > 0) {
const area = this.width * this.height
output = area.toFixed(2) + 'm²'
}
return output
}
}
})
vm.width = 2.34 在计算属性内部,this 自动绑定 vm,因此声明计算属性时需要避免使用箭头函数。 上例中, 同样由于 实现如下: 0 && height > 0) {
const area = width * height
output = area.toFixed(2) + 'm²'
}
return output
}
}
})
vm.width = 2.34 通过 ob.js 单独使用 Vue 的属性观察模块为方便学习和使用,ob.js 将 Vue 中属性观察模块提取并封装了一下。 ob.js GitHub 地址:https://github.com/cnlon/ob.js 安装观察属性变化添加计算属性像声明 Vue 实例一样传入参数集合总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |