侦听器，监听数据的变化,基础用法
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。
1、下面代码是watch的一种简单的用法：
2、immediate
使用watch基本用法时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
父组件
子组件
监听的数据后面写成对象形式，包含handler方法和immediate，上面简单的写法我们写的函数其实就是在写这个handler方法、默认省略而已。
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
3、handler方法
Number: {{ myNumber }}
Number:
//handler方法就是你watch中需要具体执行的方法；
4、 deep属性
对于对象或者对象中的属性，我们如何监听？那么就介绍deep属性。它的作用就是解决这个问题的关键。
p>Obj-a: {{ obj.a }}
Obj-a:
deep顾名思义就是深入监听，也就是在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，固然也会损耗性能。
通过watch监听可以获取到父组件传给子组件的数据，但是通过钩子函数是获取不到的，
父组件
子组件
监听router变化的例子
watch:{ //to要去的组件 from要离开的组件
"$route":function(to,from) {
if(to.name =="articleDetail"){
this.isShow = false
}else{
this.isShow = true
}
}
}
watch监听computer
computed: {
f1() {
return this.$store.state.xxxx
},
...mapState({
selectedAddressInfo: "selectedAddressInfo",
}),
},
//监听计算属性
watch: {
f1(curVal, oldVal) {
//这里的curVal就是需要监听的值
},
selectedAddressInfo:{
handler(val) {
console.log("val",val)
this.addressInfo = { ...val };
},
immediate: true
},
}
}
watch监听数组
data() {
return {
winChips: new Array(11).fill(0)
}
},
watch: {
winChips: {
handler(newValue, oldValue) {
for (let i = 0; i < newValue.length; i++) {
if (oldValue[i] != newValue[i]) {
console.log(newValue)
}
}
},
}
}
data () {
return {
demo: [1,2]
}
}, mounted (){
window.myVue = this
},watch: {
demo(val){
console.log(val)
}
},
myVue.demo.push(3) //[1,2,3]
2.watch 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：myVue.demo[1] = 5
当你修改数组的长度时，例如：myVue.demo.length = 2
这时候你可以删除原有键，再 set(myVue.demo,0,8) // [8,2,3]
3.更复杂一点，你想对数组嵌套对象进行监听的时候，这时就需要深度监听
data () {
return {
demo:[
{
name:'张三',
age:18
}, {
name:'李四',
age:20
}
]
}
},
mounted (){
window.myVue = this
},
watch: {
demo: {
handler (val) {
console.log(val)
},
// 这里是关键，代表递归监听 demo 的变化
deep: true
}
},
myVue.demo[0].age = 30 //[{name:'张三',age:30},{name:'李四',age:20}]
4、对象具体属性的watch［活用computed］
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}
}
5、watch和computed各自处理的数据关系场景不同
watch擅长处理的场景：一个数据影响多个数据computed擅长处理的场景：一个数据受多个数据影响
6、method和computed触发条件不同computed只提供了缓存的值，而没有重新计算只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。而methods下的数据，是每次都会进行计算的
8. 特别注意
ES6中推出了箭头函数，上述例子我均未使用箭头函数，如果在handler函数中使用了箭头函数，改变了this指向，就无法获取到Vue实例，则为undifined。所以在这不要用箭头函数，如果用， let that = this.
对于父子组件传参，异步获取数据有时会存在获取不到值的情况。这时候watch就派上用场，适当的时候要配合immediate或者deep属性配合使用。
监听表单对象的坑：
真实姓名
js
//当表单的初始值只要对象form初始值
data(){
return:{
form:{}
}
}
watch: {
//监听身份证
"form.idCard": {
handler(newVal, oldVal) {
// console.log(newVal);
console.log(oldVal);
//大陆身份证号码校验
var isMatch = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
//香港身份证号码校验
//开头一位或两位大写字母，然后接上6-10位数字，最后一位数字或字母校验
var isMatchHongKong = /^[A-Z]{1,2}[0-9]{6,10}[0-9A-Z]$/;
//澳门身份证号码校验
//开头数字1或者5或者7，然后接上6位数字，再接上一位数字或者大写字母校验
var isMatchAoMen = /^[1|5|7][0-9]{6}[0-9A-Z]$/;
//台湾身份证号码校验
//开头一位小写或者大写字母，接上9位数字
var isMatchTaiWan = /^[a-zA-Z][0-9]{9}$/;
if (isMatch.test(newVal)) {
this.isDaluIdCard = true;
} else if (
isMatchHongKong.test(newVal) ||
isMatchAoMen.test(newVal) ||
isMatchTaiWan.test(newVal)
) {
this.isDaluIdCard = false;
this.form.birthDate = null;
//新增的时候，如果这里第一次赋值表单idcard(其实不能说是赋值，应该是定义赋值)，而且用了深度监听，deep: true,
//当输入name,此时name也是第一次赋值表单name了(其实不能说是赋值，应该是定义赋值)，表单属性的定义，会更新到整个表单，导致form.idCard也被监听了，就算form.idCard的值没变，也会指向form.idCard监听的代码，因为一开始form并没有定义idcarda和name,但是如果把deep: true去掉，就不会出现该问题，
//所以表单对象的属性最好还是一开始就定义好，form:{name:"",idCard:"},就不会出现该问题，编辑的时候每个属性都定义赋值了，所以就不会出现这种情况
// this.$set(this.form, "birthDate", null);
} else {
this.isDaluIdCard = true;
}
},
// deep: true,
},
},
v-model也是通过$set(修改值的)