vue中 computed、methods与watch

computed、methods与watch

conmputed：计算属性

computed多个值变化影响一个结果的变化，属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。他是函数主要当作属性来使用，逻辑简单，原来没有属性（结果），创建可计算属性（get/set,一个默认get体）

		<div id="app">
			<input type="text"  v-model="one" />
			<input type="text"  v-model="two" />
			<input type="text"  v-model="all"/>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					one:" ",
					two:""
				},
				computed:{
					all(){
						return this.a+"ai"+this.b
					}
				}
			})
		</script>

2、methods

methods方法表示一个具体的操作，主要书写业务逻辑，存放函数。

3、watch：侦听属性

watch一个值变化，影响到多个结果改变，一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，watch监控路由对象‘$route’，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

<div id="app">
		姓：<input type="text" v-model="firstname" />
		名：<input type="text" v-model="lastname" />
		总称：{{fullname}}
		<input type="text" v-model="obj.a" />
</div>

// An highlighted block
var vm = new Vue({
	el: "#app",
	data: {
		firstname: "li",
		lastname: "bao",
		fullname: "li bao",
		obj: {
			a: "1111"
		}
	},
	watch: {
		"obj.a": {
			handler(oldVal, newVal) {
				console.log(oldVal, newVal); //结果会不一样
			},
			immediate: true
		},
		firstname() { 
			console.log(this.firstname);
		}
	}
})

deep 控制是否要看这个对象里面的属性变化
immediate 控制是否在第一次渲染是执行这个函数

vm.$watch() 的用法和 watch 回调类似

vm.$watch("obj.a",function(oldVal,newVal){
		console.log(oldVal,newVal);
})

总结

如果要对属性进行复杂的计算推荐comouted计算属性
如果对属性进行监听并对数据进行操作的的话推荐使用watch侦听属性