先看一个简单的例子
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'wade',
lastName: 'dean'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
}
});
</script>
</body>
毫无疑问,效果如下:
我们可以为计算属性中的fullName设置一个对象,对象里面包含get和set方法:
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'wade',
lastName: 'dean'
},
computed: {
fullName: {
get: function () {
console.log('running get function')
return this.firstName + ' ' + this.lastName
},
set: function (value) {
console.log('running set function')
var arr = value.split(' ')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
});
</script>
</body>
程序运行以后控制台打印running get function,说明刚开始调用的是fullName的get方法
我们在控制台手动修改fullName的值:
这时fullName被修改了,于是调用set方法,打印running set function,并且把amanda和zhao分别赋值给firstName和lastName,vue检测到计算fullName所依赖的firstName和lastName被修改了,于是重新触发get方法,打印running get function,并且把计算出来的新的fullName的值渲染到页面