vue中计算属性computed的使用

1.vue中计算属性computed的基本使用

<div>{{this.msg1}}</div>
<div @click=changeCount(5)>修改count的值</div>

data(){
  msg:'11',
  count:2
},
//与computed与data同级
//computed中声明的函数名就是参数名 可以直接使用 例如{{msg1}} 无需在data中声明
//计算机属性中必须有return return内容作为msg1的值
//msg1中涉及的变量（this.msg、this.count）的改变 将会触发函数 类似于事件监听
computed:{
  mesg1:function(){
   return 'computed'+this.msg+this.count
   }
},
methods:{
  changeCount(val){
  this.count=val;
  }
}

2.计算属性中的setter、getter

<div>{{this.msg1}}</div>
<div>{{this.msg}}</div>
<div @click=changeMsg1(5)>修改msg1的值</div>

data(){
  msg:'',
  count:2
},
computed:{
  msg1:{
    //读取msg1的时候会触发get方法 通过return中的内容获取到msg1的值
    get:function(){
      return 'computed'+this.msg
    }
    //修改msg1的值的时候会触发set方法 
    //这个方法有一个参数 参数的值就是为msg1修改的值
    set:function(val){
      this.msg=val
    }
  }
},
methods:{
  changeMsg1(val){
  //执行这句话的时候就会执行computed中的set函数
  this.msg1=val
}

3.计算属性和事件监听的区别

事件监听：只监听当前值的变化
计算属性：如果计算属性绑定的值涉及到多个变量，每一个变量的变化都会被监听