侦听器，监听数据的变化,基础用法
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。
1、下面代码是watch的一种简单的用法：
<div id="app">
<input type="text" v-model="firstName" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
firstName:"张",
lastName:"王",
timer:0
},
watch:{
firstName：(newVal,oldVal){//firstName即为你想监听的数据的名称，要监听谁函数名就用谁的 如监听 v-model的firstName
//newVal：表示改变后的值，即第一个形参，不要调换位置
//oldVal：表示改变前的值，
console.log({newVal,oldVal});//{newVal: "陈", oldVal: "张"}
}
//直接写一个监听处理函数，当每次监听到cityName值发生改变时，执行函数。
//也可以在//所监听的数据后面直接加字符串形式的方法名：
firstName: 'nameChange'
},
methods:{
nameChange(){
}
}
})
vm.firstName = "陈"；//改变监听的值
</script>
2、immediate
使用watch基本用法时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
父组件
<div>
<fincat :tableData="tableData" :detailData="detailData" :drugType="drugType"
:cause="cause" :recipeDrugData="recipeDrugData"
:openningDate="openningDate"
:packageData="packageData" :allDosage="allDosage"
:loading.sync="loading"
>
</fincat>
<div>
<script>
export default{
data(){
return{
detailData:["11"]
}
}
}
</script>
子组件
<script>
export default {
name: "financialDetails",
props :{
detailData: {
required: true, // 设置required就不要设置default
type: Array,
default: function() {
// Array和Object的默认值的设置都是function
return [];
},
}
data(){
return{
datetable:"",
}
},
watch: {
detailData: {
handler: function(new,old) {
},
immediate: true
},
}
};
</script>
监听的数据后面写成对象形式，包含handler方法和immediate，上面简单的写法我们写的函数其实就是在写这个handler方法、默认省略而已。
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
3、handler方法
<div id="app">
<div>
<p>Number: {{ myNumber }}</p>
<p>Number: <input type="text" v-model.number="myNumber"></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
myNumber: 'Dawei'
},
watch: {
myNumber: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
//immediate为true时则立即触发回调函数；如果为false，则和上面的例子一样，不会立即执行回调。
immediate: true
}
}
})
</script>
//handler方法就是你watch中需要具体执行的方法；
4、 deep属性
对于对象或者对象中的属性，我们如何监听？那么就介绍deep属性。它的作用就是解决这个问题的关键。
<div id="app">
<div>
p>Obj-a: {{ obj.a }}</p>
<p>Obj-a: <input type="text" v-model="obj.a"></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
obj: {
a: ''
}
},
//写法一
watch: {
obj': {
handler(newVal, oldVal) {
console.log('newVal-obj.a', obj.a);
console.log('oldVal-obj.b', obj.a);
},
deep: true
}
}
//写法二
watch: {
'obj.a': { // <--重点看这里
handler(newVal, oldVal) {
console.log('newVal-obj.a', obj.a);
console.log('oldVal-obj.b', obj.a);
},
deep: true
}
}
})
</script>
deep顾名思义就是深入监听，也就是在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，固然也会损耗性能。
通过watch监听可以获取到父组件传给子组件的数据，但是通过钩子函数是获取不到的，
父组件
<div>
<fincat :detailData="detailData"
:loading.sync="loading"
>
</fincat>
<div>
<script>
export default{
data(){
return{
detailData:["11"],
loading:" "
}
}
}
</script>
子组件
<script>
export default {
name: "financialDetails",
props :{
detailData: {
required: true, // 设置required就不要设置default
type: Array,
default: function() {
// Array和Object的默认值的设置都是function
return [];
},
loading: {
required: true, // 设置required就不要设置default
type: Boolean
}
}
data(){
return{
datetable:"",
listLoading :""
}
},
watch: {
//监听夫传子过来的loading状态，：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
//这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。，如果此时直接用loading用于组件的v-model的话
//会导致子组件改变父组件的数据，导致报错'Avoid mutating a prop directly since the value will be overwritten whenever'，
//所以用watch监听和computer
loading: {//监听夫传子过来的loading状态
handler: function(val) {
this.listLoading = val;
},
deep: true
},
detailData: (neWDetailData,oldval) => {//neWDetailData改变后的值，即第一个形参，不要调换位置改变前的值
this.datetable = neWDetailData;
}
},
//但是通过钩子函数是获取不到的，父组件传给子组件的数据的
mounted() {
console.log(this.detailData);
}
};
</script>
监听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属性配合使用。
监听表单对象的坑：
<van-form @submit="addOrEdit">
<div class="public_main bgw">
<div class="flex bb1 mr15 ml15">
<div class="w20 tal aic flex fwb f13">真实姓名</div>
<van-field
v-model="form.name"
class="flex1 pt14 pb14"
:rules="[{ required: true, message: '请输入就诊人姓名' }]"
placeholder="请输入就诊人姓名"
/>
</div>
<div class="flex bb1 mr15 ml15">
<div class="w20 tal aic flex fwb f13">身份证号</div>
<van-field
v-model="form.idCard"
class="flex1 pt14 pb14"
@input="calculateBirthdate"
placeholder="请输入身份证号码"
:rules="[
{ required: true, message: '请输入身份证号码' },
{
validator: util.validate.idCardAll,
message: '请输入正确的身份证号码',
trigger: 'onChange',
},
]"
/>
</div>
</div>
</van-form>
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(修改值的)
