现在有一个需求，输入姓和名将其拼接为全名，全名要求根据姓名实时变化。
下面是三种实现：
1.插值语法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>姓名案例-插值语法实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
全名：<span>{{firstName}}-{{lastName}}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
firstName: "",
lastName: ""
}
})
</script>
</body>
</html>
插值语法可以实现所需要的功能，但是当需要更加复杂时，插值语法中的表达式就会变得十分冗余。
2.methods实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>姓名案例-methods实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
全名：<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
firstName: "",
lastName: ""
},
methods: {
fullName() {
return this.firstName + "-" + this.lastName
}
}
})
</script>
</body>
</html>
使用methods实现，将插值语法的表达式转化为一个方法，模板中直接对方法进行调用，但是其他地方的数据变化，Vue模板刷新，会重复调用函数，进行计算。
3.计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>姓名案例-计算属性实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
计算属性
1.什么是计算属性？
计算属性就是将Vue中的属性经过计算后得到的新的属性，计算属性会直接出现在vm上
2.计算属性的原理
底层借助了Object.defineProperty中的getter和setter
3.get函数什么时候执行？
a.计算属性被初次调用时
b.计算属性所依赖的属性发生改动时
4.计算属性对比methods的优势
计算属性内部有缓存机制，能够实现复用，效率更高
-->
<body>
<div id="root">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
全名：<span>{{fullName}}</span>
</div>
</body>
<script>
const vm = new Vue({
el: "#root",
data: {
firstName: "",
lastName: ""
},
// //完整写法，setter非必要，如果没有修改的需求，setter可以省略
// computed: {
// fullName: {
// get() {
// return this.firstName + "-" + this.lastName
// },
// set(value) {
// const arr = value.split("-")
// this.firstName = arr[0]
// this.lastName = arr[1]
// }
// }
// }
//省略写法，省略写法地前提是不需要setter
computed: {
fullName() {
return this.firstName + "-" + this.lastName
}
}
})
</script>
</html>
计算属性的缓存机制解决了模板刷新时重复计算的问题，只有当计算属性所依赖的属性发生变化时，才会进行重新的计算。
标签：Vue,firstName,插值,lastName,计算,fullName,属性 From： https://www.cnblogs.com/jmsstudy/p/17506651.html