vue计算属性与监听属性

一、计算属性

<!-- 
	计算属性：
			1.定义：要用的属性不存在，要通过已有属性计算得来。
			2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
			3.get函数什么时候执行？
					(1).初次读取时会执行一次。
					(2).当依赖的数据发生改变时会被再次调用。
			4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
			5.备注：
					1.计算属性最终会出现在vm上，直接读取使用即可。
					2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
-->
		 
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三',
			x:'你好'
		},
		methods: {
			demo(){
				
			}
		},
		computed:{
			fullName:{
				//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
				//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
				get(){
					console.log('get被调用了')
					// console.log(this) //此处的this是vm
					return this.firstName + '-' + this.lastName
				},
				//set什么时候调用? 当fullName被修改时。
				set(value){
					console.log('set',value)
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			}
		}
	})
</script>

二、监听属性

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

<!-- 
		深度监视：
				(1).Vue中的watch默认不监测对象内部值的改变（一层）。
				(2).配置deep:true可以监测对象内部值改变（多层）。
			备注：
				(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
				(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
-->
<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	const vm = new Vue({
		el:'#root',
		data:{
			isHot:true,
      numbers:{
				a:1,
				b:1,
				c:{
					d:{
						e:100
					}
				}
			}
		},
		watch:{
		/* isHot:{
				immediate:true, //初始化时让handler调用一下
				//handler什么时候调用？当isHot发生改变时。
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} */
    //简写
			/* isHot(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue,this)
			} */
    
    
    	//监视多级结构中某个属性的变化
			/* 'numbers.a':{
				handler(){
					console.log('a被改变了')
				}
			} */
			//监视多级结构中所有属性的变化
			numbers:{
				deep:true,
				handler(){
					console.log('numbers改变了')
				}
			}
  } 

	vm.$watch('isHot',{
		immediate:true, //初始化时让handler调用一下
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	})
  //简写
	/* vm.$watch('isHot',(newValue,oldValue)=>{
		console.log('isHot被修改了',newValue,oldValue,this)
	}) */
</script>

三、 computed和watch的区别：

<!-- 
	computed和watch之间的区别：
		1.computed能完成的功能，watch都可以完成。
		2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
	两个重要的小原则：
		1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
		2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
			这样this的指向才是vm 或 组件实例对象。
-->