Vue-计算属性的getter和setter

时间 2020-08-10 标签 vue 计算属性 getter setter

计算属性默认只有 getter，不过在须要时也能够提供一个 setter：javascript

<body>
    <div id="root">{{fullName}}</div>
    <script> var vm = new Vue({ el:"#root", data:{ firstName:"Z", lastName:"Ryan" }, computed: { fullName:{ get:function(){ return this.firstName + ' ' + this.lastName }, set:function(value){ console.log(value) var arr = value.split(' ') this.firstName = arr[0] this.lastName = arr[1] } } }, }) </script>
</body>

运行结果截图：

再运行 vm.fullName = ‘mike wang’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。而这两个值恰好又是fullName的get方法所依赖的值，因此就会引发fullName的从新计算，从新计算以后，fullName随之变化，而页面上显示的{{fullName}}也就跟着变化。html