The difference between computed, methods, and watched in vue

The difference between computed, methods, and watched in vue

Preface

This article describes the differences between computed, methods, and watched in vue for your reference. Let's take a look at the details below:

Calculation attribute

Similar to common attributes, a computing attribute is bound to a template. When the corresponding data in data changes, the value of the computing attribute also changes.

Methods

Methods is a method. If you call it, the function is executed.

Same:The two achieve the same effect.

Different:The computing attributes are cached based on their dependencies. They will only apply for a new job if their dependencies change. As long as the dependencies remain unchanged, only the previous results are returned and no function execution is performed.

<P> raw data: {msg }}</p> <p> changed data: {changemsg }}</p> var vm = new Vue ({<span style = "white-space: pre"> </span> el: "# example ", data: {<span style = "white-space: pre"> </span> msg: "hello", <span style = "white-space: pre "> </span >}, <span style =" white-space: pre "> </span> computed: {changemsg: function () {return this. msg. split (""). reverse (). join ("");},}

Computed attributes VS watched attributes

Watched attribute: the code is easier to understand. It specifies the value of monitoring and changes other values accordingly.

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) {  this.fullName = val + ' ' + this.lastName }, lastName: function (val) {  this.fullName = this.firstName + ' ' + val } }})

Computed attribute: the code is simpler.

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () {  return this.firstName + ' ' + this.lastName } }})

Summary

The above is all about this article. I hope this article will help you learn or use shell. If you have any questions, please leave a message, thank you for your support.