讓你30分鐘快速掌握vue3教程

更新時間：2020年10月26日 10:03:40 作者：撒點料兒

這篇文章主要介紹了讓你30分鐘快速掌握vue3，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

setup()
ref()
reactive()
isRef()
toRefs()
computed()
watch()
LifeCycle Hooks(新的生命周期)
Template refs
globalProperties
Suspense

Vue2與Vue3的對比

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

一、setup 函數(shù)

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

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

props: 用來接收 props 數(shù)據(jù)
context 用來定義上下文, 上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到, 在 setup() 函數(shù)中無法訪問到 this，是個 undefined
返回值: return {}, 返回響應式數(shù)據(jù), 模版中需要使用的函數(shù)

二、reactive 函數(shù)

reactive() 函數(shù)接收一個普通對象，返回一個響應式的數(shù)據(jù)對象, 想要使用創(chuàng)建的響應式數(shù)據(jù)也很簡單，創(chuàng)建出來之后，在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() 函數(shù)

ref() 函數(shù)用來根據(jù)給定的值創(chuàng)建一個響應式的數(shù)據(jù)對象，ref() 函數(shù)調用的返回值是一個對象，這個對象上只包含一個 value 屬性, 只在setup函數(shù)內部訪問ref函數(shù)需要加.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 創(chuàng)建的響應式數(shù)據(jù)

<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() 函數(shù)

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

<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() 函數(shù)

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

<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()

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

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

import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  const age = ref(18)

  // 根據(jù) age 的值，創(chuàng)建一個響應式的計算屬性 readOnlyAge,它會根據(jù)依賴的 ref 自動計算并返回一個新的 ref
  const readOnlyAge = computed(() => age.value++) // 19

  return {
   age,
   readOnlyAge
  }
 }
});
</script>

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

<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
  })
  // 為計算屬性賦值的操作，會觸發(fā) set 函數(shù), 觸發(fā) set 函數(shù)后，age 的值會被更新
  age.value = 100
  return {
   age,
   computedAge
  }
 }
});
</script>

七、 watch() 函數(shù)

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

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

<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 時會觸發(fā)watch 的回調, 打印變更前后的值
  state.age = 100
  return {
   ...toRefs(state)
  }
 }
});
</script>

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

<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 時會觸發(fā)watch 的回調, 打印變更后的值
  age.value = 100
  return {
   age
  }
 }
});
</script>

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

<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 時會觸發(fā)watch 的回調, 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執(zhí)行watch的回調
  state.age = 100
  state.name = 'vue3'
  return {
   ...toRefs(state)
  }
 }
});
</script>

7.4 stop 停止監(jiān)聽

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

<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 時會觸發(fā)watch 的回調, 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執(zhí)行watch的回調
  state.age = 100
  state.name = 'vue3'

  setTimeout(()=> { 
   stop()
   // 此時修改時, 不會觸發(fā)watch 回調
   state.age = 1000
   state.name = 'vue3-'
  }, 1000) // 1秒之后講取消watch的監(jiān)聽
  
  return {
   ...toRefs(state)
  }
 }
});
</script>

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

新版的生命周期函數(shù)，可以按需導入到組件中，且只能在 setup() 函數(shù)中使用, 但是也可以在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 訪問到數(shù)據(jù)
  })

  return {
   elmRefs
  }
 }
});
</script>

十、vue 的全局配置

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

const app = Vue.createApp({})

app.config = {...}

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

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

可以在應用程序內的任何組件實例中訪問的全局屬性，組件的屬性將具有優(yōu)先權。這可以代替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 接受一個函數(shù)，這個函數(shù)需要動態(tài)調用 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 函數(shù)，處理動態(tài)引入（的組件）。defineAsyncComponent可以接受返回承諾的工廠函數(shù)。當您從服務器檢索到組件定義時，應該調用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',
 // 父組件傳子組件參數(shù)
 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>

vue 3 的生態(tài)

官網
源碼
vite構建器
腳手架:https://cli.vuejs.org/
vue-router-next
vuex4.0

UI 組件庫

vant2.x

Ant Design of Vue 2.x

element-plus

到此這篇關于讓你30分鐘快速掌握vue3教程的文章就介紹到這了,更多相關vue3 入門內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3
入門

vue使用自定義事件的表單輸入組件用法詳解【日期組件與貨幣組件】
這篇文章主要介紹了vue使用自定義事件的表單輸入組件用法,結合實例形式詳細分析了vue.js日期組件與貨幣組件相關操作技巧及注意事項,需要的朋友可以參考下
2020-06-06
vue組件從開發(fā)到發(fā)布的實現(xiàn)步驟
這篇文章主要介紹了vue組件從開發(fā)到發(fā)布的實現(xiàn)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
詳解vue-admin和后端(flask)分離結合的例子
本篇文章主要介紹了詳解vue-admin和后端(flask)分離結合的例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
Vue如何基于es6導入外部js文件
這篇文章主要介紹了Vue如何基于es6導入外部js文件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05
vue2.0 keep-alive最佳實踐
這篇文章主要為大家詳細介紹了vue2.0 keep-alive的最佳實踐，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
Django與Vue語法的沖突問題完美解決方法
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧
2017-12-12
vue實現(xiàn)頁面刷新動畫
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面刷新動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue3 appear 失效的問題及如何使用 appear
appear 是一個在元素默認被顯示的情況下調用進入動畫效果,使得元素在這種初次渲染情況下執(zhí)行進入動畫的屬性,最近在學習vue3的動畫時遇到appear無法生效的問題,本文給大家詳細講解,感興趣的朋友一起看看吧
2023-10-10
vue-cli3啟動服務如何自動打開瀏覽器配置
這篇文章主要介紹了vue-cli3啟動服務如何自動打開瀏覽器配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue自適應布局postcss-px2rem詳解
這篇文章主要介紹了vue自適應布局（postcss-px2rem）的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2022-05-05