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函数因为源码底层这个函数就叫h
2.第二个参数是属性对象,属于可选的,不写也行,属性也可以自定义
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. 模板
登录 fetch
{{name}}