Vue常用进阶知识点

1，处理vue实例中的动态数据

我们有时候会在data选项中定义在实例内部需要用到的属性，像下面这样：

data () {
  return {
    // 定义实例中需要的属性
  }
}

可是这个属性很可能是动态的，并且还需要我们对数据做一些初始化，当有这样的需求时，我们应该怎么做呢？请看下面的例子：

 export default {
    data() {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse()
            console.log(queryParam)
            return queryParam.id
          })()
        }
      }
    },

在上面这个例子中，我们只是需要一个id，而这个id又是从url中得来的，url中很可能有包括id以外的其他参数，但我们只要一个id值，所以我们需要对获取到的url参数做一些处理，并返回这个id，urlParse()就是处理url参数的方法，返回我们需要的id，因此 return queryParam.id就是给我们data中的id赋值，这里id:后面跟了一个立即执行函数，函数内部使用了一个箭头函数，参数为空。

Object.assign()的使用方式

用两个对象的属性创建一个新的对象，给对象扩展属性的方法，就是添加新的响应式属性，
Object.assign({}, obj1, obj2)，支持三个参数，三个参数都是对象，在我们下面的例中，第一个参数是最终返回的结果，第二个参数是实例中已经有的对象，第三个参数就是从API接口获取到的对象，我们用参数中后面两个有属性的对象，合并成一个对象，放在第一个{}对象中，然后返回这个合并后的对象。
这种方式就是给已有的对象添加新属性：

<script type="text/ecmascript-6">
  import { urlParse } from './common/js/util'

  const ERR_OK = 0
  export default {
    data() {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse()
            console.log(queryParam)
            return queryParam.id
          })()
        }
      }
    },
    created() {
      this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
        response = response.body
        if (response.errno === ERR_OK) {
          // this.seller = response.data
          // 如果像上面这种直接赋值，this.seller.id中的id是赋值不进去的，因为response.data中没有这个id属性，我们新加进去，所以要用下面这种方式。
          this.seller = Object.assign({}, this.seller, response.data)
          console.log(this.seller.id)
        }
      })
    }
  }
</script>

data()中的id是我们在实例中加进去的，API返回的数据中并没有这个id，可是我们的页面中又需要根据这个id来显示不同的数据，所以，我们要将这个新的id属性添加到整体的数据中去，这种情况下就需要用到Object.assign()。