1. 前言
v3事件這塊變化不大
但是新增了 單值響應(yīng)式相關(guān)內(nèi)容
2. 事件 -toRefs
2.1 模板
<p>轉(zhuǎn)化:{{count}}</p>
<button @click="add">修改</button>
2.2 導(dǎo)入相關(guān)
import {
reactive,
ref,
toRefs,
onMounted
} from 'vue'
2.3 添加事件 toRefs
setup() {
// 響應(yīng)式對(duì)象
const state = reactive({
count: 0,
})
//*****************************自定義函數(shù) */
// 點(diǎn)擊事件
const add = (event) => {
state.count++
}
return {
...toRefs(state),
add
}
}
1.注意這些
state和自定義函數(shù)都是直接寫在setup里面的
2.上節(jié)課說(shuō)state不能使用...展開(kāi)會(huì)破壞結(jié)構(gòu),在模板使用的時(shí)候每次都會(huì)多加1層,比較麻煩
3.所以使用toRefs不會(huì)破壞內(nèi)部結(jié)構(gòu),使用的時(shí)候直接使用就行
3. ref 單值響應(yīng)式
只針對(duì)一個(gè)值
3.1 簡(jiǎn)要代碼
const anthorCounter = ref(1)
return {
anthorCounter,
...toRefs(state),
add
}
返回的時(shí)候 直接返回就行
3.2 使用
<p>單值響應(yīng)式:{{anthorCounter}}</p>
4. onMounted
直接寫到 setUp里面
4.1 基本代碼
// 響應(yīng)式對(duì)象
const state = reactive({
count: 0,
msg: "提示"
})
//*****************************自定義函數(shù) */
// 點(diǎn)擊事件
const add = (event) => {
console.log("-------", event)
state.count++
console.log("state", state)
}
// Ref類型
// 單值響應(yīng)式 可以直接用
const anthorCounter = ref(1)
// ******************* 生命周期 鉤子
onMounted(() => {
console.log("mounted 掛載的時(shí)候執(zhí)行")
fetch("https://xx.yzs.org/v1/?type=1").then(res => {
console.log("res 攔截:",res.text())
}).then(res=>{
console.log("res:",res)
state.msg = "成功"
//這點(diǎn)可以看文檔 單值響應(yīng)式 必須 加 value
anthorCounter.value = 10
}).catch(err=>{
console.log("錯(cuò)誤信息:",err)
}).finally(()=>{
console.log("完成:")
})
})
// toRefs 全部轉(zhuǎn)換
return {
anthorCounter,
...toRefs(state),
add
}
4.2 分析
1.單值響應(yīng)式 ref文檔 必須 加 value
anthorCounter.value = 10
2.fetch用法
3.鉤子也是寫在setUp里面
4.3 fetch封裝
src/api/fetch.js
const fetchGet = function(url, params) {
let list = [];
for (let key in params) {
let str = `${key}=${params[key]}`
list.push(str);
}
const data = list.join('&');
let allUrl = `${url}?${data}`;
// debugger
return fetch(allUrl).then(res => {
return res.json();
}).catch(err => {
console.log(err);
});
};
const fetchPost = function(url, params) {
let formData = new FormData();
for (let key in params) {
formData.append(key, params[key])
};
return fetch(url, {
body: formData,
method: 'POST'
}).then(res => {
return res.json();
}).catch(err => {
console.log(err);
})
};
const fetchAll = function(url, params, method='GET') {
if (method === 'GET' || method === 'get') {
return fetchGet(url, params);
}
return fetchPost(url, params);
}
export default {
fetchGet,
fetchPost,
fetchAll
}
4.4 fetch使用
引入
import myFetch from '@/api/fetch.js';
使用
onMounted(() => {
console.log("mounted 掛載的時(shí)候執(zhí)行")
myFetch.fetchGet("https://xx.yzs.org/v1", {
type: "1"
}).then(res => {
singState.name = res.name
console.log(res);
}).catch(err => {
console.log(err);
})
