如何快速上手Vue3

這篇文章主要講解了“如何快速上手Vue3”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何快速上手Vue3”吧！

Vue2 與 Vue3 的對比

• 對 TypeScript 支持不友好(所有屬性都放在了 this 對象上，難以推倒組件的數據類型)

• 大量的 API 掛載在 Vue 對象的原型上，難以實現 TreeShaking。

• 架構層面對跨平臺 dom 渲染開發支持不友好

• CompositionAPI。愛 ReactHook 啟發

• 更方便的支持了 jsx

• Vue 3 的 Template 支持多個根標簽，Vue 2 不支持

• 對虛擬 DOM 進行了重寫、對模板的編譯進行了優化操作...

一、setup 函數

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

setup(props, context) {     context.attrs     context.slots     context.parent     context.root     context.emit     context.refs      return {      }   }

• props: 用來接收 props 數據

• context 用來定義上下文, 上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到, 在 setup()  函數中無法訪問到 this，是個 undefined

• 返回值: return {}, 返回響應式數據, 模版中需要使用的函數

二、reactive 函數

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

<template>   {{name}} // test <template>  <script lang="ts"> import { defineComponent, reactive, ref, toRefs } from 'vue'; export default defineComponent({   setup(props, context) {      let state = reactive({       name: 'test'     });      return state   } }); </script>

三、ref() 函數

ref() 函數用來根據給定的值創建一個響應式的數據對象，ref() 函數調用的返回值是一個對象，這個對象上只包含一個 value 屬性, 只在  setup 函數內部訪問 ref 函數需要加.value

<template>     <div class="mine">         {{count}} // 10     </div> </template>  <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({   setup() {     const count = ref<number>(10)     // 在js 中獲取ref 中定義的值, 需要通過value屬性     console.log(count.value);     return {        count     }    } }); </script>

在 reactive 對象中訪問 ref 創建的響應式數據

<template>     <div class="mine">         {{count}} -{{t}} // 10 -100     </div> </template>  <script lang="ts"> import { defineComponent, reactive, ref, toRefs } from 'vue'; export default defineComponent({   setup() {     const count = ref<number>(10)     const obj = reactive({       t: 100,       count     })     // 通過reactive 來獲取ref 的值時,不需要使用.value屬性     console.log(obj.count);     return {        ...toRefs(obj)     }    } }); </script>

四、isRef() 函數

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

<script lang="ts"> import { defineComponent, isRef, ref } from 'vue'; export default defineComponent({   setup(props, context) {     const name: string = 'vue'     const age = ref<number>(18)     console.log(isRef(age)); // true     console.log(isRef(name)); // false      return {       age,       name     }   } }); </script>

五、toRefs() 函數

toRefs() 函數可以將 reactive() 創建出來的響應式對象，轉換為普通的對象，只不過，這個對象上的每個屬性節點，都是 ref()  類型的響應式數據

<template>   <div class="mine">     {{name}} // test     {{age}} // 18   </div> </template>  <script lang="ts"> import { defineComponent, reactive, ref, toRefs } from 'vue'; export default defineComponent({   setup(props, context) {     let state = reactive({       name: 'test'     });      const age = ref(18)      return {       ...toRefs(state),       age     }   } }); </script>

六、computed()

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

6.1 創建只讀的計算屬性

import { computed, defineComponent, ref } from 'vue'; export default defineComponent({   setup(props, context) {     const age = ref(18)      // 根據 age 的值，創建一個響應式的計算屬性 readOnlyAge,它會根據依賴的 ref 自動計算并返回一個新的 ref     const readOnlyAge = computed(() => age.value++) // 19      return {       age,       readOnlyAge     }   } }); </script>

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

<script lang="ts"> import { computed, defineComponent, ref } from 'vue'; export default defineComponent({   setup(props, context) {     const age = ref<number>(18)      const computedAge = computed({       get: () => age.value + 1,       set: value => age.value + value     })     // 為計算屬性賦值的操作，會觸發 set 函數, 觸發 set 函數后，age 的值會被更新     age.value = 100     return {       age,       computedAge     }   } }); </script>

七、 watch() 函數

watch 函數用來偵聽特定的數據源，并在回調函數中執行副作用。默認情況是懶執行的，也就是說僅在偵聽的源數據變更時才執行回調。

7.1 監聽用 reactive 聲明的數據源

<script lang="ts"> import { computed, defineComponent, reactive, toRefs, watch } from 'vue'; interface Person {   name: string,   age: number } export default defineComponent({   setup(props, context) {     const state = reactive<Person>({ name: 'vue', age: 10 })      watch(       () => state.age,       (age, preAge) => {         console.log(age); // 100         console.log(preAge); // 10       }     )     // 修改age 時會觸發watch 的回調, 打印變更前后的值     state.age = 100     return {       ...toRefs(state)     }   } }); </script>

7.2 監聽用 ref 聲明的數據源

<script lang="ts"> import { defineComponent, ref, watch } from 'vue'; interface Person {   name: string,   age: number } export default defineComponent({   setup(props, context) {     const age = ref<number>(10);      watch(age, () => console.log(age.value)); // 100      // 修改age 時會觸發watch 的回調, 打印變更后的值     age.value = 100     return {       age     }   } }); </script>

7.3 同時監聽多個值

<script lang="ts"> import { computed, defineComponent, reactive, toRefs, watch } from 'vue'; interface Person {   name: string,   age: number } export default defineComponent({   setup(props, context) {     const state = reactive<Person>({ name: 'vue', age: 10 })      watch(       [() => state.age, () => state.name],       ([newName, newAge], [oldName, oldAge]) => {         console.log(newName);         console.log(newAge);          console.log(oldName);         console.log(oldAge);       }     )     // 修改age 時會觸發watch 的回調, 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執行watch的回調     state.age = 100     state.name = 'vue3'     return {       ...toRefs(state)     }   } }); </script>

7.4 stop 停止監聽

在 setup() 函數內創建的 watch 監視，會在當前組件被銷毀的時候自動停止。如果想要明確地停止某個監視，可以調用 watch()  函數的返回值即可，語法如下：

<script lang="ts"> import { set } from 'lodash'; import { computed, defineComponent, reactive, toRefs, watch } from 'vue'; interface Person {   name: string,   age: number } export default defineComponent({   setup(props, context) {     const state = reactive<Person>({ name: 'vue', age: 10 })      const stop =  watch(       [() => state.age, () => state.name],       ([newName, newAge], [oldName, oldAge]) => {         console.log(newName);         console.log(newAge);          console.log(oldName);         console.log(oldAge);       }     )     // 修改age 時會觸發watch 的回調, 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執行watch的回調     state.age = 100     state.name = 'vue3'      setTimeout(()=> {       stop()       // 此時修改時, 不會觸發watch 回調       state.age = 1000       state.name = 'vue3-'     }, 1000) // 1秒之后講取消watch的監聽      return {       ...toRefs(state)     }   } }); </script>

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

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

<script lang="ts"> import { set } from 'lodash'; import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated } from 'vue'; export default defineComponent({   setup(props, context) {     onBeforeMount(()=> {       console.log('beformounted!')     })     onMounted(() => {       console.log('mounted!')     })      onBeforeUpdate(()=> {       console.log('beforupdated!')     })     onUpdated(() => {       console.log('updated!')     })      onBeforeUnmount(()=> {       console.log('beforunmounted!')     })     onUnmounted(() => {       console.log('unmounted!')     })      onErrorCaptured(()=> {       console.log('errorCaptured!')     })      return {}   } }); </script>

九、Template refs

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

• 還是跟往常一樣，在 html 中寫入 ref 的名稱

• 在steup 中定義一個 ref

• steup 中返回 ref的實例

• onMounted 中可以得到 ref的RefImpl的對象, 通過.value 獲取真實dom

<template>   <!--第一步：還是跟往常一樣，在 html 中寫入 ref 的名稱-->   <div class="mine" ref="elmRefs">     <span>1111</span>   </div> </template>  <script lang="ts"> import { set } from 'lodash'; import { defineComponent, onMounted, ref } from 'vue'; export default defineComponent({   setup(props, context) {     // 獲取真實dom     const elmRefs = ref<null | HTMLElement>(null);     onMounted (() => {       console.log(elmRefs.value); // 得到一個 RefImpl 的對象, 通過 .value 訪問到數據     })      return {       elmRefs     }   } }); </script>

十、vue 的全局配置

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

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

為組件渲染功能和觀察程序期間的未捕獲錯誤分配處理程序。錯誤和應用程序實例將調用處理程序

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

可以在應用程序內的任何組件實例中訪問的全局屬性，組件的屬性將具有優先權。這可以代替 Vue 2.xVue.prototype 擴展：

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

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

setup( ) {   const { ctx } = getCurrentInstance();   ctx.$http }

十一、Suspense 組件

在開始介紹 Vue 的 Suspense 組件之前，我們有必要先了解一下 React 的 Suspense 組件，因為他們的功能類似。

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

import React, { Suspense } from 'react';   const myComponent = React.lazy(() => import('./Component'));   function MyComponent() {   return (     <div>       <Suspense fallback={<div>Loading...</div>}>         <myComponent />       </Suspense>     </div>   ); }

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

import { defineAsyncComponent } from 'vue'  const AsyncComp = defineAsyncComponent(() =>   import('./components/AsyncComponent.vue') )  app.component('async-component', AsyncComp)

Vue3 也新增了 Suspense 組件:

<template>   <Suspense>     <template #default>       <my-component />     </template>     <template #fallback>       Loading ...     </template>   </Suspense> </template>  <script lang='ts'>  import { defineComponent, defineAsyncComponent } from "vue";  const MyComponent = defineAsyncComponent(() => import('./Component'));  export default defineComponent({    components: {      MyComponent    },    setup() {      return {}    } })   </script>

十二、vue 3.x 完整組件模版結構

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

<template>   <div class="mine" ref="elmRefs">     <span>{{name}}</span>     <br>     <span>{{count}}</span>     <div>       <button @click="handleClick">測試按鈕</button>     </div>      <ul>       <li v-for="item in list" :key="item.id">{{item.name}}</li>     </ul>   </div> </template>  <script lang="ts"> import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue';  interface IState {   count: 0,   name: string,   list: Array<object> }  export default defineComponent({   name: 'demo',   // 父組件傳子組件參數   props: {     name: {       type: String as PropType<null | ''>,       default: 'vue3.x'     },     list: {       type: Array as PropType<object[]>,       default: () => []     }   },   components: {     /// TODO 組件注冊   },   emits: ["emits-name"], // 為了提示作用   setup (props, context) {     console.log(props.name)     console.log(props.list)       const state = reactive<IState>({       name: 'vue 3.0 組件',       count: 0,       list: [         {           name: 'vue',           id: 1         },         {           name: 'vuex',           id: 2         }       ]     })      const a = computed(() => state.name)      onMounted(() => {      })      function handleClick () {       state.count ++       // 調用父組件的方法       context.emit('emits-name', state.count)     }      return {       ...toRefs(state),       handleClick     }   } }); </script>  <template>   <div class="mine" ref="elmRefs">     <span>{{name}}</span>     <br>     <span>{{count}}</span>     <div>       <button @click="handleClick">測試按鈕</button>     </div>      <ul>       <li v-for="item in list" :key="item.id">{{item.name}}</li>     </ul>   </div> </template>  <script lang="ts"> import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue';  interface IState {   count: 0,   name: string,   list: Array<object> }  export default defineComponent({   name: 'demo',   // 父組件傳子組件參數   props: {     name: {       type: String as PropType<null | ''>,       default: 'vue3.x'     },     list: {       type: Array as PropType<object[]>,       default: () => []     }   },   components: {     /// TODO 組件注冊   },   emits: ["emits-name"], // 為了提示作用   setup (props, context) {     console.log(props.name)     console.log(props.list)       const state = reactive<IState>({       name: 'vue 3.0 組件',       count: 0,       list: [         {           name: 'vue',           id: 1         },         {           name: 'vuex',           id: 2         }       ]     })      const a = computed(() => state.name)      onMounted(() => {      })      function handleClick () {       state.count ++       // 調用父組件的方法       context.emit('emits-name', state.count)     }      return {       ...toRefs(state),       handleClick     }   } }); </script>

感謝各位的閱讀，以上就是“如何快速上手Vue3”的內容了，經過本文的學習后，相信大家對如何快速上手Vue3這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！