ES6（八）对象的扩展(1) 属性的简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。
以便于更简洁的书写代码，比如这样：

// 原来的写法
var foo1 = 'bar'
var baz = {foo1: foo1}

// 现在的写法
const foo2 = 'bar'
const baz2 = {foo2}

在 vue 里面大量的使用了这种方法，比如常见的 组件的注册和 setup 的 return

import elFind from '@/components/nf-el-find/el-find-div'
import elForm from '@/components/nf-el-form/el-form-div'

export default {
  name: 'crud',
  components: {
    elFind, // 简写形式
    elForm
  },
  setup () {
     const activeIndex = ref('1-1')

    return {
      activeIndex // 简写形式
    }
  }

如果不用简写的话，代码就是这样：

import elFind from '@/components/nf-el-find/el-find-div'
import elForm from '@/components/nf-el-form/el-form-div'

export default {
  name: 'crud',
  components: {
    'nf-find': elFind, // 熟悉的key value 的形式
    'nf-form': elForm
  },
  setup () {
     const activeIndex = reactive({ name: '' })

    return {
      activeIndex: activeIndex // 简写形式
    }
  }

如果注意看的话，你会发现，我偷偷的把 ref 换成了 reactive 。因为 vue 对 ref 做了特殊处理。如果写成这样的话，会出现小问题。

当然在 script setup 里面，就不用这么麻烦了，组件也不用 components 的方式来注册，setup 里面也不需要再写 return 来返回给模板数据了。

可以这样来写：

import { reactive, ref, watch } from "vue"


// 组件
import nftext from '/ctrl/nf-el-form-item/t-text.vue'
import nfarea from '/ctrl/nf-el-form-item/t-area.vue'
import nftext2 from '/ctrl/nf-el-form-item/t-autocomplete.vue'
import nfnumber from '/ctrl/nf-el-form-item/n-number.vue'
import nfselects from '/ctrl/nf-el-form-item/s-select-cascader.vue'

const activeIndex = reactive({ name: '' })

这样就更方便了。只是如果处理不好的话，会更容易混乱。

最后，函数也可以简写。

// 原先
var o = {
  method: function() {
    return ''
  }
}

// 现在
var o = {
  method() {
    return ''
  }
}

看着是不是很眼熟了，vue 里面的 setup 等，都是这种简写的方式。