Vue-计算属性的getter和setter

计算属性默认只有 getter,不过在需要时也可以提供一个 setter:

<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>

运行结果截图:
Vue-计算属性的getter和setter_第1张图片
再运行 vm.fullName = ‘mike wang’ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。而这两个值刚好又是fullName的get方法所依赖的值,所以就会引起fullName的重新计算,重新计算之后,fullName随之变化,而页面上显示的{{fullName}}也就跟着变化。

你可能感兴趣的:(Vue)