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

🚀（一）侦听器watch

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

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

• 快速入门小案例

<template><div><input type="text" v-model="name" /><!-- 我们需要侦听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: {//只是变化第一科的成绩,用于模拟编辑//  操作算改变数据listchange(){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，需要用到监听的完整的写法。