vue的 计算属性（computed）、methods、watched三者区别

计算属性 ：和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。

Methods：methods是方法，只要调用它，函数就会执行。

相同：两者达到的效果是同样的。

不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。

<p>原始数据：{{msg}}</p>
<p>改变后的数据：{{changemsg}}</p>
var vm=new Vue({
	el:"#example",
	data:{
		msg:"hello",
	},
	computed:{
		changemsg:function(){
		return this.msg.split("").reverse().join("");
	},
}

computed属性  VS watched 属性

watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。

 
 

  
  var vm = 
  
  new Vue({
 
 
 
 
  
  
  el: 
  
  '#demo',
 
 
 
 
  
  
  data: {
 
 
 
 
    
  
  firstName: 
  
  'Foo',
 
 
 
 
    
  
  lastName: 
  
  'Bar',
 
 
 
 
    
  
  fullName: 
  
  'Foo Bar'
 
 
 
 

  
    },
 
 
 
 
  
  
  watch: {
 
 
 
 
    
  
  firstName: 
  
  function (val) {
 
 
 
 
      
  
  this.fullName = val + 
  
  ' ' + 
  
  this.lastName
 
 
 
 

  
      },
 
 
 
 
    
  
  lastName: 
  
  function (val) {
 
 
 
 
      
  
  this.fullName = 
  
  this.firstName + 
  
  ' ' + val
 
 
 
 

  
      }
 
 
 
 

  
    }
 
 
 
 

  
  })
 
 

computed属性：代码更简单。

 
 

  
  var vm = 
  
  new Vue({
 
 
 
 
  
  
  el: 
  
  '#demo',
 
 
 
 
  
  
  data: {
 
 
 
 
    
  
  firstName: 
  
  'Foo',
 
 
 
 
    
  
  lastName: 
  
  'Bar'
 
 
 
 

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

  
      }
 
 
 
 

  
    }
 
 
 
 

  
  })