计算属性可以在页面中直接当做data使用。但是data里面不用定义了。

只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数也会发生改变。

但是如果你把conputed这个里面的函数写在计算属性里面，但是他也是可编辑的。下面这种的：

<input type="text"  v-model="FullName"/>

computed: {

    FullName:function(){return  this.firstName+this.secondName}

}

当你编辑的时候，他就会报错。你编辑的时候相当于给他赋值了但是你并没有给他写set方法。

那我们修改一下。

FullName:{
                get:function(){
                     return  this.firstName+this.secondName;
                },
                set:function(a){
                    this.FullName=a;
                    alert(a);
                },
             }

这样的话你编辑的时候还是在编辑的时候有个报错。

那是因为编辑的时候自己给自己赋值了。当我们删除这个set里面的this.FullName=a;就能够正确的弹出输入的值。所以这里面可以先用另一个新的变量还保存我们编辑的值。最后再取出来这个。

修改如下：

FullName:{
                get:function(){
                 return  this.firstName+this.secondName;
                },
                set:function(a){
                    this.name=a;  
                },
             }

mounted() {
            this.a=this.FullName;      //初始化的时候就把fullname获取到，以免没有编辑不执行set函数a就获取fullname
        },

这样获取的 this.a就是我们想要的那个FullName了。相当于我们用了一个别的变量来过渡但是也不形象原来的firstName和secondName

 

看下面这个官网的例子：

我们可以分析到，set相当于是赋值。我们从新在这里赋值了，页面的其他位置的这个值也是相应的变成我们改变之后的。

get 是读取数据。直接调用就会执行get的函数。

 

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {   //获取值
        return this.a + 1
      },
      set: function (v) {  //赋值
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3  //此时触发set函数.this.a变成了3-1=2
vm.a       // => 2 
vm.aDouble // => 4   //this.a改变了。double也随之改变