Vue2.X计算属性和侦听器

介绍

1.computed是计算一个新属性挂载到vm实例上

2.watch是监听已挂载到vm上的数据

1.计算属性Computed：

• 数据可以进行逻辑处理，减少模板中计算逻辑。

• 对计算属性中的数据进行监视

• 依赖固定的数据类型（响应式数据）

  computed:{ fullNameOne:function(){ //新属性 return this.firstName+"+this.lastName }， fullNameTwo:function(){ get(){ //取值 return this.firstName+"+this.lastName }, set:function(value){ //设值 let names = value.split('·')； this.firstName = names[0]; this.firstName = names[1]; } } } 

2.侦听器watch:

<template>
  <div>
    <label>姓名:<input type="text" placeholder="请输入" v-model="fullNameThree"></label>
  </div>
</template>
<script>
export default {
  data() {
    return {
     firstName:'',
     lastName:'',
     fullNameThree:''  },
  watch: {   
//监听某属性改变去影响另外的属性，而不是影响了某属性回过头再修改上面的属性（单向）     firstName(value){
       console.log('watch监视firstName改变${value}');
       this.fullNameThree = value+'·'+this.lastName;
         },
       lastName(value){       console.log('watch监视lastName改变${value}');
       this.fullNameThree = this.firstName+'·'+value;
         }       }     }
  }
};
</script>

3.Computed VS Methods

计算属性可缓存，方法无缓存功能

依赖不改变不再执行函数，返回上次结果

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>


var vm = new Vue({
    el:'#example',
    data{
    messgae:'hello'
    },
   computed:{
    reversedMessage:function(){
     this.message = this.message.split('').reverse().join('')
     }
   }
})

methods调用一次执行一次

<p>Reversed message: "{{ reverseMessage() }}"</p>

methods:{
    reversedMessage:function(){     this.message = this.message.split('').reverse().join('')
     }}