VUE基础篇Part3（计算属性）

比眉伴天荒 2022-01-26 02:39 178阅读 0赞

**1、什么是计算属性？**

因为VUE中 \{ \{ \}\} 内只能写一行表达式，如果操作比较复杂导致表达式过长的话就会显得可读性很差，而且不好看，这时候就使用到了计算属性来代替这些复杂的操作

例子：

<div id="app">
    	//需求：把数组111,222,333翻转成333,222,111
    	//如果是不用计算属性写法
    	{
       { text.split(',').reverse().join(',') }}	//split表示分隔符，reverse表示数组翻转，join表示把数组变为字符串
    	
    	//使用计算属性写法后
    	{
       { reverseText }}
    </div>

var app = new Vue({ 
    	el:"#app",
    	data:{ 
    		text:'111,222,333'
    	},
    	computed:{ 
    		reverseText:function(){ 
    			return this.text.split(',').reverse().join(',')
    		}
    	}
    })

**2、计算属性的用法：**

其实已经在第1点钟写出来了，计算属性的用法就是在 computed 中写一个方法，然后把需要进行的操作都写在这个方法里面，再把这个方法直接放到 \{ \{ \}\} 中即可  
唯一要注意的就是 computed 与 data 是同级的

**3、计算属性中的 getter 和 setter：**

计算属性是存在 getter 和 setter 的，如果让计算属性后面直接接一个 function()\{\} 的话就默认是 getter ，上面的例子就是 getter ，现在来写一个 setter

<div id="app">
    	---你的名字是？
    	---{
       { fullName }}
    </div>

var app = new Vue({ 
    	el:"#app",
    	data:{ 
    		firstName:'孙',
    		lastName:'笑川'
    	},
    	computed:{ 
    		fullName:{ 
    			get:function(){ 
    				return this.firstName + this.lastName
    			},
    			set:function(newName){ 
    				var names = newName.split(',')
    				this.firstName = names[0]
    				this.lastName = names[1]
    			}
    		}
    	}
    })

写好上面的代码后就可以使用 setter 了。  
在控制台输出 app.fullName = “孙,狗”，页面上的 “孙笑川” 就会变为 “孙狗”

**4、计算属性中的缓存，与methods的区别**

调用methods里的方法也可以做到计算属性能做到的事，效果也可以是一样的  
但是methods调用的时候要加上（），例子：

<div id="app">
    	//需求：把数组111,222,333翻转成333,222,111
    	
    	//使用计算属性写法后
    	我使用了计算属性：{
       { reverseText1 }}
    	
    	//使用methods方法
    	我使用了methods方法：{
       { reverseText2() }}
    </div>

var app = new Vue({ 
    	el:"#app",
    	data:{ 
    		text:'111,222,333'
    	},
    	computed:{ 
    		reverseText1:function(){ 
    			return this.text.split(',').reverse().join(',')
    		}
    	},
    	methods:{ 
    		reverseText2:function(){ 
    			return this.text.split(',').reverse().join(',')
    		}
    	}
    })

区别：

methods：没有缓存，如果调用方法会导致重新渲染页面就会重新执行这个方法，如果不会重新渲染页面就不会执行这个方法

计算属性：有缓存，不会每次都执行，只有和自身相关的数据发生变化的时候才会重新执行，与是否渲染无关

**5、什么时候用 methods ？什么时候用计算属性？**

看情况使用，最重要的是取决于是否需要进行缓存，如过需要遍历一个大数组的时候，用到缓存会更方便，可以使用计算属性。