Vue 单文件组件的几种写法

一、JS构造选项写法

这是我们最常见的单文件组件的写法，这里就不过多去赘述

// 模板部分
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
</template>
// 逻辑部分
<script>
export default {
  data(){
   return{}
  }
  components: {},
  methods:{ }
  ...
}
</script>
// 样式部分
<style lang="stylus" scoped>
</style>

二、 Vue.extend 扩展型组件

这是 Vue.extend 的基本内容的配置项，其实和我们上面的常用写法是一致，接下来我们再去看看 Vue.extend 不一样的地方。

// 模板部分
<template>
  <div class="about">
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
</template>
// 逻辑部分
<script>
import Vue from 'vue'
const About = Vue.extend({
   data(){
   return{}
  }
  components: {},
  methods:{ }
  ...
 })
 export default About ;
</script>
// 样式部分
<style lang="stylus" scoped>
</style>

• Vue.extend ({ … }) 返回的是一个 “扩展实例构造器”，意味着你可以进行如下像你进行 Vue 构造器一样的操作，例如：

// 可以这样来使用
var vm = new About({
 el:"#otherEl"
 ...
})
// 或者这样
// 创建 About 实例，并挂载到一个元素上。
new About().$mount("#otherEl");

• extend 是构造一个组件的语法器，我们给它配置参数 extend 给我们返回一个组件。
  这意味着，如果你不需要得到像上面的一个构造函数来进行一些 new 之类的一些操作，那么我们可以直接 向外暴露，此时它就相当于一个我们常用的组件一样：

// 模板
<template></template>
//逻辑
<script>
 import Vue from 'vue'
 export default  Vue.extend({})
<script/>
// 样式
<style></style>

三、 class 组件

• 在 class 组件内部要注意：
  1. data 中的数据要转换为 实例对象上的属性
  2.【methods 中的方法】 和 【生命周期钩子】 要转换为 实例对象上的方法
  3. 计算属性 computed 中的方法，也要变为实例对象上的方法，并且前方法前添加 get 来进行修饰
• class 组件需要依赖于【 vue-property-decorator 】中的装饰器，例如：
  当一个类组件需要接收 来自父组件传递的 props 属性时，我们就得使用 Prop 装饰器来接收；
  当我们需要给当前组件自定义指令时，需要在 Component 装饰器中进行定义
  关于更多的 vue-property-decorator 中的装饰器 ，在此查看

// 模板
<template>
  <div class="about">
    <h3>class 组件需要装饰器来修饰</h3>
    <h4 v-color>{{title}}</h4>
  </div>
</template>
// 逻辑
<script>
import Vue from "vue"
import {Component,Prop} from "vue-property-decorator"

@Component({
  directives:{
    color: {
      // 指令的定义
      inserted: function (el) {
          el.style.color = "red"
      }
    }
  }
})
export default class ClassCom extends Vue{
  // 父级传递的 props
  @Prop({type:String,default:'这是默认值',required:false}) title; 

 // 计算属性
  get descTitl (){
    return this.title.split("").reverse().join("");
  }
  // 实例对象上的属性，即 自身的元数据
 url='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png';
// 实例对象上的 方法
  tabAction(){
    alert("good good study , day day up!");
  }
// 对应的生命周期钩子函数
  mounted(){
    console.log("类组件已经挂载了");
  }
}
</script>
// 样式
<style lang="stylus" scoped>
</style>

四、函数式组件，functional

当我们标记组件为 functional 时，这意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)，但是它可以接收父组件传递给它的 props。
因此，函数式组件比普通组件性能更好，缺点就是定义的数据没有响应式。

// 模板
<template funtional>
 <div>{{title}}</div>
</template>

// 逻辑
<script>
export default {
 // 接收父级传递的 props
  props: ['title']
}
</script>

// 样式
<style lang="stylus" scoped>
</style>