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>
原文地址：https://www.cnblogs.com/hudunyu/p/11428719.html
时间： 2024-11-08 22:30:07