watch ch 和cpmpute的区别：
1.watch 表示监听某个模型变量的状态变化。watch监视的东西多一些，computed所依赖的东西都写在一个函数里。
2.特殊场景：如果业务出现了异步操作（回调函数）则这个时候computed是存在返回值，不能在使用，但是watch里面的没有返回值的概念，可以进行异步代码的调用。
小案例代码：
<script type="text/javascript"> var vm = new Vue({ el: '#box', data: { username: '', msg: '', }, // computed 完成信息的校验 同步校验，在本地做一些合法性的校验； 最关键检验用户名是否重复 // 异步操作 ajax请求 校验用户名是否合法 watch: { username: function () { // 检测用户名 if( !this.username ) { this.msg = ''; return; // 只是为了终止代码执行 } if( this.username.length < 3 ){ this.msg = '* 用户名的长度不能小于3个'; return; // 只是为了终止代码执行 } if( this.username.length > 10 ){ this.msg = '用户名的长度不能大于 10个'; return; // 只是为了终止代码执行 } // 发送ajax请求进行操作 var _That = this; // 方式一 $.ajax({ url: './check.json', type: 'GET', dataType: 'json', // 方式二： 使用箭头函数 es5习惯 success: (json) => { console.log(json); if( !json['status'] ){ console.log(this); // ajax对象 this.msg = '用户名已经被注册，不能在使用了'; } // return json['status']; // 是否可以return出去 } }); return '信息合法'; } } }) </script>
在案例中，如果使用computed，无法获取ajax验证之后的状态，在异步ajax中无法return 状态。从而使用watch。
watch的深度监控：
watch: {
// 改成了一个对象，属性值 handler 固定写法
lists: {
handler: function (newVal, oldVal) {
console.log('lists change....')
},
deep: true,
// 代表开启深度监控。意思数据的任何一个属性发生变化，监视函数需要执行
immediate: true,
// 如果immediate 设置为true, 代表代码一加载 立马执行监视函数。
}
}
小案例：
http://todomvc.com/
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1. 引入 bootstrap--> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script> <style> .del{ text-decoration: line-through; color: #ccc; } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> VUEJS_TODO </a> </div> </div> </nav> <div class="container" id="app"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-success"> <div class="panel-heading"> <h3>-_-, 还有 {{onData}} 件事未完成</h3> <input type="text" class="form-control" v-model="title" @change="addItem"> </div> <div class="panel-body"> <ul class="list-group"> <li @dblclick="editItem(todo)" style="cursor:pointer;" class="list-group-item" :class="{del: todo.isComplice}" v-for="todo in newData" > <div v-show="curItem !== todo"> <input type="checkbox" v-model="todo.isComplice"> {{ todo.title }} <button type="button" @click="removeItem(todo)" class="btn btn-danger btn-xs pull-right">× </button> </div> <input type="text" @blur="cancel" @change.13="cancel" v-show="curItem === todo" class="form-control" v-model="todo.title" v-focus="curItem === todo" > </li> </ul> </div> <div class="panel-footer"> <ul class="nav nav-pills"> <li :class="{active:hash==='all'}"><a href="#/all">全部</a></li> <li :class="{active:hash==='finish'}"><a href="#/finish">已完成</a></li> <li :class="{active:hash==='unfinish'}"><a href="#/unfinish">未完成</a></li> </ul> </div> </div> </div> </div> </div> </body> <!--2. vuejs--> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script> new Vue({ el:'#app', directives: { focus: function (el, bindings) { if (bindings.value) { el.focus(); } } }, data:{ curItem:'', hash:'', title:'', isComplice:'', title:'', todos:[ { title:'吃饭', isComplice:true, }, { title:'吃饭', isComplice:false, }, { title:'吃饭', isComplice:false, } ]}, methods:{ addItem:function () { this.todos.push({title:this.title,isComplice:false}); this.title=''; }, removeItem:function (eles) { this.todos = this.todos.filter(function (ele) { return ele !== eles; }) }, editItem:function (elee) { this.curItem=elee; }, cancel: function () { this.curItem = '';// 清空当前项 } }, computed:{ onData:function () { return this.newData.filter(function (ele) { return !ele.isComplice; }).length; }, newData:function () { if(this.hash=='finish'){ return this.todos.filter(function (ele) { return ele.isComplice; }) } if(this.hash=='unfinish'){ return this.todos.filter(function (ele) { return !ele.isComplice; }) } return this.todos; } }, watch:{ todos:{ handler:function (newVal,oldVal) { localStorage.setItem('toDoData',JSON.stringify(this.todos)); }, deep:true, }, }, created:function () { this.todos=JSON.parse(localStorage.getItem('toDoData'))||this.todos; window.addEventListener('hashchange', ()=> { this.hash= location.hash.slice(2); },false); }, }) </script> </html>