好看的網頁千篇一律，有趣的代碼萬里挑一。
今晚跨年了，祝大家2022心想事成！萬事如意！
這篇博客的關鍵字：
ref和reactive\腳手架\
這兩個是全新的組合式API
新建一個index.html,畫個盒子，簡單設計一下，對
<div id="app">
<h4>姓名：{{name}}</h4>
<h4>學生：{{stu}}</h4>
<button @click="updateName">修改姓名</button>
<button @click="updateStu">修改學生</button>
</div>
引入vue3
script中敲碼，看一看vue2和vue3的區別
let {ref,reactive} = Vue
Vue.createApp({
setup() {
let name = ref('張三')
let updateName = ()=>{
name.value = '張杰'
}
/* let stu = ref({
name:'李四',
age:20
})
let updateStu = ()=>{
// 注意：修改ref對象的值，每次都要先點value
stu.value.name = '李明'
stu.value.age = 30
} */
// reactive組合式API方法，根據源對象返回一個代理對象(Proxy對象)
let stu = reactive({
name:'李四',
age:20
})
let updateStu = ()=>{
// Proxy對象，不需要先點value
stu.name = '李明'
stu.age = 30
}
return {
name,
updateName,
stu,
updateStu
}
}
}).mount('#app')
Vue-Cli
Vue CLI 4.x以上，Node.js版本 8.9以上
npm install -g @vue/cli
# OR
yarn global add @vue/cli
# 查看版本
vue --version
# 創建項目
vue create hello-world
# 運行
npm run serve
main.js
// vue2
/* import Vue from 'vue'
import App from './App.vue'
new Vue({
render:h=>h(App)
}).$mount("#app") */
// vue3
// 從vue中導入createApp方法，通過這個方法，創建vue實例
import { createApp } from 'vue'
// 導入App組件
import App from './App.vue'
// 通過createApp方法創建一個vue實例，渲染App組件，并將結果掛載到#app容器中。
createApp(App).mount('#app')
Vite
Vite 需要 Node.js版本 12.0以上
這是尤雨溪開發出的最新的一個框架
感興趣可以看看官網
vite
計算屬性
<h2>計算屬性</h2>
<div>姓：<input type="text" v-model="firstName">名：<input type="text" v-model="lastName"></div>
<div>姓名：{{fullName}}<input type="text" v-model="fullName"></div>
// 在Vue3中，定義計算屬性，需要引入computed組合式API
import {ref,computed} from 'vue'
export default {
// Vue2中的計算屬性
// 數據
/* data() {
return {
firstName:'張',
lastName:'杰'
}
},
// 計算屬性
computed:{
// 只讀的計算屬性
// fullName(){
// return this.firstName+'.'+this.lastName
// }
// 讀寫計算屬性
fullName:{
//返回計算機屬性的結果
get(){
return this.firstName+'.'+this.lastName
},
//修改計算屬性的值
set(val){
let arr = val.split('.')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
} */
// Vue3中的計算屬性
setup() {
let firstName = ref('張')
let lastName = ref('杰')
//computed()函數的參數是一個回調函數，回調函數的返回值，就是計算屬性的返回值
// 定義只讀的計算屬性
// let fullName = computed(()=>{
// return firstName.value + '.' + lastName.value
// })
// 定義讀寫計算屬性
let fullName = computed({
get(){
return firstName.value + '.' + lastName.value
},
set(val){
let arr = val.split('.')
firstName.value = arr[0]
lastName.value = arr[1]
}
})
return{
firstName,
lastName,
fullName
}
}
};
偵聽器
偵聽器的變化比較大，也很出彩。
大家都知道watch是十分耗性能的一件事，一旦開啟深度監聽，所有數據都要監聽都要變化。vue3在這里就更加的細致，把監聽的數據更加準確。還推出了watchEffect讓監聽數據更加方便。
watchEffect監聽器，只有一個回調函數參數，并且沒有參數
特點：
1.默認會執行一次
2.不需要明確監視誰，回調函數里面用到了誰，誰變了，就會重新執行回調函數。
<h2>偵聽器</h2>
<div>薪資：{{money}}
<button @click="money+=1000">加薪</button>
</div>
<div>學生：{{stu}}
<button @click="stu.name='李四',stu.age=25">修改學生</button>
<button @click="stu.car.name='寶馬',stu.car.price=40">學生換車</button>
</div>
// 引入組合式API watch 和 watchEffect
import {ref,reactive, watch, watchEffect} from 'vue'
export default {
// Vue2中的偵聽器
/* //數據
data() {
return {
money:10000,
stu:{
name:'張三',
age:20,
car:{
name:'奔馳',
price:50
}
}
}
},
//偵聽器
watch:{
//根據數據的名稱定義一個方法，用于該方法去偵聽該屬性值是否發生變化（參數1是新值，參數2是舊值）
// 注意：默認情況下，偵聽器一上來不會立刻執行，必須要偵聽到值重新發生變化后，才執行。
// money(nval,oval){
// console.log(nval,oval);
// }
// 完整寫法，偵聽器定義成一個對象
money:{
//表示偵聽器默認執行一次
immediate:true,
//定義偵聽器的方法
handler(nval,oval){
console.log(nval,oval);
}
},
// 監聽學生數據，注意：只有整個學生對象變化了才會監聽到，如果只是修改對象身上的屬性，監聽不到。
// stu(nval,oval){
// console.log(nval,oval);
// }
// 解決方案：監聽器改成一個對象
stu:{
//表示偵聽器開啟深度監視
deep:true,
handler(nval,oval){
console.log(nval,oval);
}
}
} */
// Vue3中的偵聽器
setup() {
let money = ref(10000)
let stu = reactive({
name:'張三',
age:20,
car:{
name:'奔馳',
price:50
}
})
// watch函數有三個參數：1.偵聽誰，2.回調函數，3.配置對象(可以省略)
// 簡單用法：一上來沒有立刻執行
// watch(money,(nval,oval)=>{
// console.log(nval,oval);
// })
// 完整用法：加上第三個參數，配置對象
watch(money,(nval,oval)=>{
console.log(nval,oval);
},{
//立刻執行
immediate:true,
})
// 監視reactive的數據，默認就開啟深度監視，并且無法關閉
// watch(stu,(nval,oval)=>{
// console.log(nval,oval);
// })
// 對于reactive的數據，可以采用監視部分屬性
watch(()=>stu.name,(nval,oval)=>{
console.log(nval,oval);
})
// 如果監視的是reactive里面的對象屬性，默認是不開啟深度監視的，需要手動開啟
watch(()=>stu.car,(nval,oval)=>{
console.log(nval,oval);
},{
deep:true
})
//watchEffect監聽器，只有一個回調函數參數，并且沒有參數
// 特點：
// 1.默認會執行一次
// 2.不需要明確監視誰，回調函數里面用到了誰，誰變了，就會重新執行回調函數。
watchEffect(()=>{
console.log('我是watchEffect');
let m = money.value
let name = stu.name
})
return{
money,
stu
}
}
};
過濾器
vue2中的過濾器很雞肋，vue3中直接拋棄了，過濾功能在method中實現。
<h2>過濾器</h2>
<div>薪資：{{toFixed2(money)}}</div>
<div>薪資：{{toFixed2Money}}</div>
export default {
data() {
return {
money:10000.12345
}
},
// 注意：在Vue2中可以定義過濾器，但是在Vue3中已經取消了過濾器。
/* filters:{
toFixed2(val){
return val.toFixed(2)
}
} */
// Vue3推薦我們使用方法 或 計算屬性的方式，實現之前過濾器的效果。
methods: {
toFixed2(val){
return val.toFixed(2)
}
},
computed:{
toFixed2Money(){
return this.money.toFixed(2)
}
}
};
響應式
通常情況下：
1.基本類型的數據，選擇用ref定義
2.引用類型的數據，選擇用reactive定義
<h2>響應式</h2>
<div>薪資：{{money}} <button @click="updateMoney">漲薪</button></div>
<div>汽車：{{car}} <button @click="updateCar">換車</button></div>
<div>學生：{{stu}} <button @click="updateStu">修改學生</button></div>
//Vue3中的所有組合式API，都要采用按需引入的方式導入
import {ref,reactive} from 'vue'
export default {
//setup是所有組合式API的入口
setup() {
//使用ref定義基本類型數據
let money = ref(10000)
let updateMoney = ()=>{
money.value += 1000
}
//使用ref定義引用類型數據
// ref方法，返回的是ref對象，ref對象的value屬性是一個代理對象(Proxy)
let car = ref({
name:'奔馳',
price:'50W'
})
let updateCar = ()=>{
// 注意：這里每次修改數據時，必須要先.value再.具體的屬性
car.value.name = '寶馬',
car.value.price = '40W'
}
// 注意：reactive只能定義引用類型（對象和數組）
// reactive方法，直接返回一個代理對象(Proxy)
let stu = reactive({
name:'張三',
age:20
})
let updateStu = ()=>{
stu.name = '李四'
stu.age = 25
}
// 總結：通常情況下：
// 1.基本類型的數據，選擇用ref定義
// 2.引用類型的數據，選擇用reactive定義
//setup方法里面返回出去的成員，在模板可以使用
return{
money,
updateMoney,
car,
updateCar,
stu,
updateStu
}
}
}
fragment組件
在vue3的模板中，不再需要根標簽，它內部有一個fragment的組件作為模板的根標簽
vue3中同類型的數據和方法放一起了
let 把數據和方法都變成了變量
