Vue watch

先看一段代码

<template>
  <div>
		<ul>
			<li v-for="item in list" :key="item" v-text="item"></li>
		</ul>
		<el-button type="primary" @click="handle">+1</el-button>
		<el-button type="primary" @click="handle2">+1响应式</el-button>
		<el-button type="primary" @click="handle3">加个元素</el-button>
		<p v-text="num"></p>
		<el-button type="primary" @click="handle4">+1</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
	data(){
		return {
			list:[1,2,3,4,5],
			num:0
		}
	},
	methods:{
		handle(){
			this.list[0]=0
      		console.log(this.list);
		},
		handle2(){
			this.$set(this.list,5,100)
			console.log(this.list);
		},
		handle3(){
			this.list.push(this.list.length+1)
			console.log(this.list);
		},
		handle4(){
			this.num+=1
		}
	},
	watch:{
		// 普通监听
		// list:function (newVal,oldVal) {
		// 	console.log(newVal,oldVal);
		// }

		// 普通监听
		num:function (newVal,oldVal) {
			console.log(newVal,oldVal);
		},

		// 针对数组或对象的深度监听
		// 监听如果不进行深度遍历，那么监听不到在堆区的数据
		// list:{
		// 	handler:(newVal,oldVal)=>{
		// 		console.log(newVal,oldVal);
		// 	},
		// 	deep:true
		// },

		// 立即监听
		list:{
			handler:(newVal,oldVal)=>{
				console.log(newVal,oldVal);
			},
			deep:true,
			immediate:true
		},
	},
	beforeCreate(){
		console.log(this.list);
	},
	created(){
		console.log(this.list);
	}
}
</script>

普通监听

普通监听，无法监听到堆区数据（对象，数组等）

深度监听

深度监听的新值和旧值相等，这点值得注意

立即监听

页面加载就监听

执行顺序：
beforeCreate --> 立即监听 --> created

此时打印出的oldVal是undefined，说明Vue刚刚进行数据初始化。
所以，数据处理最早的生命周期方法应该在created中。
数据处理最早可以在watch中