vue-class-component和vue-property-decorator

1. vue-class-component

---

作用

用於將Vue中組件用類的方式編寫。

Demo

1.先定義一個組件ComponentA：

<template>
  <div>
    <h3>Simple header {{getText}}</h3>
  </div>
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    name: String
  }
})
export default class SimpleHeader extends Vue {
  // initial data
  id = 'myId'

  // computed
  get getText () {
    return `${this.name}(${this.id})`
  }
}
</script>
<style>
</style>

2. 在App.vue中引用它

<template>
  <div>
    <div class="sc-width-full sc-height-full">
      <Layout>
        <SimpleHeader ref="headerMenu" name="david"></SimpleHeader>
        <div class="ivu-layout ivu-layout-has-sider" style="height:100%;">
          <Layout id="pageContainer">
            <div>
              <Content id="pageContent">
                <router-view></router-view>
              </Content>
            </div>
          </Layout>
        </div>
      </Layout>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import SimpleHeader from './simple-header.vue'

@Component({
  components: {
    SimpleHeader
  }
})
export default class Index extends Vue {
  userName = null;
  userRole = null;
  created () {
    this.getUserInfo()
  }
  getUserInfo () {
    // getUserInfo
  }
}
</script>
<style>
.ivu-layout {
  height: 100%;
}
.ivu-layout.ivu-layout-has-sider {
  display: block;
  height: calc(100% - var(--header-height));
  margin-left: 0.75rem;
  padding: 0.5rem 1.25rem;
}
</style>

效果：

可以看出，借用vue-class-component我們可以把組件寫成class的模式，和面向對象非常像，可以很方便地實現繼承和封裝。

2. vue-property-decorator

---

 

作用

裝飾器來簡化書寫

Demo

還是剛剛的例子，App.vue改成

<template>
  <div>
    <div class="sc-width-full sc-height-full">
      <Layout>
        <SimpleHeader ref="headerMenu" name="david"></SimpleHeader>
        <div class="ivu-layout ivu-layout-has-sider" style="height:100%;">
          <Layout id="pageContainer">
            <div>
              <Content id="pageContent">
                <router-view></router-view>
              </Content>
            </div>
          </Layout>
        </div>
      </Layout>
    </div>
  </div>
</template>
<script>
import {Component, Vue} from 'vue-property-decorator'
import SimpleHeader from './simple-header.vue'

@Component({
  components: {
    SimpleHeader
  }
})
export default class Index extends Vue {
  userName = null;
  userRole = null;
  created () {
    this.getUserInfo()
  }
  getUserInfo () {
    this.$axios({
      method: 'GET',
      url: `/user_info`
    }).then(res => {
      if (res && res.status === 200) {
        this.userName = res.data.userName
        this.userRole = res.data.userRole
        this.$store.commit('setUserName', res.data.userName)
        this.$store.commit('setRole', res.data.userRole)
      } else {
      }
    }).catch(e => {
      console.error(e)
    })
  }
}
</script>
<style>
.ivu-layout {
  height: 100%;
}
.ivu-layout.ivu-layout-has-sider {
  display: block;
  height: calc(100% - var(--header-height));
  margin-left: 0.75rem;
  padding: 0.5rem 1.25rem;
}
</style>

和vue-class-component的區別不是很大，只是統一從vue-property-decorator引用了。當然還是其他的差異，我們在今后vue+ts里體會。