欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue.js计算属性computed

程序员文章站 2022-05-17 19:55:13
...

Vue 中,computed 的属性可以被视为是 data 一样,可以读取和设值,因此在 computed 中可以分成 getter(读取) 和 setter(设值),一般情况下是没有 setter 的,computed 预设只有 getter ,也就是只能读取,不能改变设值。

vue.js计算属性默认只有 getter,因为是默认值所以我们也常常省略不写,如下代码:

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

其实computed里的代码完整的写法应该是:

 computed: {
    fullName: {
      get(){
         return this.firstName + ' ' + this.lastName
      }
    }
  }

计算属性getter的触发时间

<template>
 	<div id="demo">
  		<p> {{ fullName }} </p> 
  		<input type="text" v-model="firstName"> 
  		<input type="text" v-model="lastName">
   </div>
</template>

 var vm = new Vue({
       el: '#demo',
       data: { firstName: 'zhang', lastName: 'san' }, 
       computed: { 
       		fullName: function () { 
       			console.log('computed getter...') 
       			return this.firstName + ' ' + this.lastName 
       			}	 
       	}, 
       updated () { 
		        console.log('updated')
        }
})

如果我们改变上边代码里的2个输入框的值firstName或者lastName,都会触发computed以及updated (),也就是说会执行: console.log(‘computed getter…’)和console.log(‘updated’) (用来验证是不是执行了,没有其他意思)

需要注意的是,不是说我们更改了getter里使用的变量,就会触发computed的更新,前提是computed里的值必须要在模板里使用才行。怎么理解呢?

如下代码,我们把template里的fullName 注释掉:

<template>
 	<div id="demo">
  		<!-- <p> {{ fullName }} </p> -->
  		<input type="text" v-model="firstName"> 
  		<input type="text" v-model="lastName">
   </div>
</template>

 var vm = new Vue({
       el: '#demo',
       data: { firstName: 'zhang', lastName: 'san' }, 
       computed: { 
       		fullName: function () { 
       			console.log('computed getter...') 
       			return this.firstName + ' ' + this.lastName 
       			}	 
       	}, 
       updated () { 
		        console.log('updated')
        }
})


就算我们更改了firstName以及lastName都不会触发computed 中的 getter 中的console.log(‘computed getter…’),而只会触发console.log(‘updated’)

计算属性settter

 <template>
  	<div id="demo">
   		<p> {{ fullName }} </p> 
   		<input type="text" v-model="fullName"> 
  	 	<input type="text" v-model="firstName">
    	<input type="text" v-model="lastName">
    </div> 
 </template>


      var vm = new Vue({ 
      		el: '#demo', 
      		data: { firstName: 'zhang', lastName: 'san' },
       		computed: {
        		fullName: { 
        			//getter 方法 
        			get(){
        			 console.log('computed getter...')
         			 return this.firstName + ' ' + this.lastName
          			}, 
          			//setter 方法 
          			set(newValue){ 
          				console.log('computed setter...')
           				var names = newValue.split(' ') 
          			 	this.firstName = names[0]
            			this.lastName = names[names.length - 1]
             			return this.firstName + ' ' + this.lastName
              			} 
              }
         }
         , updated () {
                	console.log('updated')
          }
 })

在template 中,我们可以看到,input 是直接绑 v-model=“fullName”,如果我们这里直接修改了fullName的值,那么就会触发setter,同时也会触发getter以及updated函数。其执行顺序是setter -> getter -> updated,如下:

console.log('computed setter...')
console.log('computed getter...')
console.log('updated')

这里需要注意的是,并不是触发了setter也就会触发getter,他们两个是相互独立的。我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码。也就是说我们如果注释掉上边的setter中修改firstName 和lastName的代码后就不会执行getter,如下:

set(newValue){
 console.log('computed setter...')
  // var names = newValue.split(' ') 
  // this.firstName = names[0] 
  // this.lastName = names[names.length - 1] 
  return this.firstName + ' ' + this.lastName 
  }

会执行,且顺序如下

console.log('computed setter...')
console.log('updated')