[笔记][Vue.js]打开Vue.js世界的大门(6)-让watch来当你的眼睛！

HI！大家好啊！紧接着computed之后，今天再来学习新的Vue.js的属性watch吧！

watch

这是什么？

如果我们要在一个表单上的值发生改变的时候，去执行某些事件，例如判断输入资料的格式正不正确，第一个想到的应该是以下的做法：
HTML

<div id="nameVue">    <input id="name" v-model="name" @change="checkName" />  <span style="color:red">{{alertMessage}}</sapn></div>

JavaScript

//资料let nameData = {    name : 'Tom Cruise',    alertMessage : '',}//方法let nameMethod = {    //检查姓名格式    checkName : () => {        let newName = document.getElementById('name').value        if(newName.trim().indexOf(' ') == -1){            nameData.alertMessage = '请输入正确的姓名格式'        }        else            nameData.alertMessage = ''    }}let nameVue = new Vue({    el:'#nameVue',    data:nameData,    methods:nameMethod,})

我们可以透过v-on来处理onchange事件，达到我们要的成果：

但是如果我们使用onchange事件的话，就必须在移除焦点时才会触发相对应的事件，那有办法在值改变的时候就马上知道吗？

欸嘿嘿！有的！接着让我们把watch给请出来吧！

watch的基本用法

基本上watch能够在某个监听值发生改变的时候进行异步的响应，有点类似JavaScript上的监听器addEventListener()，不过他是对物件内的值做监听，来看看使用方法吧！
HTML

<div id="nameVue">    <input id="name" v-model="name"/>    <span style="color:red">{{alertMessage}}</sapn></div>

JavaScript

//资料let nameData = {    name : 'Tom Cruise',    alertMessage : '',}//方法let nameMethod = {    //检查姓名格式    checkName : (newName,oldName) => {        if(newName.trim().indexOf(' ') == -1)            nameData.alertMessage = '请输入正确的姓名格式'        else            nameData.alertMessage = ''    }}let nameVue = new Vue({    el:'#nameVue',    data:nameData,    watch:{        /*对name值进行监听，只要name改变了，就会触发程式        newVal为更改后的值，oldVal更改前的值*/        name: (newVal,oldVal) => {            //呼叫nameMethod的function            nameMethod.checkName(newVal)        }    }})

上方例子中，我们原本绑定在input的@change拿掉，并在Vue的物件中增加了一个新的物件属性watch，watch中的name属性即是要进行监听的属性，并在属性值改变时执行function，另外可以发现，在执行的function中有两个参数newVal和oldVal，这两个参数是Vue帮忙处理的，第一个参数传入更改过后的值，第二个为更改前的值，经过以上方式，即使在输入中也可以捕捉每一次和前一次变动的内容，以及变动时要使用的函式，便不需要在离开焦点才能执行function看到结果，如下：

补充说明(感谢fysh711426大大补充)

watch的运作主要是因为v-model帮我们做了两件事情

参考文章：https://blog.csdn.net/u010320804/article/details/79486034
以上补充也会同步更新到[笔记][Vue.js]打开Vue.js世界的大门(4)-让双向绑定抓住你的资料

而watch的原理是因为v-model帮我们做了v-on:input的关係，这会导致我们每次的更新资料的时候，都重新把新值透过存取器的setter写到绑定的属性中，主角watch就会在这个时候藉由setter触发，执行watch中绑定的事件，执行完后后再用getter把值重新绑定到画面！

参考文章：https://segmentfault.com/a/1190000010014281

话说，官方在说明watch的例子时真的很简单就带过了，感觉对他有点偏心XD，不过以上表单验证的例子也是我目前想的到watch在实务上可以用到的地方，其他可能要等到某天预到什么需求，才会想起「对了！我可以用watch处理！」这样子吧XD，如果有大大在实务上watch应用的地方也欢迎留言分享！

最后这篇短短的watch属性应该不难懂（结果我也偏心给他最少的章节XD）！如果文章中有任何解释错误、讲解不清楚的地方，在请各位大大留言告诉我，我会尽快修改文章内容的！谢谢大家的观赏