Home > Web Front-end > JS Tutorial > body text

Using Vue.js to monitor property changes

高洛峰
Release: 2016-12-06 15:29:46
Original
1313 people have browsed it

Foreword

When creating a Vue instance, Vue will traverse the properties of data and convert them into getters/setters through ES5's Object.defineProperty. Internally, Vue can track dependencies and notify changes.

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


Observe property changes

Vue instances provide the $watch method for observing property changes.

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
Copy after login


When the property changes, the response function will be called, and internally, this is automatically bound to the Vue instance vm.

It should be noted that the response is asynchronous.

As follows:

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
Copy after login


The binding of data and views is achieved through $watch Vue. When data changes are observed, Vue updates the DOM asynchronously. Within the same event loop, multiple data changes will be cached. In the next event loop, Vue refreshes the queue and only performs necessary updates.

is as follows:

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
Copy after login


Computed property

MV* In MV*, when the Model layer data is displayed to View, there is often complex data processing logic. In this case, it is more convenient to use computed property wise.

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.27m²"
Copy after login


Inside a computed property, this is automatically bound to vm, so you need to avoid using arrow functions when declaring computed properties.

In the above example, vm.width and vm.height are responsive. When vm.area reads this.width and this.height for the first time, Vue collects them as dependencies of vm.area. After that, vm.width or When vm.height changes, vm.area is re-evaluated. Computed properties are based on its dependency cache. If vm.width and vm.height do not change, reading vm.area multiple times will immediately return the previous calculation results without having to evaluate again.

Similarly because vm.width and vm.height are responsive, in vm.area you can assign the dependent properties to a variable, and read the variables to reduce the number of times of reading properties, and at the same time solve the conditional branch, Vue Sometimes dependencies cannot be collected.

The implementation is as follows:

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.27m²"
Copy after login


Use Vue’s attribute observation module alone through ob.js

To facilitate learning and use, ob.js extracts and encapsulates the attribute observation module in Vue.

ob.js GitHub address: https://github.com/cnlon/ob.js

Installation

npm install --save ob.js
Copy after login


Observe property changes

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


Add calculated properties

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


Pass in the parameter set just like declaring a Vue instance

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
Copy after login



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!