1. 前言
v3事件这块变化不大但是新增了 单值响应式相关内容
2. 事件 -toRefs
2.1 模板
<p>转化:{{count}}</p> <button @click="add">修改</button>
2.2 导入相关
import { reactive, ref, toRefs, onMounted } from 'vue'
2.3 添加事件 toRefs
setup() { // 响应式对象 const state = reactive({ count: 0, }) //*****************************自定义函数 */ // 点击事件 const add = (event) => { state.count++ } return { ...toRefs(state), add } }
1.注意这些
state和自定义函数都是直接写在setup里面的2.上节课说
state不能使用...展开会破坏结构,在模板使用的时候每次都会多加1层,比较麻烦3.所以使用
toRefs不会破坏内部结构,使用的时候直接使用就行
3. ref 单值响应式
只针对一个值
3.1 简要代码
const anthorCounter = ref(1) return { anthorCounter, ...toRefs(state), add }
返回的时候 直接返回就行
3.2 使用
<p>单值响应式:{{anthorCounter}}</p>
4. onMounted
直接写到 setUp里面
4.1 基本代码
// 响应式对象 const state = reactive({ count: 0, msg: "提示" }) //*****************************自定义函数 */ // 点击事件 const add = (event) => { console.log("-------", event) state.count++ console.log("state", state) } // Ref类型 // 单值响应式 可以直接用 const anthorCounter = ref(1) // ******************* 生命周期 钩子 onMounted(() => { console.log("mounted 挂载的时候执行") fetch("https://xx.yzs.org/v1/?type=1").then(res => { console.log("res 拦截:",res.text()) }).then(res=>{ console.log("res:",res) state.msg = "成功" //这点可以看文档 单值响应式 必须 加 value anthorCounter.value = 10 }).catch(err=>{ console.log("错误信息:",err) }).finally(()=>{ console.log("完成:") }) }) // toRefs 全部转换 return { anthorCounter, ...toRefs(state), add }
4.2 分析
1.单值响应式 ref文档 必须 加 value
anthorCounter.value = 102.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 挂载的时候执行") myFetch.fetchGet("https://xx.yzs.org/v1", { type: "1" }).then(res => { singState.name = res.name console.log(res); }).catch(err => { console.log(err); })
