Vue中的侦听器：数据变化的秘密揭示

一、侦听器：vue中想监听数据的变化

（一）侦听器watch

• 如何侦听到某个变量值改变呢？使用watch配置项
• watch：可以侦听到data/computed属性值的改变。
• 语法：

watch:{
	"被侦听的属性名"(newVal, oldVal){

	}
}

• 快速入门小案例

<template>
  <div>
    <input type="text" v-model="name" />
  div>
template>

<script>
	export default{
		data(){
			return{
				name:""
			}
		},
    watch:{
		name(newVal, oldVal){//当前msg变量的值改变出发函数
			console.log(newVal, oldVal);
		}
	}
}
script>

（二）监听list变化, 同步到本地案例

• 我们可以通过上篇的文章⛽Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能⛽，通过使用侦听器来实现本地数据化存储。简化每次都需要在方法里面添加
  - 简单写法：侦听简单数据类型score，获取复杂数据类型list（数量变化）

<script>
export default {
  
  watch:{
    list(newval,oldval){//newval:变化后的值,oldval：变化前的值，一般不用，可以删除
      // console.log(this.list)//1.此时此刻的值，只要侦听器侦听到数据变化，就会打印;
      localStorage.setItem("list",JSON.stringify(this.list));

      // 2.关键：新增、删除里面注释掉本地化的方法就行
    }
  }
};
</script>

• 新增一个按钮，用于用于模拟编辑

<div>
  <button @click="change">把第一科 分数随机变化button>
div>

<script>
export default {
  methods: {
    //只是变化第一科的成绩,用于模拟编辑
    //  操作算改变数据list
    change(){
      this.list[0].score = Math.floor(Math.random()*100);
    }
  },
script>

• 上面虽然页面更改了第一科的数据，但是没有存储到本地。【是因为没有使用侦听器完整的写法】
  
• 使用完整写法的侦听器：

watch: {
     // 完整写法：
     list:{
       deep:true,//deep对复杂数据，深度侦听（数量、数据内部变化都能侦听到！）不仅会监听地址的变化，还会监听对象内部属性的变化
       handler(){ //handler:操作，当数据变化时，执行那个函数！
         localStorage.setItem("list", JSON.stringify(this.list));
       },
       immediate:true,//immediate:是否让上面的handler在组件加载完成后立马先执行一下？代表页面一加载，会先执行一次处理程序
     }
 }

（三）侦听器：深度侦听和立即执行

• 如果监听的是复杂数据类型，需要深度监听，需要指定deep为true，需要用到监听的完整的写法。