1. 前言
render函数其实之前工作中用的非常多,因为之前有部分项目是很多列表需要编辑,修改,等操作,都需要自己布局 ,所以用的render比较多
v3对render做了简化,,写起来更方便了
2. render
1.字符串模板的另一种选择，允许你充分利用
JavaScript的编程功能。2.
render函数的优先级高于从挂载元素template选项或内置 DOM 提取出的 HTML 模板编译渲染函数。
2.1 简要代码
组件使用
app.component('my-title', { render() { return Vue.h( 'h1', // 标签名称 this.blogTitle // 标签内容 ) }, props: { blogTitle: { type: String, required: true } } })
2.2 单文件组件使用
import {reactive,h,toRefs} from "vue"; export default { setup () { const state = reactive({ count:1 }) return {...toRefs(state)} }, //可以把 template注释掉 render(){ return h("div",{title:"渲染函数",yzs:"自定义属性也可以"},this.count) } }
2.3 分析
1.
h函数因为源码底层这个函数就叫h2.第二个参数是属性对象,属于可选的,不写也行,属性也可以自定义
3.第三个参数就是标签内容
4.
render函数和setup是同级的
2.4 嵌套
render(){ return h("div",{title:"渲染函数"},[h("h1",{title:"标题"},"是是")]) }
这个嵌套可以一直进行下去,当然一般也不会嵌套几层,结构太乱了
3. fetch 基础封装
src/config/indexjs
3.1 简要代码
export default async(url = '', data = {}, type = 'GET', method = 'fetch') => { const baseUrl = "https://xx.yzs.org" type = type.toUpperCase(); url = baseUrl + url; if (type == 'GET') { let dataStr = ''; //数据拼接字符串 Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&'; }) if (dataStr !== '') { dataStr = dataStr.substr(0, dataStr.lastIndexOf('&')); url = url + '?' + dataStr; } } if (window.fetch && method == 'fetch') { let requestConfig = { credentials: 'include', method: type, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, mode: "cors", cache: "force-cache" } if (type == 'POST') { Object.defineProperty(requestConfig, 'body', { value: JSON.stringify(data) }) } try { const response = await fetch(url, requestConfig); const responseJson = await response.json(); return responseJson } catch (error) { throw new Error(error) } } else { return new Promise((resolve, reject) => { let requestObj; if (window.XMLHttpRequest) { requestObj = new XMLHttpRequest(); } else { requestObj = new ActiveXObject; } let sendData = ''; if (type == 'POST') { sendData = JSON.stringify(data); } requestObj.open(type, url, true); requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); requestObj.send(sendData); requestObj.onreadystatechange = () => { if (requestObj.readyState == 4) { if (requestObj.status == 200) { let obj = requestObj.response if (typeof obj !== 'object') { obj = JSON.parse(obj); } resolve(obj) } else { reject(requestObj) } } } }) } }
4. fecth 接口封装
src/api/login.js
4.1 登录接口封装
import fetch from "@/config" /** * 账号密码登录 */ export const accountLogin = (username, password, captcha_code) => fetch('/v2/login', {username, password, captcha_code}, 'POST');
4.2 列表封装
export const getList= () => fetch('/v1/list', { type: 1 });
5. 接口使用
5.1 引入
import { reactive, toRefs ,onMounted} from 'vue' import {cityGuess, getList} from '@/api/getData'
5.2 setup核心
export default { setup () { const state = reactive({ count: 0, name:"" }) onMounted(() => { //列表 getList().then(res => { console.log("REs-----------:",res) state.name = res.name }) accountLogin("用户名","密码","验证码").then(res => { console.log("REs-----------:",res) }).catch(err=>{ console.log("err:",err) }) }) return { ...toRefs(state), } } }
6. 模板
<template> <div> <h1> 登录 fetch</h1> <h1>{{name}}</h1> </div> </template>
