vue.js计算属性computed(getter和setter)

vue.js计算属性computed(getter和setter)

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
  computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择。
• 计算属性 VS 方法：把computed区块中的fullName函数整体移到methods中。同时在模板中将{{ fullName}} 替换成{{ fullName() }}。虽然这两种方式输出的结果是相同的，但是性能将遭受毁灭性的打击。使用这种方法fullName()方法在每次页面渲染时都被执行一次，性能不好。
  在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。
• 计算属性允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新
• 介绍： 在 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里的值必须要在模板里使用才行

• 计算属性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')