举个例子

<body>
    <div id="app">{{fullname}}</div>
    
    <script type="text/javascript">
        var vm = new Vue({
        el:"#app",
        data:{
            firstname:"jack",
            lastname:"lee",
            },
        computed:{	        //计算属性，数据不变仅计算一次
            fullname:function(){
                return this.firstname + " " + this.lastname
            }
        })
    </script>
</body>

get

这里get的作用就是，当 fullname 对象被调用时，触发 get 函数

computed:{				//计算属性
        fullname:{
            get:function(){
                return this.firstname + " " + this.lastname
            }
        }
}

set

当对象被设置或修改时触发

computed:{				//计算属性
        fullname:{
            get:function(){
                return this.firstname + " " + this.lastname
            },
            set:function(value){
                return console.log(value)
            }
        }
}

当我们对对象fullname进行修改时

控制台输入修改时，打印出参数 value

设计一个修改后渲染到视图的set函数：

set:function(value){
    var arr = value.split(" ");
    this.firstname=arr[0];
    this.lastname=arr[1];
}

以上程序意为，将输出参数通过split方法打散成数组，再将数组赋值给本实例的firstname和lastname

那么为什么会重新渲染呢？

这里引申出 get 函数的工作原理：当 get 函数依附的值 （this.firstname） 变化时重新渲染。

此外，set方法还可以直接添加对象的属性：

观看下面的代码

<div id="app">
    <div v-for= "(item,key) of userinfo">
        {{item}}---{{key}}
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            userinfo:{
                    name:"dell",
                    age:28,
                    gender:"male"
		    }
	}
    })
</script>

效果如下：