Vue计算属性

计算属性

要使用的属性不存在，通过已有的属性技术获得，计算的属性会直接出现在vm上面直接使用就好了，当计算属性需要修改的时候一定要使用set函数。 计算属性：一个全新的配置项:computed

//计算属性需要一个全新的配置项
computed:{//这个配置项就是专门为配置属性来设置的。
  fullName:{
    //当有人读取fullName的时候get就会被调用，且返回值就作为fullName的值
    //get什么时机调用，
    // 1.初次读取fullName的时候
    // 2.所依赖的数据发生变化的时候
    get(){   //get函数中的this就是vm本身。
      console.log('get被调用了')
      return this.firstName+'-'+this.lastName
    },
    //当fullName被修改的时候就会被调用(这里没有用到这段代码。)
    set(value){    //这里的value就是我们计算属性的值。这里指的是fullName.
      console.log("set",value)
      console.log("set被调用了")
      const  arr=value.split('-')//将value的值分为一个数组。
      this.firstName=arr[0]
      this.lastName=arr[1]
    }
  }
}

上面的代码中fullName是我们计算得到的属性值，这个属性有两个函数get和set函数（这两个函数的中的this就是vm本身）

• 当计算属性fullName被读取的时候get函数就会被调用 get函数调用的时机：
  1.初次读取fullName的时候
  2.所依赖的数据发生变化的时候。
• 当计算属性fullName的值发生改变的话set函数就会被调用，set函数的参数就是计算属性的值。

计算属性的使用方法和Vue中data里面的数据一样，直接使用插值语法就可以使用。

计算属性的简写：

（确定只读不改才能使用简便方法书写）

fullName(){
    console.log('get被调用了')
       return this.firstName+'-'+this.lastName
     },

我对set函数什么时候调用还是有一定疑问的，欢迎有想法的小伙伴给点意见。