[30天 Vue学好学满 DAY7] 监听器(Watch)

Watch 监听器

具比较传(old & new)
无回传值(return)
监听变数发生异动-> 触发
监听变数无实际异动(true -> true)，不进行触发

Key

监听目标

Value

callback 函数

实做

HTML

<button @click="addValue">add</button>
<h3>{{ count }}</h3>
<h3>{{ showValue }}</h3>

定义变数

count: 0,
equalsFive: false,
showValue: "",

定义方法: 按下按钮 count + 1

addValue: function () {
    this.count += 1;
},

监听器

watch: {
    // 监听count 
    count: function (val) {
      console.log(val); // 预设 new value
      this.equalsFive = (val == 5);
    },
    // equalsFive
    equalsFive: function (newVal, oldValue) {
      console.log('old value : ' + oldValue);
      console.log('new value : ' + newVal);
      this.showValue = "It's Five Now";
    },
},

执行测试:初始画面，不进行任何触发

按4次按钮:count触发4次，equalsFive未进行触发

按第5次按钮:count & equalsFive 进行触发

物件形式 handler、deep

handler:欲进行的处理
deep:深度观察，call by reference。

调整 count HTML

<h3>{{ obj.count }}</h3>

调整变数 count

obj:{
    count: 0,
},

监听器

obj: function (val) {
    console.log(val)
      this.equalsFive = (val.count == 5);
},

进行测试:无监听效果

将监听器加上handler并设定deep

obj: {
    handler: function (val) {
        console.log(val);
        this.equalsFive = val.count == 5;
    },
    deep: true

进行测试:触发成功

immediate

初始化即触发handler

调整监听器

obj: {
    handler: function (val) {
        console.log('immediate!');
        this.equalsFive = val.count == 5;
    },
    deep: true,
    immediate: true
},

进行测试:初始即触发

大致跟昨天的computed做比较

computed 不论来源是否有实际异动皆触发
watch 监听值实际异动则触发

computed 依赖值 -> 一个结果 (无法异动无关变数)
watch 监听值 -> 程序 (可对其他参数、方法进行操作)

computed 将结果暂存

watch 可取旧值

有错误请不吝指教!

参考资料
https://cn.vuejs.org/v2/guide/computed.html
https://medium.com/unalai
https://cythilya.github.io/2017/04/15/vue-watch/
https://ithelp.ithome.com.tw/articles/10204091
https://medium.com/@jedy05097952/vue-%E9%82%84%E6%98%AF%E4%B8%8D%E6%87%82-computed-83a200571e1b

感谢各路大神