一、main.js
vue2
vue3
- vue2引入的是Vue構造函數，然后通過new創建vue實例對象
- vue3引入的是createApp工廠函數，創建實例對象
- vue2通過$mount掛載實例對象，vue3通過mount掛載實例對象
二、組件template
vue2要求必須只能有一個div，vue3可以有多個div
三、setup
1. 為什么？
當組件變的很大的時候，我們要關注的東西很多，這樣維護困難，所以使用setup，每一個setup只關注某一個邏輯點
2.執行時機和參數
- props解析完成之后，組件創建(bdforeCreate)之前，執行setup
- setup中不能使用this，組件實例還未創建
- ref(基本數據類型響應化)和reactive(引用數據類型相應化)
vue3底層，把對象都變成了Proxy實例對象，對于基本數據類型就是按照Object.defineProperty里面的get和set進行數據劫持然后進行響應式，但是如果是對象類型的話，是用到的Proxy，但是vue3把它封裝在新函數reactive里，就相當于，ref中是對象，自動會調用reactive。
- 接收2個參數
- props:不能使用 ES6 解構，它會消除 prop 的響應性,應使用toRef代替
import { toRef } from 'vue'
setup(props) {
const title = toRef(props, 'title')
console.log(title.value)
}
- context
export default {
setup(props, context) {
// Attribute (非響應式對象，等同于 $attrs)
console.log(context.attrs)
// 插槽 (非響應式對象，等同于 $slots)
console.log(context.slots)
// 觸發事件 (方法，等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函數)
console.log(context.expose)
}
}
- 在生命周期鉤子前面加上 “on” 來訪問組件的生命周期鉤子，這些函數接受一個回調函數，當鉤子被組件調用時將會被執行:
setup中調用生命周期鉤子
兩個新的鉤子函數： - onRenderTracked：檢查哪個 Reactive 對象屬性或一個 ref 作為依賴被追蹤。當 Render 函數被調用時，會檢查哪個響應式數據被收集依賴。
- onRenderTriggered：當執行 Update 操作時，會檢查哪個響應式數據導致組件重新渲染。
- setup中組件自動注冊，無需手動注冊
3. 父子組件傳值
defineProps 用來接收父組件傳來的 props ; defineEmits 用來聲明觸發的事件。
//父組件
<template>
<my-son foo="????????????" @childClick="childClick" />
</template>
<script lang="ts" setup>
import MySon from "./MySon.vue";
let childClick = (e: any):void => {
console.log('from son：',e); //????????????
};
</script>
//子組件
<template>
<span @click="sonToFather">信息:{{ props.foo }}</span>
</template>
<script lang="ts" setup>
import { defineEmits, defineProps} from "vue";
const emit = defineEmits(["childClick"]); // 聲明觸發事件 childClick
const props = defineProps({ foo: String }); // 獲取props
const sonToFather = () =>{
emit('childClick' , props.foo)
}
</script>
4.子defineExpose暴露數據+父ref獲取子暴露的數據
- setup 相當于是一個閉包，數據只是默認 return 給 template 使用，不會暴露到組件外，所以父組件是無法直接通過掛載 ref 變量獲取子組件的數據。
- 如果要調用子組件的數據，需要先在子組件顯示的暴露出來，才能夠正確的拿到，這個操作，就是由 defineExpose 來完成。
子組件
<template>
<span>{{state.name}}</span>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
// defineExpose無需引入
// import { defineExpose, reactive, toRefs } from 'vue'
// 聲明state
const state = reactive({
name: 'Jerry'
})
// 將方法、變量暴露給父組件使用，父組件才可通過ref API拿到子組件暴露的數據
defineExpose({
// 解構state
...toRefs(state),
// 聲明方法
changeName () {
state.name = 'Tom'
}
})
</script>
父組件
<template>
<child ref='childRef'/>
</template>
<script setup>
import { ref, nextTick } from 'vue'
// 引入子組件
import child from './child.vue'
// 子組件ref
const childRef = ref('childRef')
// nextTick
nextTick(() => {
// 獲取子組件name
console.log(childRef.value.name)
// 執行子組件方法
childRef.value.changeName()
})
</script>
5. 使用路由信息useRoute()和useRouter()
<script setup>
import { useRoute, useRouter } from 'vue-router'
// 必須先聲明調用
const route = useRoute()
const router = useRouter()
// 路由信息
console.log(route.query)
// 路由跳轉
router.push('/newPage')
</script>
6. 使用vuex:useStore(key)
<script setup>
import { useStore } from 'vuex'
import { key } from '../store/index'
// 必須先聲明調用
const store = useStore(key)
// 獲取Vuex的state
store.state.xxx
// 觸發mutations的方法
store.commit('fnName')
// 觸發actions的方法
store.dispatch('fnName')
// 獲取Getters
store.getters.xxx
</script>
7.CSS變量注入
<template>
<span>Jerry</span>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
color: 'red'
})
</script>
<style scoped>
span {
// 使用v-bind綁定state中的變量
color: v-bind('state.color');
}
</style>
三、Vue3響應式原理
1. Vue2響應式原理：
通過Object.defineProperty的get，set來進行數據劫持，修改，從而響應式,但是它有什么缺點呢??
- 由于只有get()、set() 方式，所以只能捕獲到屬性讀取和修改操作，當 新增、刪除屬性時，捕獲不到，導致界面也不會更新。
- 直接通過下標修改數組，界面也不會自動更新。
2. vue3中的響應式，我們用到的Proxy和Reflect
- 通過Proxy（代理）: 攔截對象中任意屬性的變化, 包括：屬性值的讀寫、屬性的添加、屬性的刪除等。
- 通過Reflect（反射）: 對源對象的屬性進行操作。
const p=new Proxy(data, {
// 讀取屬性時調用
get (target, propName) {
return Reflect.get(target, propName)
},
//修改屬性或添加屬性時調用
set (target, propName, value) {
return Reflect.set(target, propName, value)
},
//刪除屬性時調用
deleteProperty (target, propName) {
return Reflect.deleteProperty(target, propName)
}
})
