计算属性（computed）

定义：要用的属性不在data中，需要通过已有属性的计算得到；
原理：底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行?
（1）初次读取时会执行一次；
（2）当依赖的数据发生改变时会被再次调用；
优势：与methods相比，内部具有缓存机制，效率更高，测试方便。
备注：
（1）计算属性最终会出现在vm上，直接读取使用即可；
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时以来的数据发生改变

案例：显示两个数字number1，number2并且能对两个数字进行+1操作，同时显示两个数字的和、差、乘积。

        <body>
		<!--准备好一个容器-->
		<div id="root">
			<h1>计算属性</h1>
			<h2>数字1：{{number1}}</h2> <button @click="Add1">增加数字1</button>
			<h2>数字2：{{number2}}</h2> <button @click="Add2">增加数字2</button>
			<br />
			<div style="color: red;">
				<h2>数字之和：{{addAns}}</h2>
				<h2>数字之差：{{subAns}}</h2>
				<h2>数字乘积：{{mulAns}}</h2>
			</div>
		</div>
	</body>
	
	<script>
		const vm = new Vue({
			el:'#root',
			data:{
				number1:0,
				number2:0,
			},
			methods:{
				Add1(){
					this.number1++;
				},
				Add2(){
					this.number2++;
				}
			},
			computed:{
				addAns(){
					return this.number1 + this.number2;
				},
				subAns(){
					return this.number1 - this.number2;
				},
				mulAns(){
					return this.number1 * this.number2;
				}
			}
		})
	</script>

监视属性（watch）

当被监视的属性变化时，回调函数自动调用，进行相关操作；
监视的属性必须存在，才能进行监视！！
监视的两种写法：
（1）new Vue时传入watch配置
（2）通过vm.$watch监视

案例一：监视的两种写法

        <body>
		<!--准备好一个容器-->
		<div id="root">
			<h2>今天天气{{info}}</h2>
			<button @click="changeWeather" >点击切换天气</button>
		</div>
	</body>
	
	<script>
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true
			},
			computed:{
				info(){
					return this.isHot ? '炎热':'凉爽'
				}
			},
			methods:{
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			// 写法一：
			// watch:{
			// 	isHot:{
			// 		immediate:true, //初始化时调用一下handler
			// 		deep:true, //深度监视，可以监视属性内部所有属性的变化
			// 		handler(newValue,oldValue){
			// 			console.log('isHot被修改了',newValue,oldValue);
			// 		}
			// 	}
			// }
		})

		//写法二：
		vm.$watch('isHot',{
			//immediate:true, //初始化时调用一下handler
			//deep:true, //深度监视，可以监视属性内部所有属性的变化
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue);
			}			
		})
	</script>

案例二：深度监视

        <body>
		<!--准备好一个容器-->
		<div id="root">
			<h2>d的值{{a.c.d}}</h2>
			<button @click="updateD" >点击修改d</button>
		</div>
	</body>
	
	<script>
		const vm = new Vue({
			el:'#root',
			data:{
				a:{
					b:1,
					c:{
						d:2,
					}
				},
			},
			methods:{
				updateD(){
					this.a.c.d++
				}
			},
			//写法一：
			watch:{
				a:{
					immediate:true, //初始化时调用一下handler
					//deep:true, //深度监听，可以监听属性内部所有属性的变化
					handler(newValue,oldValue){
						console.log('a中的d被修改了',newValue,oldValue);
					}
				}
			}
		})
	</script>

Vue2--计算属性与监视属性

计算属性（computed）

监视属性（watch）