Detailed explanation of the usage and differences of computed, filter, get and set in vue.js

Below I will share with you a detailed explanation of the usage and differences of computed, filter, get, and set in vue.js. It has a good reference value and I hope it will be helpful to everyone.

1. The computed method of vue.js:

handles complex logic, based on dependency caching, and will re-value when dependencies change. . The same effect can be achieved using methods, but methods will be re-invoked and executed when re-rendering. Computed is better than methods in terms of performance. Methods can be used when caching is not needed.

Example 1: computed and methods implement flipping string

##

<template>
 <p>
 <input v-model="message">
 <p>原始字符串: {{ message }}</p>
 <p>计算后反转字符串: {{ reversedMessage }}</p>
 <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
 </p>
</template>

<script>
export default {
 data () {
 return {
 message: &#39;Runoob123!&#39;
 }
 },
 computed: {
 // 计算属性的 getter
 reversedMessage: function () {
 // `this` 指向 vm 实例
 return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
 }
 },
 methods: {
 reversedMessage2: function () {
 return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
 }
 }
}
</script>

Execution results:

Example 2: Computed get() and set() usage

<template>
 <p>
 	<select v-model="site">
 		<option value="Google http://www.google.com">Google http://www.google.com</option>
 		<option value="baidu http://www.baidu.co">baidu http://www.baidu.com</option>
 		<option value="网易 http://www.163.com">网易 http://www.163.com</option>
 	</select>
 	<p>name：{{name}}</p>
 	<p>url：{{url}}</p>
 </p>
</template>

<script>
export default {
 data () {
 return {
 name: &#39;Google&#39;,
 url: &#39;http://www.google.com&#39;
 }
 },
 computed: {
 site: {
 // getter
 get: function () {
 return this.name + &#39; &#39; + this.url
 },
 // setter
 set: function (newValue) {
 let names = newValue.split(&#39; &#39;)
 this.name = names[0]
 this.url = names[names.length - 1]
 }
 }
 }
}
</script>

Execution result:

2. Filter method of vue.js:

A filter is a simple function that processes the returned data and returns the processing result. However, it was removed in the vue2.0 version. The alternative is to write the function in methods.

Example:

<template>
 <p>
 <input v-model="filterText"/>
 <ul>
 <li v-for="item in obj">
 <span>{{myfilter(item.label)}}</span>
 </li>
 </ul>
 </p>
</template>

<script>
export default {
 data () {
 return {
 obj: [
 {value: 0, label: &#39;beijing&#39;},
 {value: 1, label: &#39;shanghai&#39;},
 {value: 2, label: &#39;guangdong&#39;},
 {value: 3, label: &#39;zhejiang&#39;},
 {value: 4, label: &#39;jiangshu&#39;}
 ],
 filterText: &#39;&#39;
 }
 },
 methods: {
 myfilter (value) {
 if (value.indexOf(this.filterText) > -1) {
 return value
 }
 }
 }
}
</script>

Execution result:

3. The get and set methods of vue.js:

The data attribute in vue can respond to data changes. Internally, the data attribute is converted into a getter/setter. In vue2.0, get() and set() are used in computed properties, which have been covered in the computed instance above. In addition, vm.$set(object, key, value) inherited from vue1.0 is used to dynamically monitor data elements. After the instance is created, array attributes are added and responses can be implemented using this method.

<template>
 <p>
 <input v-model="opt" @blur="add()"/>
 <ul>
 <li v-for="item in arr">
 {{ item }}
 </li>
 </ul>
 </p>
</template>

<script>
export default {
 data () {
 return {
 arr: [ &#39;北京&#39;, &#39;上海&#39;, &#39;广东&#39;, &#39;深圳&#39; ],
 opt: &#39;&#39;
 }
 },
 methods: {
 add () {
 this.$set(this.arr, this.arr.length, this.opt)
 }
 }
}
</script>

Execution results:

The above is what I compiled for everyone. I hope it will be useful to everyone in the future. helpful.

Related articles:

Detailed explanation of the four methods of event binding this in react

Using vuex to achieve login status Storage and not logged in status do not allow browsing, what are the specific methods?

Solve the problem that lower version browsers do not support the import of es6

##

The above is the detailed content of Detailed explanation of the usage and differences of computed, filter, get and set in vue.js. For more information, please follow other related articles on the PHP Chinese website!