Vue中的计算属性使用，动态赋值property

在使用Vue时候，可能会发现一个问题：我们不想在data中给某个property赋上固定的默认值，而是想赋值一些经过计算的property值，甚至使用到了其他property，第一时间可能会想到这么写，如下
错误示例：

selectPhotoLabel:this.PhotoLabels[0].Text?this.PhotoLabels[0].Text:"Complete"//照片Lable

可以看到我们在data中赋值selectPhotoLabel时，使用到了PhotoLabels集合进行条件表达式计算，但是这里忽略了一个问题，我们是无法在声明property时用this.property的方式直接将其他property赋值过来的，所以使用这段代码selectPhotoLabel的值始终为undefined。

那怎么解决呢？

- 使用计算属性

说起计算属性，最先想到的一定是computed和watch，这也是Vue中最常用的两种计算属性，二者原则上都能实现动态赋值的功能，但也存在一些不同点，接下来我们看看这两个计算属性的区别。

computed：

1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
2.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

watch:

1.watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象；
2.watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据。

根据业务逻辑需求和二者的特点，我们此处应该使用computed,代码如下：

computed: {
    hasProduct: function () {
      return (
        this.tempProLine.Product != null &&
        this.tempProLine.Product.Id != null &&
        this.tempProLine.Product.Id != undefined &&
        this.tempProLine.Product.Id != ""
      );
    },
    //照片Lable
    selectPhotoLabel:{
      get(){
      return this.PhotoLabels[0]?this.PhotoLabels[0].Text:"Complete";
      },
      set(val){}
    }
  },

computed中的针对属性的赋值方法又会有两种写法，第一种是常规方法，直接return值便可以，第二种则是使用get，set方法，在get中为此属性赋值，在set中定义值改变时需要做的操作。set中的参数val就是改变后的值。

这样我们便实现了给property赋值时需要调用其他property的功能，完美解决了问题。