ApiCloud+Vue.js浅扩展第一弹

Posted 2021-03-30 缪斯屋

Vue.js作为现在最火爆的前端框架之一，以其简洁的代码风格和平滑的学习曲线深受前端开发者的青睐，开发者能够更加注重数据而不是繁琐的dom处理，极大的提高了开发效率。

APICloud使用web技术开发APP，快速高效，生态也十分健全，一套代码，跨平台运行，这无疑扩展了前端开发者的技术栈，使前端开发者也能够进行高逼格的APP开发。

很多时候，我们更应该考虑的是webApp的性能问题，尽量避免加载很多很重的js库，对WebAPP来说，性能上是无法达到原生APP的水准的，这就更需要我们对每个view层尽力去优化。如何提高网页性能其实和开发WebAPP是差不多的，应该尽量避免引入很多的js插件，优化DOM结构，APICloud官方提供的api.js已经能满足很多的需求，所以我个人并不提倡使用jQuery，jQuery不仅体积大，而且内部大多是封装了原生js的写法，从写法来说是简单了很多，但是本质上依旧是“多此一举”的做法。

作为开发者，在不断探求更深层的技术外，我们更应该关心的是提高自己的开发效率和水平，也许你觉得jQuery会给你带来很多便捷，但是Vue.js会是你更好的选择。

以数据为驱动的前端开发。

Vue.js的双向绑定和钩子函数，加上APICloud提供的原生接口，可以让开发者把更多的精力放在数据上，通过数据驱动页面。在此之前，我们首先应该清楚的是Vue.js的钩子函数都是在什么阶段触发的：

beforeCreate和created函数是实例化Vue的阶段；

beforeMount和mounted是DOM挂载阶段；

beforeUpdate和updated发生在数据更新阶段；

beforeDestory和destoryed发生在组件销毁阶段。

vue.js源码中搜索function callHook，可以发现Vue的钩子函数都是通过callHook函数触发的，callHook接收两个参数，第一个参数是Vue的实例，第二个参数是触发的钩子函数名称。知道了这一点，那么我们就可动手做一些扩展了。

1. 首次加载我们该注意什么？

首次加载，我们应该清晰自己的设计理念，是先拿数据再跳转，还是先跳转再拿数据，这涉及到我们在created函数中做什么。很多不会立即使用的逻辑代码或者扩展Vue的代码，尽量放在created阶段来做，具体请参考页面渲染流程和钩子函数触发阶段。代码中的数据绑定应优先使用v-html或者v-text来处理，避免使用{{value}}的形式，尽管可以使用v-cloak取消闪烁，但尽量避免把简单的东西复杂化。

2. 最需要的是什么内容？

if(hook === 'beforCreate'){    vm.indexUrl = api.loadSecureValue({        sync: true,        key: 'URL'    });}

3. 最常用的是什么数据？

在一个openWin或者openFrame时，我们往往通过pageParam传入一些数据，而往往这类数据是新窗口打开时就是去使用的数据，所以我们继续扩展beforeCreate来自动获取传入的参数，这样在created函数中，就可以通过this.Param获取到传入的参数。

if(hook === 'beforCreate'){ vm.indexUrl = api.loadSecureValue({ sync: true, key: 'URL' }); vm.Param = api.pageParam}

4. 最常用的是什么组件？

最常用的要数loading了，在Vue源码中添加两个方法，一个是创建并挂载至页面的DOM结构setLoadingUI( )，一个是控制loading显示隐藏的showLoading( Type:Boolean )，并将showLoading挂载到vm上，也就是Vue实例。因为操作DOM是昂贵的，所以在最开始为了页面性能，在beforMount阶段执行setLoadingUI( )，如果页面一开始就要显示loading，可以在mounted中执行函数，而在mounted之后则可以随时使用this.showLoading(true/false)调用loading组件。

//创建loadingUI节点并添加到DOM中function setLoadingUI(){  var loadingDomTmp = `你创建的loading dom节点 id="loadingDom"`  $api.append(document.body,loadingDomTmp);}
//控制loadingUI的显示隐藏function showLoading(stu){ if(stu){ $api.css($api.byId('loadingDom'),'display:flex');  }else{ $api.css($api.byId('loadingDom'),'display:flex');}
//方法绑定到vmfunction callHook(vm,hook){  if(hook === 'beforeMount'){    setLoadingUI()    vm.showLoading = showLoading  }}

以上Vue+APICloud的浅集成第一步就算是结束了，之后还需要处理更多的数据逻辑，这些会在以后的开发中慢慢总结出经验，包括Vue.js中一些无用的代码(仅是与APICloud搭配的不必要代码)，比如判断运行环境啊之类的，很多都是优化的地方。