最新版vue3+TypeScript开发入门到实战教程之vue3与vue2语法优劣对比

在vue3中能不能用vue2语法

回顾上篇文章创建vue3项目hello-world，将使用创建的项目。重新编写hello-world，先删除src文件夹，再创建src文件夹，编写vue2语法的hello-world，看能不能运行

删除src文件夹
创建src文件夹
创建main.ts
创建App.vue
创建components文件夹
在创建components内创建Car.vue

src项目结构如下

##main.ts引入挂载vue3

复制代码

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

根组件App引入组件Car

复制代码

<template>
  <Car/>
</template>
<script lang="ts">
import Car from './components/Car.vue'
export default {
  name: 'heiil',
  components: { Car }
}
</script>

Car组件使用vue2语法添加数据、方法

我们在组件中添加name，pirce，lowPrice，代表汽车品牌，价格，低价，并通过按钮，修改品牌名称和价格，查看最低价

复制代码

<template>
  <div class="car">
    <h2>品牌:{{ name }}</h2>
    <h2>价格:{{ price }}万</h2>
    <button @click="changeName">修改品牌</button>
    <button @click="changePrice">查看价格</button>
    <button @click="showLowPrice">查看低价</button>
  </div>
</template>
<script lang="ts">
export default{
  name: 'Car',
  data() {
    return {
      name: '奔驰',
      price: 100,
      lowPrice:80
    }

  },
  methods: {
    changeName() {
      this.name='宝马'

    },
    changePrice() {
      this.price += 10
    },
    showLowPrice() {
      alert(this.lowPrice+'万')
    }
  },
}
</script>
<style scoped>
.car{
  background-color:skyblue;
  box-shadow:  0 0 10px;
  border-radius: 10px;
  padding: 15px;
}
button{
  margin: 0 5px;
}
</style>

浏览器访问http://localhost:5173/，查看效果如下

调用的方法和属性，都可以正常应用。上述事例得出结论，在vue3可以用vue2语法。

vue2语法结构的特点

script语法结构

复制代码

# lang="ts"语法支持TypeScript
<script >
export default{
  name: 'Car',
  data() {
    return {
      name: '奔驰',
      price: 100,
      lowPrice:80
    }

  },
  methods: {
    changeName() {
      this.name='宝马'

    },
    changePrice() {
      this.price += 10
    },
    showLowPrice() {
      alert(this.lowPrice+'万')
    }
  },
}
</script>

vue2中语法是OptionsAPI，是选项式API,参看script代码，若给汽车再增加颜色属性和修改颜色的方法，需要分别在data里添加color属性和在methods中添加changeColor方法。若再增加重量、车长等等。

若此时该页面同时还有飞机的需求，汽车和飞机的属性和方法都混淆在一起，类似下图功能A为汽车功能B为飞机。

如图：

OptionsAPI的弊端

Options类型的API，数据、方法、计算属性等，是分散在 data、 methods、 computed中的，若想新

增或者修改一个需求，就需要分别修改：data、methods、 computed。代码不便于维护和复用。

vue3新语法的优势

组合式 API (Composition API)，所谓组合式API,就是将汽车所有的属性、方法、计算都放在一块，不分开；飞机的所有属性和方法也放到一块。这样的好处，增加修改汽车就到汽车的模块中，同理修改飞机就到飞机的模块中。如下图，将vue2中选项式(OptionsAPI)的写法转到vue3组合式 API (Composition API)，每个颜色代表一个需求，如绿色代表飞机，蓝色代表汽车等。

vue3 语法的优势

组合式 API (Composition API)，可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。