<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>watch实现名字案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
commputed 与watch 之间的区别
1.computed能完成的功能 watch 都可以完成
2.watch能完成的功能,computed 不一定能完成，例如 watch 可以进行一步操作
两个重要的小原则
1.所被vue管理的函数，做好写成普通函数，这样this的指向才是vm 或者组件实例
2.所有不别vue管理的函数（定时器回调，ajax的回调函数 promise的回调函数）最好写成箭头函数这样
this的指向才是vm 或者组件实例
-->
<div id="root">
<div>欢迎来带{{name}}学习</div>
姓：<input type="text" v-model="firstName" /><br />
名：<input type="text" v-model="lastName" /><br />
全名：<span>{{fullName}}</span><br />
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
firstName: "张",
lastName: "三",
fullName: "张-三",
},
watch: {
firstName: function (val) {
setTimeout(() => {
this.fullName = val + "-" + this.lastName;
}, 1000);
},
lastName: function (val) {
this.fullName = this.firstName + "-" + val;
},
},
});
</script>
</html>