取出list中属性_面向未来编程，如何在 Vue2 中使用 Vue3 的语法[实践篇]

现已更名为 Vue Composition API

面向未来编程(Future-Oriented Programming)，vue-function-api 提供开发者在 Vue2.x 中使用 Vue3 的语法逻辑开发应用。(为方便以下以 Vue2 表示)

本文不对文档 api 对过多说明，仅讨论在项目实践中遇到的问题。比较两者的区别是对 Vue3 写法最快的了解，下面通过对比同一个功能在 Vue2 与 Vue3 的区别。

场景是这样的，一个列表页，上部分是条件筛选，下部分是 table，table 行内会有删除，修改（以 dialog 形式展示）功能，template 部分无区别，这里不做赘述。

准备工作

安装 vue-function-api

npm install vue-function-api --save

# 或者
yarn add vue-function-api

在项目中引入 main.js

import Vue from 'vue'
import Element from 'element-ui'
import {
     plugin } from 'vue-function-api' // <--- 引入 vue-function-api

import App from './App'
import router from './router'
import store from './store'

Vue.use(Element)
Vue.use(plugin) // <--- 这样就可以在单文件组件中使用函数式 API了

Vue.config.productionTip = false

new Vue({
    
  router,
  store,
  render: h => h(App),
}).$mount('#app')

准备工作后，就可以安安静静的做比较了。

data

在 Vue2 中，首先要定义 data, data 中我们定义一个 query 对象用于条件筛选，citys 用于条件筛选中城市（动态获取下拉），statusMap 用于筛选条件中状态的下拉，list 用于 table。

export default {
    
  data() {
    
    return {
    
      query: {
    
        city: null,
        name: null,
        status: null
      },
      citys: [],
      list: [],
      statusMap:  [{
    
        value: 1,
        label: '启用'
      }, {
    
        value: 2,
        label: '禁用'
      }]
    }
  }

Vue3 中是这样定义

import {
     value } from 'vue-function-api'

export default {
    
  setup() {
    
    const query = value({
    
      city: null,
      name: null,
      status: null
    })
    const citys = value([])
    const list = value([])
    const statusMap = value([{
    
      value: 1,
      label: '启用'
    }, {
    
      value: 2,
      label: '禁用'
    }])

    return {
    
      query,
      citys,
      list,
      statusMap
    }
  }
}

引入 setup, 在其中做 data 做的事情，细心的同学会发现在 setup 后需要 return 所定义的变量，其中也并非要将所有的变量都放入 return 中，放入 return 中是为了能够在 template 中使用，即只需 return template 中依赖的变量

computed

上文中说到 table 中有删除，编辑功能，正常的系统中这类功能是需要有权限的人才能操作，这里我们假设已经将 permissions 存入 vuex 中，使用的时需要通过 mapGetters 取出 permissions（此处为举例这样实现&#