Using Vue. js to change listener attributes

Introduction to listener attribute changes using Vue. js

When a Vue instance is created, the Vue traverses the data attributes and converts them to getter/setter through ES5 Object. defineProperty. Within the Vue, the Vue can track dependencies and notify changes.

Const vm = new Vue ({data: {foo: 1} // 'vm. foo' (internally, the same as 'this. foo') is the response })

Observe attribute changes

Vue instances provide the $ watch Method for observing attribute changes.

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

When the attribute changes, the response function will be called. Inside the function, this is automatically bound to the Vue instance vm.

Note that the response is asynchronous.

As follows:

Const vm = new Vue ({data: {foo: 1}) vm. $ watch ('foo', function (newValue, oldValue) {console. log ('inner: ', newValue) // output "inner" 2}) vm. foo = 2console. log ('outer: ', vm. foo) // output "outer" 2 first

$ Watch Vue is used to bind data and views. After observing the data changes, Vue asynchronously updates the DOM. In the same event loop, multiple data changes will be cached. In the next event loop, vue refreshes the queue and only performs necessary updates.

As follows:

Const vm = new Vue ({data: {foo: 1}) vm. $ watch ('foo', function (newValue, oldValue) {console. log ('inner: ', newValue) // output only once "inner" 5}) vm. foo = 2vm. foo = 3vm. foo = 4console. log ('outer: ', vm. foo) // output "outer" 4vm first. foo = 5

Calculation attribute

In MV *, the Model layer data is displayed to the View, and complicated data processing logic often exists. In this case, it is more wise to use 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.34vm.height = 5.67console.log (vm. area) // output "13.27m²"

This is automatically bound to the vm within the computing attribute. Therefore, when declaring the computing attribute, you must avoid using the arrow function.

In the preceding example, vm. width and vm. height is the response, vm. area reads this for the first time. width and this. when height is used, the Vue collects the data as a vm. area dependency. vm. width or vm. when height changes, vm. area is recalculated. The computing attribute is based on its dependent cache, if the vm. width and vm. the height does not change. vm is read multiple times. area, the previous calculation result is returned immediately, without the need to evaluate the value again.

Also because of the vm. width and vm. height is the response, in the vm. you can assign a dependency attribute to a variable in "area" to reduce the number of attribute reads by reading the variable. In addition, in the condition branch, Vue sometimes cannot collect dependencies.

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.34vm.height = 5.67console.log (vm. area) // output "13.27m²"

Using ob. js to separately use the Vue attribute observation Module

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

Install

npm install --save ob.js

Observe attribute changes

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

Add computing attributes

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

Input a parameter set 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