vue计算属性之watch和computed的区别
1.computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="fn">展示时间</button>
<hr/>
<p v-if="showData">{{now}} </p>
<!-- <p v-if="showData">{{getNow()}} </p> -->
</div>
<script>
new Vue({
el: '#app',
data: {
showData: false
},
computed: {
now() {
return Date.now()
}
},
methods: {
fn() {
console.log(Date.now());
this.showData = !this.showData
},
getNow() {
return Date.now()
}
}
})
</script>
</body>
</html>
在页面获取的时间戳一直不变,打印的时间戳会变==》computed具有缓存作用
2.watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="../js/vue.js"></script> -->
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
查询:
<input type="text" v-model="keywork">
<ul>
<li v-for="item of showUsers" ::key="item.id">
<input type="checkbox" v-model="item.checked" /> 编号:{{item.id}}-姓名:{{item.username}}-性别:{{item.gender}}
</li>
</ul>
</div>
<script>
let yUsers = [{
id: 1,
username: '张三',
gender: "男",
checked: false
}, {
id: 2,
username: '李四',
gender: "男",
checked: false
}, {
id: 3,
username: '王五',
gender: "男",
checked: false
}, {
id: 4,
username: '张二麻子',
gender: "男",
checked: false
}, {
id: 5,
username: '小 赵',
gender: "男",
checked: false
}, {
id: 6,
username: '小 钱',
gender: "女",
checked: false
}, {
id: 7,
username: '小 李',
gender: "女",
checked: false
}];
let app = new Vue({
el: '#app',
data: {
yUsers,//原始数据
showUsers: [],//展示数据
keywork: ''//搜索关键字
},
watch: { //watch支持异步(setTimeout定时器)操作
keywork() {
setTimeout(() => {
if (this.keywork !== '') {
//如果这里的关键字不为空
this.showUsers = this.yUsers.filter(xcuser => {
// 对原始数据进行过滤 并赋值给展示数据
return xcuser.username.replace(/\s/g, "").includes(this.keywork)
//返回true/false 对象的用户名字段 进行去除所有空格操作 查询是否有关键字
});
} else {
this.showUsers = [];
//否则展示空
}
}, 1000)
}
},
})
</script>
</body>
</html>
3. computed和watch的区别:
1. computed是依赖的变化才去计算 watch主动处理数据
2. computed没法处理异步数据 watch可以直接处理异步
3. wacth: 异步的派生数据
4. watch适合处理: 一个数据影响多个数据 computed适合处理: 一个数据受多个数据影响 / 多个数据影响一个数据
各自使用的场景
1.watch 更适合处理数据独立的场景 主动监听
2. 数据相互独立的场景, 也可以(get / set)