自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

10分鐘讓你快速上手Vue3

作者：流浪的思維
開發(fā) 前端
經(jīng)過了漫長地迭代，Vue 3.0 終于在上 2020-09-18 發(fā)布了，帶了翻天覆地的變化，使用了 Typescript 進(jìn)行了大規(guī)模的重構(gòu)，帶來了 Composition API RFC 版本，類似 React Hook 一樣的寫 Vue，可以自定義自己的 hook ，讓使用者更加的靈活，接下來總結(jié)一下 vue 3.0 帶來的部分新特性。

經(jīng)過了漫長地迭代，Vue 3.0 終于在上 2020-09-18 發(fā)布了，帶了翻天覆地的變化，使用了 Typescript 進(jìn)行了大規(guī)模的重構(gòu)，帶來了 Composition API RFC 版本，類似 React Hook 一樣的寫 Vue，可以自定義自己的 hook ，讓使用者更加的靈活，接下來總結(jié)一下 vue 3.0 帶來的部分新特性。

  1. setup()
  2. ref()
  3. reactive()
  4. isRef()
  5. toRefs()
  6. computed()
  7. watch()
  8. LifeCycle Hooks(新的生命周期)
  9. Template refs
  10. globalProperties
  11. Suspense

Vue2 與 Vue3 的對比

  • 對 TypeScript 支持不友好(所有屬性都放在了 this 對象上，難以推倒組件的數(shù)據(jù)類型)
  • 大量的 API 掛載在 Vue 對象的原型上，難以實(shí)現(xiàn) TreeShaking。
  • 架構(gòu)層面對跨平臺 dom 渲染開發(fā)支持不友好
  • CompositionAPI。愛 ReactHook 啟發(fā)
  • 更方便的支持了 jsx
  • Vue 3 的 Template 支持多個根標(biāo)簽，Vue 2 不支持
  • 對虛擬 DOM 進(jìn)行了重寫、對模板的編譯進(jìn)行了優(yōu)化操作...

一、setup 函數(shù)

setup() 函數(shù)是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統(tǒng)一的入口, setup 函數(shù)會在 beforeCreate 之后、created 之前執(zhí)行, vue3 也是取消了這兩個鉤子，統(tǒng)一用 setup 代替, 該函數(shù)相當(dāng)于一個生命周期函數(shù)，vue 中過去的 data，methods，watch 等全部都用對應(yīng)的新增 api 寫在 setup()函數(shù)中

 

  1. setup(props, context) { 
  2.     context.attrs 
  3.     context.slots 
  4.     context.parent 
  5.     context.root 
  6.     context.emit 
  7.     context.refs 
  8.  
  9.     return { 
  10.  
  11.     } 
  12.   } 
  • props: 用來接收 props 數(shù)據(jù)
  • context 用來定義上下文, 上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到, 在 setup() 函數(shù)中無法訪問到 this，是個 undefined
  • 返回值: return {}, 返回響應(yīng)式數(shù)據(jù), 模版中需要使用的函數(shù)

二、reactive 函數(shù)

reactive() 函數(shù)接收一個普通對象，返回一個響應(yīng)式的數(shù)據(jù)對象, 想要使用創(chuàng)建的響應(yīng)式數(shù)據(jù)也很簡單，創(chuàng)建出來之后，在 setup 中 return 出去，直接在 template 中調(diào)用即可

  1. <template> 
  2.   {{name}} // test 
  3. <template> 
  4.  
  5. <script lang="ts"> 
  6. import { defineComponent, reactive, ref, toRefs } from 'vue'; 
  7. export default defineComponent({ 
  8.   setup(props, context) { 
  9.  
  10.     let state = reactive({ 
  11.       name: 'test' 
  12.     }); 
  13.  
  14.     return state 
  15.   } 
  16. }); 
  17. </script> 

三、ref() 函數(shù)

ref() 函數(shù)用來根據(jù)給定的值創(chuàng)建一個響應(yīng)式的數(shù)據(jù)對象，ref() 函數(shù)調(diào)用的返回值是一個對象，這個對象上只包含一個 value 屬性, 只在 setup 函數(shù)內(nèi)部訪問 ref 函數(shù)需要加.value

  1. <template> 
  2.     <div class="mine"> 
  3.         {{count}} // 10 
  4.     </div> 
  5. </template> 
  6.  
  7. <script lang="ts"> 
  8. import { defineComponent, ref } from 'vue'; 
  9. export default defineComponent({ 
  10.   setup() { 
  11.     const count = ref<number>(10) 
  12.     // 在js 中獲取ref 中定義的值, 需要通過value屬性 
  13.     console.log(count.value); 
  14.     return { 
  15.        count 
  16.     } 
  17.    } 
  18. }); 
  19. </script> 

在 reactive 對象中訪問 ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)

  1. <template> 
  2.     <div class="mine"> 
  3.         {{count}} -{{t}} // 10 -100 
  4.     </div> 
  5. </template> 
  6.  
  7. <script lang="ts"> 
  8. import { defineComponent, reactive, ref, toRefs } from 'vue'; 
  9. export default defineComponent({ 
  10.   setup() { 
  11.     const count = ref<number>(10) 
  12.     const obj = reactive({ 
  13.       t: 100, 
  14.       count 
  15.     }) 
  16.     // 通過reactive 來獲取ref 的值時,不需要使用.value屬性 
  17.     console.log(obj.count); 
  18.     return { 
  19.        ...toRefs(obj) 
  20.     } 
  21.    } 
  22. }); 
  23. </script> 

四、isRef() 函數(shù)

isRef() 用來判斷某個值是否為 ref() 創(chuàng)建出來的對象

  1. <script lang="ts"> 
  2. import { defineComponent, isRef, ref } from 'vue'; 
  3. export default defineComponent({ 
  4.   setup(props, context) { 
  5.     const name: string = 'vue' 
  6.     const age = ref<number>(18) 
  7.     console.log(isRef(age)); // true 
  8.     console.log(isRef(name)); // false 
  9.  
  10.     return { 
  11.       age, 
  12.       name 
  13.     } 
  14.   } 
  15. }); 
  16. </script> 

五、toRefs() 函數(shù)

toRefs() 函數(shù)可以將 reactive() 創(chuàng)建出來的響應(yīng)式對象，轉(zhuǎn)換為普通的對象，只不過，這個對象上的每個屬性節(jié)點(diǎn)，都是 ref() 類型的響應(yīng)式數(shù)據(jù)

 

  1. <template> 
  2.   <div class="mine"> 
  3.     {{name}} // test 
  4.     {{age}} // 18 
  5.   </div> 
  6. </template> 
  7.  
  8. <script lang="ts"> 
  9. import { defineComponent, reactive, ref, toRefs } from 'vue'; 
  10. export default defineComponent({ 
  11.   setup(props, context) { 
  12.     let state = reactive({ 
  13.       name: 'test' 
  14.     }); 
  15.  
  16.     const age = ref(18) 
  17.  
  18.     return { 
  19.       ...toRefs(state), 
  20.       age 
  21.     } 
  22.   } 
  23. }); 
  24. </script> 

六、computed()

該函數(shù)用來創(chuàng)造計(jì)算屬性，和過去一樣，它返回的值是一個 ref 對象。里面可以傳方法，或者一個對象，對象中包含 set()、get()方法

6.1 創(chuàng)建只讀的計(jì)算屬性

 

  1. import { computed, defineComponent, ref } from 'vue'; 
  2. export default defineComponent({ 
  3.   setup(props, context) { 
  4.     const age = ref(18) 
  5.  
  6.     // 根據(jù) age 的值，創(chuàng)建一個響應(yīng)式的計(jì)算屬性 readOnlyAge,它會根據(jù)依賴的 ref 自動計(jì)算并返回一個新的 ref 
  7.     const readOnlyAge = computed(() => age.value++) // 19 
  8.  
  9.     return { 
  10.       age, 
  11.       readOnlyAge 
  12.     } 
  13.   } 
  14. }); 
  15. </script> 

6.2 通過 set()、get()方法創(chuàng)建一個可讀可寫的計(jì)算屬性

  1. <script lang="ts"> 
  2. import { computed, defineComponent, ref } from 'vue'; 
  3. export default defineComponent({ 
  4.   setup(props, context) { 
  5.     const age = ref<number>(18) 
  6.  
  7.     const computedAge = computed({ 
  8.       get: () => age.value + 1, 
  9.       set: value => age.value + value 
  10.     }) 
  11.     // 為計(jì)算屬性賦值的操作，會觸發(fā) set 函數(shù), 觸發(fā) set 函數(shù)后，age 的值會被更新 
  12.     age.value = 100 
  13.     return { 
  14.       age, 
  15.       computedAge 
  16.     } 
  17.   } 
  18. }); 
  19. </script> 

七、 watch() 函數(shù)

watch 函數(shù)用來偵聽特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用。默認(rèn)情況是懶執(zhí)行的，也就是說僅在偵聽的源數(shù)據(jù)變更時才執(zhí)行回調(diào)。

7.1 監(jiān)聽用 reactive 聲明的數(shù)據(jù)源

  1. <script lang="ts"> 
  2. import { computed, defineComponent, reactive, toRefs, watch } from 'vue'; 
  3. interface Person { 
  4.   name: string, 
  5.   age: number 
  6. } 
  7. export default defineComponent({ 
  8.   setup(props, context) { 
  9.     const state = reactive<Person>({ name: 'vue', age: 10 }) 
  10.  
  11.     watch( 
  12.       () => state.age, 
  13.       (age, preAge) => { 
  14.         console.log(age); // 100 
  15.         console.log(preAge); // 10 
  16.       } 
  17.     ) 
  18.     // 修改age 時會觸發(fā)watch 的回調(diào), 打印變更前后的值 
  19.     state.age = 100 
  20.     return { 
  21.       ...toRefs(state) 
  22.     } 
  23.   } 
  24. }); 
  25. </script> 

7.2 監(jiān)聽用 ref 聲明的數(shù)據(jù)源

  1. <script lang="ts"> 
  2. import { defineComponent, ref, watch } from 'vue'; 
  3. interface Person { 
  4.   name: string, 
  5.   age: number 
  6. } 
  7. export default defineComponent({ 
  8.   setup(props, context) { 
  9.     const age = ref<number>(10); 
  10.  
  11.     watch(age, () => console.log(age.value)); // 100 
  12.  
  13.     // 修改age 時會觸發(fā)watch 的回調(diào), 打印變更后的值 
  14.     age.value = 100 
  15.     return { 
  16.       age 
  17.     } 
  18.   } 
  19. }); 
  20. </script> 

7.3 同時監(jiān)聽多個值

  1. <script lang="ts"> 
  2. import { computed, defineComponent, reactive, toRefs, watch } from 'vue'; 
  3. interface Person { 
  4.   name: string, 
  5.   age: number 
  6. } 
  7. export default defineComponent({ 
  8.   setup(props, context) { 
  9.     const state = reactive<Person>({ name: 'vue', age: 10 }) 
  10.  
  11.     watch( 
  12.       [() => state.age, () => state.name], 
  13.       ([newName, newAge], [oldName, oldAge]) => { 
  14.         console.log(newName); 
  15.         console.log(newAge); 
  16.  
  17.         console.log(oldName); 
  18.         console.log(oldAge); 
  19.       } 
  20.     ) 
  21.     // 修改age 時會觸發(fā)watch 的回調(diào), 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執(zhí)行watch的回調(diào) 
  22.     state.age = 100 
  23.     state.name = 'vue3' 
  24.     return { 
  25.       ...toRefs(state) 
  26.     } 
  27.   } 
  28. }); 
  29. </script> 

7.4 stop 停止監(jiān)聽

在 setup() 函數(shù)內(nèi)創(chuàng)建的 watch 監(jiān)視，會在當(dāng)前組件被銷毀的時候自動停止。如果想要明確地停止某個監(jiān)視，可以調(diào)用 watch() 函數(shù)的返回值即可，語法如下：

  1. <script lang="ts"> 
  2. import { set } from 'lodash'; 
  3. import { computed, defineComponent, reactive, toRefs, watch } from 'vue'; 
  4. interface Person { 
  5.   name: string, 
  6.   age: number 
  7. } 
  8. export default defineComponent({ 
  9.   setup(props, context) { 
  10.     const state = reactive<Person>({ name: 'vue', age: 10 }) 
  11.  
  12.     const stop =  watch( 
  13.       [() => state.age, () => state.name], 
  14.       ([newName, newAge], [oldName, oldAge]) => { 
  15.         console.log(newName); 
  16.         console.log(newAge); 
  17.  
  18.         console.log(oldName); 
  19.         console.log(oldAge); 
  20.       } 
  21.     ) 
  22.     // 修改age 時會觸發(fā)watch 的回調(diào), 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執(zhí)行watch的回調(diào) 
  23.     state.age = 100 
  24.     state.name = 'vue3' 
  25.  
  26.     setTimeout(()=> { 
  27.       stop() 
  28.       // 此時修改時, 不會觸發(fā)watch 回調(diào) 
  29.       state.age = 1000 
  30.       state.name = 'vue3-' 
  31.     }, 1000) // 1秒之后講取消watch的監(jiān)聽 
  32.  
  33.     return { 
  34.       ...toRefs(state) 
  35.     } 
  36.   } 
  37. }); 
  38. </script> 

八、LifeCycle Hooks(新的生命后期)

新版的生命周期函數(shù)，可以按需導(dǎo)入到組件中，且只能在 setup() 函數(shù)中使用, 但是也可以在 setup 自定義, 在 setup 中使用

  1. <script lang="ts"> 
  2. import { set } from 'lodash'; 
  3. import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated } from 'vue'; 
  4. export default defineComponent({ 
  5.   setup(props, context) { 
  6.     onBeforeMount(()=> { 
  7.       console.log('beformounted!') 
  8.     }) 
  9.     onMounted(() => { 
  10.       console.log('mounted!') 
  11.     }) 
  12.  
  13.     onBeforeUpdate(()=> { 
  14.       console.log('beforupdated!') 
  15.     }) 
  16.     onUpdated(() => { 
  17.       console.log('updated!') 
  18.     }) 
  19.  
  20.     onBeforeUnmount(()=> { 
  21.       console.log('beforunmounted!') 
  22.     }) 
  23.     onUnmounted(() => { 
  24.       console.log('unmounted!') 
  25.     }) 
  26.  
  27.     onErrorCaptured(()=> { 
  28.       console.log('errorCaptured!') 
  29.     }) 
  30.  
  31.     return {} 
  32.   } 
  33. }); 
  34. </script> 

九、Template refs

通過 refs 來回去真實(shí) dom 元素, 這個和 react 的用法一樣,為了獲得對模板內(nèi)元素或組件實(shí)例的引用，我們可以像往常一樣在 setup()中聲明一個 ref 并返回它

  • 還是跟往常一樣，在 html 中寫入 ref 的名稱
  • 在steup 中定義一個 ref
  • steup 中返回 ref的實(shí)例
  • onMounted 中可以得到 ref的RefImpl的對象, 通過.value 獲取真實(shí)dom
  1. <template> 
  2.   <!--第一步：還是跟往常一樣，在 html 中寫入 ref 的名稱--> 
  3.   <div class="mine" ref="elmRefs"> 
  4.     <span>1111</span> 
  5.   </div> 
  6. </template> 
  7.  
  8. <script lang="ts"> 
  9. import { set } from 'lodash'; 
  10. import { defineComponent, onMounted, ref } from 'vue'; 
  11. export default defineComponent({ 
  12.   setup(props, context) { 
  13.     // 獲取真實(shí)dom 
  14.     const elmRefs = ref<null | HTMLElement>(null); 
  15.     onMounted (() => { 
  16.       console.log(elmRefs.value); // 得到一個 RefImpl 的對象, 通過 .value 訪問到數(shù)據(jù) 
  17.     }) 
  18.  
  19.     return { 
  20.       elmRefs 
  21.     } 
  22.   } 
  23. }); 
  24. </script> 

十、vue 的全局配置

通過 vue 實(shí)例上 config 的配置,包含 Vue 應(yīng)用程序全局配置的對象。您可以在掛載應(yīng)用程序之前修改下面列出的屬性:

 

  1. const app = Vue.createApp({})  
  2. app.config = {...} 

為組件渲染功能和觀察程序期間的未捕獲錯誤分配處理程序。錯誤和應(yīng)用程序?qū)嵗龑⒄{(diào)用處理程序

  1. app.config.errorHandler = (err, vm, info) => {} 

可以在應(yīng)用程序內(nèi)的任何組件實(shí)例中訪問的全局屬性，組件的屬性將具有優(yōu)先權(quán)。這可以代替 Vue 2.xVue.prototype 擴(kuò)展：

 

  1. const app = Vue.createApp({})  
  2. app.config.globalProperties.$http = 'xxxxxxxxs' 

可以在組件用通過 getCurrentInstance() 來獲取全局 globalProperties 中配置的信息,getCurrentInstance 方法獲取當(dāng)前組件的實(shí)例，然后通過 ctx 屬性獲得當(dāng)前上下文，這樣我們就能在 setup 中使用 router 和 vuex, 通過這個屬性我們就可以操作變量、全局屬性、組件屬性等等

 

  1. setup( ) { 
  2.   const { ctx } = getCurrentInstance(); 
  3.   ctx.$http 
  4. } 

十一、Suspense 組件

在開始介紹 Vue 的 Suspense 組件之前，我們有必要先了解一下 React 的 Suspense 組件，因?yàn)樗麄兊墓δ茴愃啤?/p>

React.lazy 接受一個函數(shù)，這個函數(shù)需要動態(tài)調(diào)用 import()。它必須返回一個 Promise，該 Promise 需要 resolve 一個 default export 的 React 組件。

 

  1. import React, { Suspense } from 'react'; 
  2.  
  3.  
  4. const myComponent = React.lazy(() => import('./Component')); 
  5.  
  6.  
  7. function MyComponent() { 
  8.   return ( 
  9.     <div> 
  10.       <Suspense fallback={<div>Loading...</div>}> 
  11.         <myComponent /> 
  12.       </Suspense> 
  13.     </div> 
  14.   ); 
  15. } 

Vue3 也新增了 React.lazy 類似功能的 defineAsyncComponent 函數(shù)，處理動態(tài)引入(的組件)。defineAsyncComponent 可以接受返回承諾的工廠函數(shù)。當(dāng)您從服務(wù)器檢索到組件定義時，應(yīng)該調(diào)用 Promise 的解析回調(diào)。您還可以調(diào)用 reject(reason)來指示負(fù)載已經(jīng)失敗

 

  1. import { defineAsyncComponent } from 'vue' 
  2.  
  3. const AsyncComp = defineAsyncComponent(() => 
  4.   import('./components/AsyncComponent.vue') 
  5. ) 
  6.  
  7. app.component('async-component', AsyncComp) 

Vue3 也新增了 Suspense 組件:

  1. <template> 
  2.   <Suspense> 
  3.     <template #default> 
  4.       <my-component /> 
  5.     </template> 
  6.     <template #fallback> 
  7.       Loading ... 
  8.     </template> 
  9.   </Suspense> 
  10. </template> 
  11.  
  12. <script lang='ts'> 
  13.  import { defineComponent, defineAsyncComponent } from "vue"; 
  14.  const MyComponent = defineAsyncComponent(() => import('./Component')); 
  15.  
  16. export default defineComponent({ 
  17.    components: { 
  18.      MyComponent 
  19.    }, 
  20.    setup() { 
  21.      return {} 
  22.    } 
  23. }) 
  24.  
  25.  
  26. </script> 

十二、vue 3.x 完整組件模版結(jié)構(gòu)

一個完成的 vue 3.x 完整組件模版結(jié)構(gòu)包含了:組件名稱、 props、components、setup(hooks、computed、watch、methods 等)

 

  1. <template> 
  2.   <div class="mine" ref="elmRefs"> 
  3.     <span>{{name}}</span> 
  4.     <br> 
  5.     <span>{{count}}</span> 
  6.     <div> 
  7.       <button @click="handleClick">測試按鈕</button> 
  8.     </div> 
  9.  
  10.     <ul> 
  11.       <li v-for="item in list" :key="item.id">{{item.name}}</li> 
  12.     </ul> 
  13.   </div> 
  14. </template> 
  15.  
  16. <script lang="ts"> 
  17. import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue'; 
  18.  
  19. interface IState { 
  20.   count: 0, 
  21.   name: string, 
  22.   list: Array<object> 
  23. } 
  24.  
  25. export default defineComponent({ 
  26.   name: 'demo', 
  27.   // 父組件傳子組件參數(shù) 
  28.   props: { 
  29.     name: { 
  30.       type: String as PropType<null | ''>, 
  31.       default: 'vue3.x' 
  32.     }, 
  33.     list: { 
  34.       type: Array as PropType<object[]>, 
  35.       default: () => [] 
  36.     } 
  37.   }, 
  38.   components: { 
  39.     /// TODO 組件注冊 
  40.   }, 
  41.   emits: ["emits-name"], // 為了提示作用 
  42.   setup (props, context) { 
  43.     console.log(props.name) 
  44.     console.log(props.list) 
  45.  
  46.  
  47.     const state = reactive<IState>({ 
  48.       name: 'vue 3.0 組件', 
  49.       count: 0, 
  50.       list: [ 
  51.         { 
  52.           name: 'vue', 
  53.           id: 1 
  54.         }, 
  55.         { 
  56.           name: 'vuex', 
  57.           id: 2 
  58.         } 
  59.       ] 
  60.     }) 
  61.  
  62.     const a = computed(() => state.name) 
  63.  
  64.     onMounted(() => { 
  65.  
  66.     }) 
  67.  
  68.     function handleClick () { 
  69.       state.count ++ 
  70.       // 調(diào)用父組件的方法 
  71.       context.emit('emits-name', state.count) 
  72.     } 
  73.  
  74.     return { 
  75.       ...toRefs(state), 
  76.       handleClick 
  77.     } 
  78.   } 
  79. }); 
  80. </script> 
  81.  
  82. <template> 
  83.   <div class="mine" ref="elmRefs"> 
  84.     <span>{{name}}</span> 
  85.     <br> 
  86.     <span>{{count}}</span> 
  87.     <div> 
  88.       <button @click="handleClick">測試按鈕</button> 
  89.     </div> 
  90.  
  91.     <ul> 
  92.       <li v-for="item in list" :key="item.id">{{item.name}}</li> 
  93.     </ul> 
  94.   </div> 
  95. </template> 
  96.  
  97. <script lang="ts"> 
  98. import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue'; 
  99.  
  100. interface IState { 
  101.   count: 0, 
  102.   name: string, 
  103.   list: Array<object> 
  104. } 
  105.  
  106. export default defineComponent({ 
  107.   name: 'demo', 
  108.   // 父組件傳子組件參數(shù) 
  109.   props: { 
  110.     name: { 
  111.       type: String as PropType<null | ''>, 
  112.       default: 'vue3.x' 
  113.     }, 
  114.     list: { 
  115.       type: Array as PropType<object[]>, 
  116.       default: () => [] 
  117.     } 
  118.   }, 
  119.   components: { 
  120.     /// TODO 組件注冊 
  121.   }, 
  122.   emits: ["emits-name"], // 為了提示作用 
  123.   setup (props, context) { 
  124.     console.log(props.name) 
  125.     console.log(props.list) 
  126.  
  127.  
  128.     const state = reactive<IState>({ 
  129.       name: 'vue 3.0 組件', 
  130.       count: 0, 
  131.       list: [ 
  132.         { 
  133.           name: 'vue', 
  134.           id: 1 
  135.         }, 
  136.         { 
  137.           name: 'vuex', 
  138.           id: 2 
  139.         } 
  140.       ] 
  141.     }) 
  142.  
  143.     const a = computed(() => state.name) 
  144.  
  145.     onMounted(() => { 
  146.  
  147.     }) 
  148.  
  149.     function handleClick () { 
  150.       state.count ++ 
  151.       // 調(diào)用父組件的方法 
  152.       context.emit('emits-name', state.count) 
  153.     } 
  154.  
  155.     return { 
  156.       ...toRefs(state), 
  157.       handleClick 
  158.     } 
  159.   } 
  160. }); 
  161. </script> 

vue 3 的生態(tài)

  • 官網(wǎng)
  • 源碼
  • vite 構(gòu)建器
  • 腳手架:https://cli.vuejs.org/
  • vue-router-next
  • vuex4.0

UI 組件庫

  • vant2.x
  • Ant Design of Vue 2.x
  • element-plus

 

10分鐘讓你快速上手Vue3

 

 

責(zé)任編輯：未麗燕 來源： 今日頭條
Vue 3.0函數(shù)代碼
相關(guān)推薦

2023-09-11 08:25:57

PythonPyQt

2023-09-08 07:54:01

TkinterPython

2024-08-07 10:16:00

2022-02-23 20:38:32

云原生集群Postgres

2021-04-23 09:50:41

topLinux命令

2014-11-10 12:29:52

客服網(wǎng)站

2023-08-15 15:50:42

2017-11-20 10:25:20

數(shù)據(jù)庫MySQL索引

2021-03-04 09:26:57

微服務(wù)架構(gòu)數(shù)據(jù)

2021-01-07 08:05:20

JenkinsDevOps

2009-11-25 09:02:12

2021-08-02 15:40:20

Java日志工具

2017-06-07 18:40:33

PromiseJavascript前端

2009-11-05 10:56:31

WCF通訊

2023-02-16 08:26:41

2022-03-04 16:06:33

數(shù)據(jù)庫HarmonyOS鴻蒙

2022-06-21 12:09:18

Vue差異

2020-10-14 11:31:41

Docker

2021-08-03 17:00:25

Spring Boot代碼Java

2011-06-10 14:19:49

SEO百度收錄
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號