首页 / VUE / 用Vue.js实现监听属性的变化

用Vue.js实现监听属性的变化

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用Vue.js实现监听属性的变化，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3225字，纯文字阅读大概需要5分钟。

内容图文

前言

创建 Vue 实例时，Vue 将遍历 data 的属性，通过 ES5 的 Object.defineProperty 将它们转为 getter/setter，在其内部 Vue 可以追踪依赖、通知变化。

   
const vm = new Vue({
 data: {foo: 1} // 'vm.foo' (在内部，同 'this.foo') 是响应的
})


观察属性变化

Vue 的实例提供了 $watch 方法，用于观察属性变化。

const vm = new Vue({
 data: {foo: 1}
})
 
vm.$watch('foo', function (newValue, oldValue) {
 console.log(newValue, oldValue) //
输出 2 1 console.log(this.foo) // 输出 2 }) vm.foo = 2


当属性变化后，响应函数将会被调用，在其内部，this 自动绑定到 Vue 的实例 vm 上。

需要注意的是，响应是异步的。

如下：

const vm = new Vue({
 data: {foo: 1}
})
 
vm.$watch('foo', function (newValue, oldValue) {
 console.log('inner:', newValue) // 后
输出 "inner" 2 }) vm.foo = 2 console.log('outer:', vm.foo) // 先输出 "outer" 2


通过 $watch Vue 实现了数据和视图的绑定。观察到数据变化，Vue 便异步更新 DOM ，在同一事件循环内，多次数据变化将会被缓存起来，在下次事件循环中，Vue 刷新队列并仅执行必要的更新。

如下：

const vm = new Vue({
 data: {foo: 1}
})
 
vm.$watch('foo', function (newValue, oldValue) {
 console.log('inner:', newValue) // 后只
输出一次 "inner" 5 }) vm.foo = 2 vm.foo = 3 vm.foo = 4 console.log('outer:', vm.foo) // 先输出 "outer" 4 vm.foo = 5


计算属性

MV* 中，将 Model 层数据展现到 View，经常有复杂的数据处理逻辑，这种情况下，使用计算属性 (computed property) 更加明智。

const vm = new Vue({
 data: {
 width: 0,
 height: 0,
 },
 computed: {
 area () {
  let output = ''
  if (this.width > 0 && this.height > 0) {
  const area = this.width * this.height
  output = area.toFixed(2) + 'm²'
  }
  return output
 }
 }
})
 
vm.width = 2.34
vm.height = 5.67
console.log(vm.area) //
输出 "13.27m2"


在计算属性内部，this 自动绑定 vm，因此声明计算属性时需要避免使用箭头函数。

上例中，vm.width 和 vm.height 是响应的，vm.area 内部首次读取 this.width 和 this.height 时，Vue 收集其做为 vm.area 的依赖，此后 vm.width 或 vm.height变化时，vm.area 重新求值。计算属性是基于它的依赖缓存，如果 vm.width 和 vm.height 没有变化，多次读取 vm.area，会立即返回之前的计算结果，而不必再次求值。

同样由于 vm.width 和 vm.height 是响应的，在 vm.area 中可以将依赖的属性赋值给一个变量，通过读取变量来减少读取属性次数，同时解决在条件分支中，Vue 有时会无法收集到依赖的问题。

实现如下：

const vm = new Vue({
 data: {
 width: 0,
 height: 0,
 },
 computed: {
 area () {
  let output = ''
  const {width, height} = this
  if (width > 0 && height > 0) {
  const area = width * height
  output = area.toFixed(2) + 'm²'
  }
  return output
 }
 }
})
 
vm.width = 2.34
vm.height = 5.67
console.log(vm.area) //
输出 "13.27m2"


通过 ob.js 单独使用 Vue 的属性观察模块

为方便学习和使用，ob.js 将 Vue 中属性观察模块提取并封装了一下。

ob.js GitHub 地址：https://github.com/cnlon/ob.js

安装

npm install --save ob.js


观察属性变化

const target = {a: 1}
ob(target, 'a', function (newValue, oldValue) {
 console.log(newValue, oldValue) // 3 1
})
target.a = 3


添加计算属性

const target = {a: 1}
ob.compute(target, 'b', function () {
 return this.a * 2
})
target.a = 10
console.log(target.b) // 20


像声明 Vue 实例一样传入参数集合

const options = {
 data: {
 PI: Math.PI,
 radius: 1,
 },
 computed: {
 'area': function () {
  return this.PI * this.square(this.radius)
 },
 },
 watchers: {
 'area': function (newValue, oldValue) {
  console.log(newValue) // 28.274333882308138
 },
 },
 methods: {
 square (num) {
  return num * num
 },
 },
}
const target = ob.react(options)
target.radius = 3

内容总结

以上是互联网集市为您收集整理的用Vue.js实现监听属性的变化全部内容，希望文章能够帮你解决用Vue.js实现监听属性的变化所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/304171.html

来源：【匿名】