vue3前端開發(fā),感受一下組合式api和VUE2選項式的差異！今天開始，正式開始，進入學習Vue3的內容。以后代碼，案例分享，都會采用組合式api的模式為大家做展示。
今天是第一節(jié)，帶大家感受一下，Vue3的組合式api和之前傳統(tǒng)的vue2版本選項式api的差別。
首先，大家需要提前使用npm,腳手架，在本地搭建好一個基礎的Vue3項目。然后看下面的代碼分享。
<template>
<h3>入口文件</h3>
<Base />
</template>
<script setup>
import Base from './components/Base.vue'
</script>以上代碼是入口文件app.VUE的內容。里面很簡單，調用了一個自定義組件，Base.vue。看得出來，不需要再使用components對象包裹了。直接import就可以拿去使用了。
<template>
<h3>初步了解vue3組合式api</h3>
<p>{{ count }}</p>
<button @click="addHandle">加法運算</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const addHandle = () => count.value++
//this.$refs.username
</script>這個代碼是Base.vue的內容，里面很簡單。定義了一個變量。count。一個按鈕，點擊事件。讓變量count的值自增1.
如圖，是可以正常執(zhí)行如果，大家要是使用之前Vue2版本的代碼，需要寫很長。
<template>
<h3>初步了解vue3組合式api</h3>
<p>{{ count }}</p>
<button @click="addHandle">加法運算</button>
</template>
<script>
//vue3組合式api樣式如下
// import { ref } from 'vue'
// const count = ref(0)
// const addHandle = () => count.value++
//vue2選項式如下所示:
export default{
data(){
return {
count:0
}
},
methods:{
addHandle(){
this.count++
}
}
}
</script>這段代碼是使用了vue2版本選項式api風格編輯的?？梢悦黠@看到，內容較多。文章來源：http://www.zghlxwxcb.cn/news/detail-803619.html
vue3 的是script標簽里，寫一個setup.是新語法糖效果，可以省去一些麻煩。它會知道默認導入哪些你需要的文件。文章來源地址http://www.zghlxwxcb.cn/news/detail-803619.html
到了這里，關于vue3前端開發(fā),感受一下組合式api和VUE2選項式的差異的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
