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

时间:2021-7-21 作者:qvyue

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

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

// 现在的写法
const foo2 = 'bar'
const baz2 = {foo2}
ES6(八)对象的扩展(1) 属性的简洁表示法
简写

在 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 等,都是这种简写的方式。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。