基于Vue3打造前台+中台通用响应系统的作用与实现
W整download : ukoou.com/resource/1187
如果要说Vue和其他框架的区别是什么，响应式我相信一定是排在前列的。vue2的Object.defineProperty或者是Vue3的Proxy都是深入人心的概念。实现的思路都是使用get,set，进行依赖收集和数据劫持。但两个api的使用方式方式和支持的能力上面有些区别。简单来说Proxy的功能更强大一下，所以vue3升级成这个api。
在defineProperty场景下面，这段代码执行是报错的，不能正常使用。
再回顾一下之前的另一个知识点，框架中的异常处理，为什么要处理异常呢？这也是js语言特性所导致的，js执行出现报错是阻断执行的。function f(){a.c = blur};f();console.log('hello word') 在这块代码中console.log('hello word')是不会被执行的，所以在js中需要对异常格外注意。跑远了回归正题查看下面的代码。
// 数组特性 是不支持的
const data = [1, 2, 3];try { Object.defineProperty(data, "length", { get: () => { console.log("get 触发"); }, set: () => { console.log("set 触发"); }, }); data.push(4);} catch (error) { console.warn(error);}
defineProperty的api对象属性是可以正常劫持数据，代码如下
const data1: any = {};Object.defineProperty(data1, "key", { get: () => { console.log("defineProperty get 触发"); }, set: () => { console.log("defineProperty set 触发"); },});console.log(data1.key);data1.key = 1;
在Proxy场景下面 显然场景上面的支持更佳丰富，能力更强。
const data2 = [1, 2, 3];const dataProxy = new Proxy(data2, { get: (target: any, key: string, receiver: any) => { if (key == "length") { console.log("Proxy get 数组长度变化"); } return Reflect.get(target, key, receiver); }, set: <T>(target: any, key: string, value: T, receiver: any) => { if (key == "length") { console.log("Proxy set 数组长度变化"); } Reflect.set(target, key, value, receiver); return true; },});dataProxy.push(4);
基于Vue3支付通用解决方案
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。其实很简单的，只不过是调自己后台的一个接口而已（后台根据支付宝文档，写好支付接口）。
触发支付宝支付调用后台接口，后台会返回支付宝提供的form表单，我们只要在vue里面创建新节点，将返回的form表单append进去，并提交就可以唤起支付宝支付。另在此说一下这个returnUrl, 它是支付后支付宝回调的页面。具体可以根据自身业务，后台写死或者由前端控制。
methods () { /** * 支付宝支付 */ goAlipay () { this.$loading.show() const data = { /* 自身接口所需的一些参数 */ ... amount: this.price, /* 支付后支付宝return的url */ // returnUrl: 'www.baidu.com' returnUrl: window.location.origin + window.location.pathname + '?userParams=' + this.userParams } this.$http( this.$apiSetting.alipay, data ).then(res => { this.$loading.hide() if (res.data.statusCode === '000000') { const div = document.createElement('div') /* 此处form就是后台返回接收到的数据 */ div.innerHTML = res.data.data.alipayInfo document.body.appendChild(div) document.forms[0].submit() } }, error => { this.$loading.hide() console.log(error) }) }}
