watch ch and cpmpute difference:
1.watch represents a model variables change listener state. watch to monitor things a little more, computed rely on what is written in a function.
2. Special Scene: If the business appeared asynchronous operations (a callback function) is computed this time there is the return value is not in use, but the concept did not watch the return value of which may be called asynchronous code.
Small Case Code:
< Script type = "text / JavaScript" > var VM = new new Vue ({ EL: ' #box ' , Data: { username: '' , MSG: '' , }, // computed parity synchronization verification information is completed do some checking on the legality of the local; most crucial test whether the user name duplication // asynchronous operation ajax request to check whether the user name legally Watch: { username: function () { // detect the user name iF ( ! the this .username ) { the thisa .msg = '' ; return ; // only to terminate the code execution } IF ( the this .username.length < . 3 ) { the this a .msg = ' * is not less than the length of the user name 3 ' ; return ; // only for termination code execution } IF ( the this .username.length > 10 ) { the this a .msg = ' username is not greater than 10 ' ; return ; // only for code execution termination } // send a request to operate ajax var _That = the this ; // embodiment a $ .ajax ({ URL: ' ./check.json ' , type: ' the GET ' , dataType: ' JSON ' , // Second way: use the arrow function es5 diet Success: (JSON) => { the console.log (JSON); IF (! JSON [ ' Status ' ]) { the console.log ( the this ); // Ajax objects the this a .msg = ' username is already registered, can not be used ' ; } // return JSON [ 'Status']; // can return out } }); return ' information legal ' ; } } }) </ Script >
In case, if computed, you can not obtain the state after ajax validation, in the asynchronous ajax can not return status. Thereby using watch.
watch the depth of monitoring:
Watch: {
// into an object handler attribute value is fixed wording
Lists: {
handler: function (newVal, oldVal) {
the console.log ( 'Lists Change ....')
},
Deep: to true,
// representatives open the deep monitoring. Any meaning attribute data is changed, the monitoring function need to perform
immediate: true,
// immediate if set to true, the code representative of a load immediately perform monitoring functions.
}
}
Small case:
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"></>Li> </A</Unfinished 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>