<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_watch实现</title>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstName" />
<br /><br />
名：<input type="text" v-model="lastName" />
<br /><br />
姓名：<span>{
{
fullName}}</span>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.procuctionTip = false;
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
fullName: '张-三'
},
computed: {
// fullName(){
// return this.firstName + '-' + this.lastName;
// }
},
watch: {
firstName(val) {
setTimeout(() => {
this.fullName = val + '-' + this.lastName;
}, 1000);
},
lastName(val) {
this.fullName = this.firstName + '-' + val;
}
}
})
</script>
</body>
</html>
知识点
1：侦听属性watch可以开启异步任务，但计算属性就不能开启异步去维护数据。
2：定时器的回调是js引擎帮忙调用的，如果写成普通函数形式，里面的this,就是指window。
3：watch和computed之间的区别：
（1）：computed可以完成的功能，watch也能实现。
（2）：watch能完成的功能，computed不一定能实现，比如watch可以进行异步操作。
4：两个重要的小原则：
（1）：所被vue管理的函数最好写成普通函数。
（2）：所有不被vue管理的函数（定时器的回调函数，ajax的回调等），最好写成箭头函数。这样this的指向才是vm或组件实例。
