Day_12 : 让 Vite 来开启你的Vue 之 来!开始你的 Vue 3

Hi Dai Gei Ho~ 我是Winnie～

进入Vue章节前的 温腥提醒：
在之後的文章中，预计不会针对 Vue 的基本使用做深入的讲解(如:v-model、v-html 等)，所以 对Vue 较不熟悉的捧油，建议可以先补充下 Vue 基本入门，会比理解之後的范例。

好的～温腥提醒说完了，那我们要开始来说说 Vue 3 了。

Vue 3

Vue3 正式版於 2020/09/18释出，掐指一算 差不多也满一年了，而这次的改版 ，其底层核心改使用TypeScript来撰写，同时也针对过去的遇到的问题 改善了以下几点：

• 让编译後的档案容量更小，效能变更快
• 程序码的重复使用性与阅读性更高
• 加强对 TypeScript的支援

同时还增加了几点 新特性：

1. 引入Fragment，不限制component 只能是单一节点
2. 状态的响应侦测从 Object.defineProperty 改为Proxy API，主要可以让执行效能更好，同时也解决过去物件、阵列没有办法深度侦测的问题
3. 新增setup、ref用法，更有效进行开发

实体物件

而除了以上增加新特性之外，在创建Vue实体物件的用法也有着改变，不知道大家记不记得，一开始使用Vue时需创建一个实体物件，过去我们是使用 new Vue({})方式来创建，接着再透过$mount来挂载至网页的某个节点。如果有印象，这个就是 属於 Vue2.x的用法

用法范例如下：

//Vue2.x
const vm = new Vue({
 data:{
  count:1
 }
})

vm.$mount('#app');

而在 Vue3 之後，实体物件的创建也就改成了以下createAPP({})的用法：

//vue3
const vm = createApp({
 data(){
   return{
     count:1
   }
 }
})

vm.mount('#app'); //

ps.这边需注意，在挂载至跟节点时，Vue3的mount 是不需＄符号的

Composition API

接着，在 Vue3 众多特点之中，其中最大特别之处就非 Composition API莫属了。

Composition API 为 Vue 元件的另一种编写方式，而其出现的目的主要是解决 Vue2 Option API 会造成component 与 component 之间 程序码与 逻辑结构 难以被抽出重复利用的问题，

Option API用法如下：

//option
export default {
  data() {
    return { a: 1 }
  },
  methods(){},
  computed: {
    // get only
    aDouble() {
      return this.a * 2
    }
  },
  props:{}
}

所以 Composition API 所能提供的最大功用 就是能将 程序能依功能分类来使用，可增加阅读性之外 同时还可以 跨元件使用来增加复用性

Composition API用法如下：

//Composition api

export default {
 name:'APP',
 props:[],
 setup(props,context){
    
 }
}

恩～相信看到这边，你对於Option API 与 Composition API 的差别应该还是很模糊，但别担心 在明天文章中我们 将会(江蕙？) 针对Option API 程序范例 来深入点 来探讨 所Option API哪里出问题，大家应该就能在理解一点了

以上就是今天文章内容，针对 Vue3 新增特点的介绍，如有问题，再请各位客官多多指教了 谢谢。