Vue中的computed和methods的区别

首先看computed的用法：

<p id="app">  {{fullName}}  </p>

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

methods的用法：

export default {
     name: "draw",
     data(){      //定义变量source        
       return {
         source:new ol.source.Vector({wrapX: false}),
       }
     },
    props:{ //接收父组件传递过来的参数
      map:{
        //type:String
      },
    },
	mounted(){   //页面初始化方法
		if (map==map){
		}
		var vector = new ol.layer.Vector({
		  source: this.source
		});
		this.map.addLayer(vector);
	},
	watch: {   //监听值变化:map值
		map:function () {
		  console.log('3333'+this.map);
		  //return this.map
		  console.log('444444'+this.map);

		  var vector = new ol.layer.Vector({
			source: this.source
		  });
		  this.map.addLayer(vector);
		}
	},
	methods:{   //监听方法click事件等，执行drawFeatures方法
       drawFeatures:function(drawType){}
	}
}

下面说两者的区别：

1. 首先，一个是计算属性(属性)，一个是方法，所以调用的方式是不一样的
2. computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。 methods在重新渲染的时候，函数总会重新调用执行。所以以此类推，他们的应用场景是不一样的，当频繁的要计算等操作的时候，要是哟个computed，可以减少开销
3. computed是双向绑定(get，set), 而methods是单向绑定，举个简单的例子：当你需要计算数学和语文的总分时，改变数学和语文其中一个分数时，总分会改变，但是改变总分时，数学和语文不会做对应的改变，这就是单向绑定，反之，就是双向绑定