Use Vue. js to change the listener attributes.

Use Vue. js to change the listener attributes.

Preface

When a Vue instance is created, the Vue traverses the data attributes through the ES5Object.defineProperty Convert them to getter/setter. In the Vue, you 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

Pass$watch VueData and views are bound. 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 above example,vm.widthAndvm.height Yes,vm.area First internal read this.width Andthis.height Vue collects the datavm.area Aftervm.width Or vm.height When changing,vm.area Reevaluate. The computing attribute is based on its dependency cache. Ifvm.width Andvm.height No change, read multiple timesvm.area, Returns the previous calculation result immediately without having to evaluate it again.

Becausevm.widthAndvm.height Is a response, invm.area You can assign a dependency attribute to a variable to reduce the number of times the attribute is read 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

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.