Vue中methods和computed的区别

Vue中methods和computed的区别

1.用法不同

methods的用法：

<div id="root"> 
	<input type="text" v-model="firstname"><br>
	<input type="text" v-model="lastname"><br>
    <!--methods内的方法调用时必须加()-->
	<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
	new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName: '三'
		},
		methods:{
			fullName(){
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>

computed用法：

<div id="root">
	<input type="text" v-model="firstName"><br>
	<input type="text" v-model="lastName"> <br>
    <!--computed内的方法调用时不需加()，当成属性使用即可-->
	<span>{{fullName}}</span>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false;
	const vm = new Vue({
		el:"#root",
		data:{
			firstName:'张',
			lastName:'三'
		},
		computed:{
			fullName(){
				return this.firstName+'-'+ this.lastName
			}
		}
	});
</script>

2.作用不同

​ computed数据是响应式的，如果数据层的值变了，computed就会实时更新到视图层上。

3.原理不同

01.computed底层借助了 Object.defineproperty()方法提供的getter和setter

02.computed内部有缓存机制，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。

03.computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的

04.若计算属性要修改，需调用set函数去响应修改