目錄
1、vue2選項式API
2、Vue3 組合式 API
（1）setup 函數?
基本實現?編輯
補充方法
setup語法糖
（2）響應式數據?
ref
reactive：
? ? ? ? 大家好啊，我是jstart千語。好久沒更新咯，因為最近一直忙找實習的原因，跑來跑去的，耽擱很多時間。這段時間呢想把自己的項目先上線了，所以對vue3進行了一個學習打算把前端做了一起部署上線。
vue2中使用的選項式API，而vue3用的是選項式API。而我更喜歡vue3這種風格，它們具體是什么呢，請繼續往下看：
選項式 API 通過定義 data、methods、computed 等選項來組織組件邏輯，而組合式 API 基于函數，讓開發者能夠更靈活地組織和復用代碼。此外，Vue3 還對模板語法、生命周期鉤子等進行了調整和優化。
1、vue2選項式API
// Vue2組件示例
export default {data() {return {count: 0};},methods: {increment() {this.count++;}},mounted() {console.log('組件掛載完成');}
};?????????然而，當組件變得復雜時，選項式 API 的弊端就會顯現出來。相關的邏輯可能分散在不同的選項中，例如一個涉及數據更新、方法調用和生命周期鉤子的功能，需要在多個選項中查找和維護代碼，導致代碼組織和復用變得困難。
2、Vue3 組合式 API
（1）setup 函數?
setup 函數是組合式 API 的入口，它在組件的 beforeCreate 生命周期鉤子之前執行，是組合式 API 中定義組件邏輯的主要場所。setup 函數接收兩個參數：props 和 context。props 是父組件傳遞過來的屬性，context 包含了 attrs、slots、emit 等組件實例的上下文信息。
基本實現
返回值簡寫：
當返回值的key和value都相同時，觸發對象的簡寫形式：可以直接寫成一個單值
即return{name:name,age:age} 簡寫成：return{name,age}
補充方法
綁定事件：
?事件執行的方法：
setup語法糖
原寫法：
修改后：
（2）響應式數據?
ref
????????用于創建一個響應式的引用，適用于基本數據類型（如字符串、數字、布爾值等）。ref 函數返回一個對象，通過.value 屬性來訪問和修改其值，并且當值發生變化時，相關的依賴會被觸發更新。
import { ref } from 'vue';const count = ref(0);
count.value++; // 修改值reactive：
????????用于創建一個響應式的對象，適用于對象和數組等復雜數據類型。reactive 函數接收一個普通對象，返回一個代理對象，對該對象屬性的修改會被響應式跟蹤。
import { reactive } from 'vue';const state = reactive({user: {name: '張三',age: 20}
});
state.user.name = '李四'; // 修改對象屬性? ? ? ? 響應式數據再次先做了解，一些細節將在下一篇博客仔細講解。
)
