【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 serve2.使用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中的數組的某個元素是無效的）
3.模擬vue3實現響應式
vue3中通過Proxy（代理）和Reflect（反射）來實現響應式
<script>let person = {name: 'trytou',age: 20}const p = new Proxy(person, {get(target, prop) {return Reflect.get(target,prop)},set(target, prop, value) {return Reflect.set(target,prop,value)},deleteProperty(target,prop){return Reflect.deleteProperty(target,prop)}})p.name='Chan'console.log(p);</script>4.computed函數
- computed接收一個函數或者一個對象，需要引入才能使用
5.watch函數
watch函數中有較多的坑，監視reactive定義的數據時要注意
- 情況一：監視ref定義的一個響應式數據
- 情況二：監視ref定義的多個響應式數據
-
情況三：監視reactive定義的一個響應式數據 (默認deep:true,且無法設置為false)
-
情況四：監視reactive定義的某個響應式數據中的某個屬性
-
情況五：監視reactive定義的某一個響應式數據中的多個屬性
-
情況六：監視reactive定義的深層次的響應式數據
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
三.其它 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年后的自己：免费的午餐最贵