计算属性（computed） vs 监视属性（watch）
1) computed 能完成的功能，watch 都可以完成
2) watch 能完成的功能，computed 不一定能完成。例如 watch 可以进行异步操作。
两个重要的原则
1) 所有被 Vue 管理的函数，最好写成通函数，这样 this 的指向才是 vm 或 组件实例对象
2) 所有不被 Vue 所管理的函数 (定时器的回调函数、ajax 的回调函数等、Promise 的回调函数)，最好写成箭头函数，这样 this 的指向才是 vm 或 组件实例对象
分别使用计算属性和监视属性，实现姓名案例
1.使用计算属性实现姓名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性实现姓名案例</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/><br/>
<!--使用计算属性实现-->
姓名全称：<span>{{fullName}}</span><br/>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data(){
return{
firstname:"任",
lastname:"先生"
}
},
// 计算属性：要用的属性不存在，需要通过已有属性计算得来
computed:{
// 计算属性的简写写法(默认没有set方法)
fullName(){
console.log("@---正在调用get()方法...")
return this.firstname + "-" + this.lastname;
}
}
})
</script>
</body>
</html>
2.使用监视属性实现姓名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视属性实现姓名案例</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/><br/>
<!--使用计算属性实现-->
姓名全称：<span>{{fullname2}}</span><br/>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data(){
return{
firstname:"任",
lastname:"先生",
fullname2:"任-先生"
}
},
// 监视属性：当被监视的属性发生变化时，handle()回调函数自动调用
watch:{
// 监视属性的简写写法（除了handler之外，没有其他的配置项了）
firstname(newValue,oldValue){
this.fullname2 = newValue + "-" + this.lastname
},
lastname(newValue,oldValue){
this.fullname2 = this.firstname + "-" + newValue
}
}
})
</script>
</body>
</html>