vue-- watch和computed

watch可以监听自身data属性，父级props属性，computed计算属性。

  computed: {
     // isShow() { 
     //    return this.isSendFlag
     // }
  },
  watch: {
     isSendFlag(newV,oldV) {
        // do something
        console.log(newV,oldV)
     }
  },
  
props: ["isHasPhone", "isSendFlag", "changeSendFlag"],
watch: {
    isSendFlag(newV, oldV) {
      newV && this.codeCountDown();
    }
},

2020.09.05

watch 用法

//父组件
<SaveButton :styleObject="{opacity: !checked?'0.5':'1'}" @savesubmit="handleSaveSubmit"/>
data() {
    return {
      checked: false,//false 未通过 true 通过
    }
 },

//子组件
props: {	
    saveBtnStyle: {
        type: Object,
        default: {
            width: '240px',
            height: '44px',
            background: 'linear-gradient(296deg, #3F98FF 0%, #3FBAFF 100%)',
            borderRadius: '22px',
            margin: '0 auto'
        }
    },
    styleObject:{
        type: Object,
        default: {},
    },
},
data() {
    return {
        customStyle:{
            ...this.saveBtnStyle,
            ...this.styleObject
        }
    }
},
watch: {
    "styleObject":function (newValue) {
        this.customStyle = {
            ...this.saveBtnStyle,
            ...newValue
        }
    }
},