當前位置：首頁 > 前端技术 > vue >内容正文

vue

【Vue】菜头学前端 - vue3学习笔记

發布時間：2023/12/14 vue 38 豆豆

生活随笔收集整理的這篇文章主要介紹了【Vue】菜头学前端 - vue3学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡介

一、創建項目

1.使用vue-clli創建

2.使用Vite創建

二、Composition API（組合式API）

1.setup函數

2.ref函數和reactive函數

1.ref函數

2.reactive函數

3.模擬vue3實現響應式

4.computed函數

5.watch函數

6.watchEffect函數

7.生命周期

8.自定義hook函數

9.toRef 和 toRefs

三.其它 Composition API

1. shallowReactive?和?shallowRef

2.readonly 和 shallowReadonly

3.toRaw 和 markRaw

4.customRef

5.provide 和 inject

6.響應式數據的判斷

四.新的組件

1.Fragment

2.Teleport

參考

簡介

本文基于b站尚硅谷vue教程尚硅谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通_嗶哩嗶哩_bilibili編寫，以作個人學習記錄。

一、創建項目

1.使用vue-clli創建

## 查看@vue/cli版本，確保@vue/cli版本在4.5.0以上 vue -V ## 安裝或升級@vue/cli npm install -g @vue/cli ## 創建項目選擇vue3 vue create projectName ## 進入項目所在文件夾，啟動項目 npm run serve

2.使用Vite創建

## 創建工程 npm init @vitejs/app projectName ## 進入工程目錄 cd projectName ## 安裝依賴 npm install ## 運行項目 npm run dev

二、Composition API（組合式API）

1.setup函數

①在vue3中數據、方法等均要配置在setup中

②setup有兩種返回值：

????????I.返回一個對象，包含需要使用的數據和方法，模板能直接使用這些數據和方法

????????II.返回一個渲染函數（較少使用）

③setup()早于beforeCreate()執行，其有兩個參數：(props,context)

props：值為對象，包含父組件傳過來的，且本組件有接收（同vue2中接收props）的屬性
context：值為對象，包含attrs、slots、emit
- attrs等同于this.$attrs，用以獲取父組件傳遞的但本組件未在props中聲明的屬性
- slots等同于this.$slots，用以獲取插槽
- emit等同于this.$emit，用以觸發自定義事件（自定義事件需要在新的配置項emits聲明，否則控制臺會報警告）

*注意點：

? ? ? ? 1.盡量不要與vue2混用，vue2可以訪問到setup的數據、方法，反之則不行

? ? ? ? 2.setup不能是async函數，否則返回的是一個promise，模板無法獲取return的對象中的屬性(后期也可以返回一個Promise實例，但需要Surspense和異步組件的配合)

<template><h4>姓名：{{ name }}</h4><h4>學校：{{ info.school }}</h4><h4>年級：{{ info.grade }}</h4><h4>愛好：{{ hobbies }}</h4><button @click="sayHello">點我</button> </template><script> export default {name: "Setup",setup() {let name = "trytou";let hobbies = ["抽煙", "喝酒", "燙頭"];let info = {school: "菜頭市第一小學",grade: "一年級",};function sayHello(){alert("hello")}return{name,info,hobbies, sayHello,}}, }; </script>

2.ref函數和reactive函數

ref函數和reactive函數都可以定義一個響應式的數據，需要引入才能使用

使用方式：const xx=ref(value) 或 const xx=reactive(value)

1.ref函數

ref函數既可以接收基本數據類型，也可以接收引用數據類型（數組或對象）
對于基本數據類型，響應式依然時通過Object.defineProperty()實現
對于對象類型數據，響應式則靠vue3中的一個新函數——reactive函數實現
在js中操作ref定義的響應式數據時要通過xxx.value獲取，模板中則不需要

2.reactive函數

reactive函數只能接收引用數據類型的數據（數組或對象）
reactive函數返回一個proxy對象
reactive函數定義的數據是深層次的，其內部的屬性可以直接修改，（在vue2中通過直接賦值的方式來修改data中的數組的某個元素是無效的）

<template><h4>姓名：{{name}}</h4><h4>年齡：{{age}}</h4><h4>學校：{{info.school}}</h4><h4>年級：{{info.grade}}</h4><h4>愛好：{{hobbies}}</h4><button @click="sayHello">點我</button><button @click="changeHobby">點我換愛好</button><button @click="changeSchool">點我換學校</button> </template><script> import { reactive, ref } from 'vue'export default {name:'Ref_Reactive',setup(){//ref函數定義一個響應式數據let name=ref('trytou')let age=ref(20)let info=reactive({school:'菜頭市第一小學',grade:'一年級'})let hobbies=reactive(['抽煙','喝酒','燙頭'])function sayHello(){alert('hello trytou');}function changeHobby(){hobbies[0]='打球'}function changeSchool(){info.school='反斗花園幼兒園'}return{name,age,info,hobbies, sayHello,changeHobby,changeSchool}} } </script>

3.模擬vue3實現響應式

vue3中通過Proxy（代理）和Reflect（反射）來實現響應式

4.computed函數

computed接收一個函數或者一個對象，需要引入才能使用

import {computed} from 'vue' export default {name: "Computed",setup() {let person = reactive({firstName: "try",lastName:'tou',})//計算屬性-簡寫// person.fullName=computed(()=>person.name+'-'+person.age)//計算屬性-完整寫法person.fullName=computed({get(){return person.firstName+'-'+person.lastName},set(value){person.firstName=value.split('-')[0]person.lastName=value.split('-')[1]}})return{person,}}, };

5.watch函數

watch函數中有較多的坑，監視reactive定義的數據時要注意

情況一：監視ref定義的一個響應式數據

watch(num,(newValue,oldValue)=>{console.log(newValue,oldValue); })

情況二：監視ref定義的多個響應式數據

watch([num,msg],(newValue,oldValue)=>{console.log(newValue,oldValue); })

情況三：監視reactive定義的一個響應式數據 (默認deep:true,且無法設置為false)

watch(person,(newValue,oldValue)=>{//此處 oldValue == newValue , 無法獲取正常的 oldValueconsole.log(newValue,oldValue); },{deep:false})

情況四：監視reactive定義的某個響應式數據中的某個屬性

watch(()=>person.age,(newValue,oldValue)=>{console.log(newValue,oldValue); })

情況五：監視reactive定義的某一個響應式數據中的多個屬性

watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{console.log(newValue,oldValue); })

情況六：監視reactive定義的深層次的響應式數據

watch(()=>person.jobs,(newValue,oldValue)=>{console.log(newValue,oldValue); },{deep:true})//需要設置deep為true

6.watchEffect函數

watchEffect函數類似computed，但前者無需寫返回值，且不必指明監視哪個屬性

//類似computed屬性，檢測回調函數中用到的數據發生變化即會重新執行回調 watchEffect(()=>{console.log(person.age); })

7.生命周期

在vue3中有兩種使用生命周期鉤子的方式

第一種方式是通過配置對象的形式，與vue2中生命周期鉤子使用方式一致，但有兩個更換了名字：
- beforDestroy更名為beforeUnmount
- destroyed更名為unmounted
第二種方式是通過組合API的形式，除了setup之外的鉤子都應在setup內部調用，與vue2生命周期鉤子對應關系如下：
- 因為?setup?是圍繞?beforeCreate?和?created?生命周期鉤子運行的，所以不需要顯式地定義它們。
- setup()? ==>? beforeCreate() 和 created()
- onBeforeMount()? ==>? beforeMount()
- onMounted? ==>? mounted()
- onBeforeUpdate? ==>? beforeUpdate()
- onUpdated? ==>? updated()
- onBeforeUnmount()? ==>? beforeDestroy()
- onUnmounted()? ==>? destroy()()
兩種方式可以同時使用（但盡量不要這么做），組合式API的生命周期鉤子會比配置對象形式的鉤子先執行

8.自定義hook函數

hook本質上是一個函數，作用類似于mixin

在usePoint.js中定義一個hook并暴露出去

import {onMounted,onUnmounted, reactive} from 'vue';export function usePoint() {let point = reactive({x: '',y: ''})let getPoint = function (event) {point.x = event.pageXpoint.y = event.pageY}onMounted(() => {window.addEventListener('click', getPoint)})onUnmounted(() => {window.removeEventListener('click', getPoint)})return point }

在組件中引入hook便可直接使用，無需再次引入hook中引用的組合式api

<template><h4>點擊任意位置獲取當前鼠標的坐標</h4><span>X軸坐標：{{point.x}}</span><br><span>Y軸坐標：{{point.y}}</span> </template><script> import {usePoint} from '../hooks/usePoint'; export default {name:'Hook',setup(){let point=usePoint()return {point}} } </script>

9.toRef 和 toRefs

toRef 和 toRefs 都是函數，后者可以批量創建多個ref
toRef可以為一個響應式對象中的某個屬性創建一個ref，且這個ref的值會指向源響應式對象中的那個屬性
toRefs可以為一個響應式對象中的每一個最外層的屬性創建ref

<template><h4>{{person}}</h4><hr><h4>my name is {{name}}</h4><button @click="name='Chan'">rename</button><h4>salary: {{jobs.job1.salary}}k</h4><button @click="jobs.job1.salary++">漲薪</button><button @click="salary++">漲薪</button><h4>age: {{age}}</h4><button @click="age++">長大了</button> </template><script> import { reactive, toRef ,toRefs} from 'vue' export default {name:'ToRef',setup(){let person=reactive({name:'trytou',age:20,jobs:{job1:{salary:8}}})/salary的值發生變化,person.jobs.job1.salary的值也會發生變化const salary=toRef(person.jobs.job1,'salary')console.log(salary);/console.log(toRefs(person));return{person,salary,...toRefs(person)}} } </script>

三.其它 Composition API

1. shallowReactive?和?shallowRef

? ? //shallowReactive?與?reactive的區別在于shallowReactive只處理對象最外層屬性的響應式（淺響應式）

? ? let sReaPerson=shallowReactive(person)

? ? //shallowRef與ref的區別在于 shallowRef?不會將.value變成響應式(proxy)，而仍是一個普通的對象

? ? let sRefPerson=shallowRef(person)

2.readonly 和 shallowReadonly

//readonly接收一個響應式數據并使其成為只讀的（深只讀）

? ? let p1 = readonly(reactive(person));

? ? let p3 = readonly(ref(num));

//shallowReadonly接收一個響應式數據并使其成為只讀的（淺只讀）

? ? let p2 = shallowReadonly(reactive(person));

? ? let p4 = shallowReadonly(ref(num));

3.toRaw 和 markRaw

//toRaw返回reactive或readonly代理的原始對象（ref無效）

? ? console.log(toRaw(person));

? ? console.log(toRaw(pet));

//markRaw標記一個對象，使其永遠不會轉換為 proxy,返回對象本身

? ? let mr = markRaw({ age: 20 });

? ? let kid = reactive(mr);

4.customRef

創建一個自定義的 ref，并對其依賴項跟蹤和更新觸發進行顯式控制。它需要一個工廠函數，該函數接收?track?和?trigger?函數作為參數，并且應該返回一個帶有?get?和?set?的對象。

使用自定義ref實現防抖效果：

<template><input type="text" v-model="msg" /><h4>{{ msg }}</h4> </template><script> import { customRef, ref } from "@vue/reactivity"; export default {name: "CustomRef",setup() {function myRef(initValue) {let timer;return customRef((track, trigger) => {return {get() {track();return initValue;},set(newValue) {clearTimeout(timer);timer = setTimeout(() => {initValue = newValue;trigger();}, 500);},};});}let msg = myRef("hello");return {msg,};}, }; </script>

5.provide 和 inject

作用：可以用來實現祖孫組件之間的通信
在祖組件中使用provide(),后代組件使用inject()接收

祖組件

... setup(){ let msg=ref('love u')provide('msg',msg) ... }

后代組件

... setup(){let msg=inject('msg')... }

6.響應式數據的判斷

... setup(){let p1=ref(0)let p2=reactive({})let p3=readonly({})console.log(isRef(p1));//判斷一個值是否為一個 ref 對象console.log(isReactive(p2));//判斷一個對象是否是由 reactive 創建的響應式代理console.log(isReadonly(p3));//判斷一個對象是否是由 readonly 創建的只讀代理console.log(isProxy(p2));//判斷一個對象是否是由 reactive 或者 readonly 方法創建的代理console.log(isProxy(p3));} ...

四.新的組件

1.Fragment

在vue3中組件無需根標簽，內部會自動將模板中的內容包含在一個Fragment中

2.Teleport

teleport可以讓組件移動到指定位置，在下面的例子中Son組件有一個Dialog組件，如果我們想讓這個Dialog組件位于body下可以通過teleport中的to屬性來指定

祖組件

<template><div class="cur"><h3>我是祖先</h3><Child></Child></div> </template><script> import Child from './17_child.vue'; export default {name: "TeleportComponent",components:{Child} }; </script> <style> div{padding:20px } </style>

子組件

<template><div class="child"><h4>我是Child組件</h4><Son></Son></div> </template><script> import Son from './17_son.vue'; export default {name:'Child',components:{Son} } </script><style> .child{background-color: rgb(47, 145, 184); } </style>

孫組件

<template><div class="son"><h5>我是Son組件</h5><Dialog></Dialog></div> </template><script> import Dialog from './17_Dialog.vue'; export default {name:'Son',components:{Dialog},setup(){} } </script><style> .son{background: rgb(236, 80, 80); } </style>

Dialog組件

<template><button @click="isShow = true">開啟彈窗</button><teleport to="body"><div class="mask" v-if="isShow"><div class="dialog"><h3>我是彈窗</h3><button @click="isShow = false">關閉彈窗</button></div></div></teleport> </template><script> import { ref } from "vue";export default {name: "Dialog",setup() {let isShow = ref(false);return {isShow,};}, }; </script><style> .dialog {position: absolute;width: 440px;height: 300px;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;background-color: pink;z-index: 999; }.mask {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.5); } </style>

可以看到teleport包含的結構出現在<body>下

參考

尚硅谷vue3教程：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通_嗶哩嗶哩_bilibili

vue3官方文檔：Vue.js

vite官方文檔：Vite中文網

總結

以上是生活随笔為你收集整理的【Vue】菜头学前端 - vue3学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：小明爬楼梯
下一篇：写给20年后的自己：免费的午餐最贵