vue3的两种写法（组合式和选项式）

截至2020年vue3发布以来，vue有了一种全新的写法“组合式”。相比较于传统的vue2的“选项式”写法，“组合式”更加的简便。vue2主要使用选项式写法，vue3主要使用组合式写法;

vue2.7版本支持组合式和选项式两种写法，再低一些的vue2版本就只支持选项式写法

vue3同时支持组合式和选项式写法。

目前vue3版本是官方默认的创建版本，官方也推荐使用组合式的写法。

1、创建一个vue3项目

在vue3项目中同时使用两种形式的写法，来比较一下“组合式”与“选项式”；

实现相同的一个简单功能：

选项式的写法：

<template>

    <div>

 姓名：{{ name }}

 <br>

  年龄：{{ age }}  

    <br>

  次数：{{ count }}

    <br>

  <button @click="add">增加</button>

  <button @click="lessen">减少</button>

    </div>

</template>

<script  lang="ts" >

export default {

data() {    

return{

     name:'张三',  

    age:18,

    count:0

}

},

methods:{

add(){

this.count++

},

lessen(){

this.count--

}

}

}

组合式的写法：

<template>

    <div>

  姓名： {{ name }}

  <br>

   年龄： {{ age }}

<br>

  记数： {{ count }}

  <button @click="add">增加</button>

  <br>

  <button @click="lessen">减少</button>

    </div>

</template>

<script  lang="ts" setup>

import {ref} from 'vue'

let name=ref('张三')

let age=ref(10)

let count=ref(18)

const add=()=>{

count.value++

}

const lessen =()=>{

  count.value--

}

</script>

总结来说：组合式写法更加灵活和可维护，我们在书写复杂的项目时，应该首选组合式写法，这也是vue官方推荐的写法。

而按照选项式的写法；数据、方法、计算属性等，是分散在：data、methods、computed中的，如果想新增或者修改一个需求，就需要分别修改：data、methods、computed。如果项目复杂，且庞大的话，使用这种写法是非常不便于维护和复用的。

在这里简单的叙述下vue项目的启动流程：

运行npm  run dev  命令时，vue会先扫描index.html文件

index.html文件中，根据<script>标签引入的src/main.ts文件，会去扫描main.ts文件；

而这个文件中引入了App.vue组件

App.vue组件是vue项目的根组件；

其他的组件都会直接或间接的被导入到App.vue组件中，这时就可以继续追踪其他的组件或直接显示其组件的内容了。