computed计算属性
<body>
<div id="app">
<div>{{myName}}</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: '彭于晏',
lastName: '胡歌'
},
computed: {
myName: {
set: function (newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
</body>
显示内容为：
计算属性的set方法：
计算属性有的get方法
显示的就是
computed与method的区别
重要的注意点 computed计算属性有缓存作用，不会反复调用，只有在数据发生变化的时候才会再次调用，比起一般的函数方法，提高了性能优化。method只要调用了就会执行
总结
vue的computed计算属性 有getter 和 setter 两个方法 但是一般 没有set方法 ，只读属性；还有一个重要的注意点 计算属性有缓存作用，不会反复调用，只有在数据发生变化的时候才会再次调用，比起一般的函数方法，提高了性能优化。