>[success] # 巧妙的利用watch ~~~ 1.需求场景当我们触发保存和修改事件的时候。往往会绑定同一个方法, 但通过方法中传递的参数不同,来触发同一个事件的不同逻辑分支 2.根据上面的场景可以反推,整个功能变化的是传递的参数,因此利用 'watch' 可以监听 属性变化的这点,反向来触发我们的方法 ~~~ >[danger] ##### 通过时钟案例说明 ~~~ <template> <div> <button @click="start = !start">{{ start ? "停止" : "开始" }}</button> </div> </template> <script> import moment from "moment"; export default { data: function() { console.log("data"); this.moment = moment; this.log = window.console.log; return { now: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), start: false }; }, watch: { start() { this.startClock(); } }, beforeDestroy() { console.log("beforeDestroy"); clearInterval(this.clockInterval); }, methods: { startClock() { clearInterval(this.clockInterval); if (this.start) { this.clockInterval = setInterval(() => { this.now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); }, 1000); } } } }; </script> ~~~