计算属性
1.在computed属性对象中定义计算属性的方法，在页面上使用{{方法名}}来显示计算结果
2.通过getter/setter实现对属性数据的显示和监视
3.计算属性存在缓存，多次读取只执行一次getter
侦听属性
1.通过vm对象的$watch()或watch配置来监视指定的属性
2.当属性变化时，回调函数自动调用，在函数内部进行计算
计算属性与方法、侦听属性之间的比较
计算属性是基于它们依赖进行缓存，只有相关依赖发生改变时才会重新求值，调用方法是每当重发重新渲染时，总会调用执行函数。而侦听属性可以实现相应数据变动，但是它对需要侦听的属性编写重复的代码。但是watch在异步操作数据变化时很合适。
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="demo"> 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 名: <input type="text" placeholder="Last Name" v-model="lastName"><br> <!--fullName1是根据fistName和lastName计算产生--> 姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br> 姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br> 姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br> <p>{{fullName1}}</p> <p>{{getFullName()}}</p> </div> <!--<script type="text/javascript" src="../js/vue.js"></script>--> <script type="text/javascript"> const vm = new Vue({ el: '#demo', data: { firstName: 'A', lastName: 'B', fullName2: 'A-B' }, methods: { getFullName: function () { return this.firstName + '-' + this.lastName } }, // 计算属性配置: 值为对象 computed: { fullName1() { // 属性的get() // console.log('fullName1()', this) return this.firstName + '-' + this.lastName }, fullName3: { // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值 get() { console.log('fullName3 get()') return this.firstName + '-' + this.lastName }, // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值 set(value) {// fullName3的最新value值 A-B23 console.log('fullName3 set()', value) // 更新firstName和lastName const names = value.split('-') this.firstName = names[0] this.lastName = names[1] }, }, }, watch: { // 配置监视firstName firstName: function (value) { // 相当于属性的set console.log('watch firstName', value) // 更新fullName2 this.fullName2 = value + '-' + this.lastName }, lastName: function (value) { this.fullName2 = this.firstName + '-' + value; } } }) </script> </body> </html>
运行结果中fullName1和fullName2数据传输是“单向”的（输入firstname和lastname时fullname会相应变化，但是反过来就不行），fullName3实现数据传输双向的，当输入fullname时，firstname和lastname会相应的改变。get为取值，set为赋值