computed和methods的最大区别

好记性不如烂笔头 遇上问题还是记下来比较好 除非你是天才看东西过目不忘。。。。

先来段methods

<div id="app">
	<input type="text" name="" v-model="input">
	<p>{{fn()}}</p>
	<p>{{fn()}}</p>
	<p>{{fn()}}</p>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			input:""
		},
		methods:{
			fn(){
				console.log("触发")
				return this.input
			}
		}
	})
</script>

methods特性：每当v-model发生数据变化时候 页面会调用fn函数三次。

再来一段 computed

  <div id="app">
	<input type="text" name="" v-model="input">
	<p>{{fn}}</p>
	<p>{{fn}}</p>
	<p>{{fn}}</p>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			input:""
		},
		computed:{
			fn(){
				console.log("触发")
				return this.input
			}
		}
	})
</script>

computed 特性：每当v-model发生数据变化时候 页面只会调用一次fn函数。

总结 computed会缓存数据 按需更新 不会重复渲染DOM 比较节约性能 语法方面 不能写（） 必须return

methods的话 我就不写了 你懂得。。。。