vue.js watch和深浅拷贝

watch监听

1.普通的watch:
data() {
    return {
        frontPoints: 0    
    }
},
watch: {
    frontPoints(newValue, oldValue) {
        console.log(newValue)
    }
}


2.对象属性的watch
data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}   
    }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}
tips: 只要bet中的属性发生变化（可被监测到的），便会执行handler函数；
如果想监测具体的属性变化，如pokerHistory变化时，才执行handler函数，则可以利用计算属性computed做中间层。


3.对象具体属性的watch
data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}   
    }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

2.如果页面联动有问题的话,就切成的新的model对象或者字段,或者新建一个表单.

  在切换的值的时候,联动回显有问题的话,可以使用disable属性或者v-show来进行控制.

3.对象拷贝

这就是由于对象类型直接赋值，只是将引用指向同一个地址，导致修改了model1会导致model2也被修改


所以在vue中，如果多个组件引用了同一个对象作为数据，那么当其中一个组件改动对象数据时，其他对象的数据也会同步改动。有这种双向绑定的需要的话，那么自然是最好的，但如果不需要这种绑定而希望各组件的对象数据之间相互独立，即是互不关联的对象副本的话，
可以用下面的方法解决, 纯数据对象的话可以用JSON的接口:
    let model2= JSON.parse(JSON.stringify(model1))