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);
                })

參考資料

ref
fetch用法

初心

我所有的文章都只是基于入門，初步的了解；是自己的知識(shí)體系梳理;

如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;

共勉