几个你不知道的技巧助你写出更优雅的vue.js代码
1. watch 与 computed 的巧妙结合如上图,一个简单的列表页面。 你可能会这么做: 如果参数比较多,比如上图
可能会是这样: 不过这么写,明显有问题,主要是 当然这么写,需要在模板里面每个参数change的地方绑定事件,并传递参数值,比如分页change时: 相比上面的各种watch,代码明显少了很多,但是还有一个问题,那就是要在template的很多地方绑定 最后,当然是使用我们重点推荐的 通过增加一个computed属性,watch这个属性并设置immediate为true,无需再手动绑定事件,相比之上的方法都要简洁。当然,缺点就是对性能稍微有些影响,不过问题不大。 2. 使用mixin提取公共部分很多列表页其实使用的很多属性都是一样的,比如
这些公共的部分其实可以通过mixin来提取出来 在要用到的页面 3. 自动注册全局组件正常情况下,我们需要使用一个我们自己封装的组件时,需要先引入,再注册,最后才能在template模板中使用。 当有多个页面需要用到这些组件时,那么就需要在每个需要的页面重复这些步骤。 为了简化这些步骤,可以考虑把这些组件作为全局组件来使用,这样每个页面需要时,就可以直接使用了。 不过还有一个问题,那就是需要我们手动的全局注册。 Vue.component('component1',Component1)
Vue.component('component2',Component2) Vue.component('component3',Component3) 当组件多了以后,手动注册也变得繁琐起来,可以通过 requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName) Vue.component(componentName,componentConfig.default || componentConfig) 4. 自动注册vuex模块之前我们是这么注册vuex模块的 import alarm from './modules/alarm'
import history from './modules/history' import factory from './modules/factory' import contact from './modules/contact' import company from './modules/company'; import deviceManage from './modules/device-manage' import deviceModel from './modules/device-model' import deviceActivation from './modules/device-activation' import user from './modules/user' import role from './modules/role' import setAlarm from './modules/setAlarm' import factoryMode from "./modules/factoryMode"; import ScreenDeviceWatch from './modules/screen-device-watch' import ScreenDeviceForecast from './modules/screen-device-forecast' export default { / index.js / import state from './state' Vue.use(Vuex) 可以发现每个模块都要我们手动导入,然后加入到module里面,如此重复。当模块不多还好,假如项目大了,有50个模块,那就得要做很多重复的工作。 跟注册组件一样,我们还是利用 requireModule.keys().forEach(fileName => {
const moduleName = fileName.replace(/(./|.js)/g,'') modules[moduleName] = { namespaced: true,...requireModule(fileName).default } }) export default modules / index.js / Vue.use(Vuex) 这篇关于如何写出更优雅的vue.js代码的文章就介绍到这了,希望大家以后多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 在vue中给列表中的奇数行添加class的实现方法
- xml – xsl中的计数器:for-each循环
- c# – MVC4 Ajax.BeginForm不替换UpdateTargetId
- 给flex单列加<a>链接效果 (mx:DataGridColumn mx:Advance
- 如何Stuff和’For Xml Path’在Sql Server中工作
- 为什么我的XSD文件无法使用XML :: LibXML进行解析?
- ruby – 有没有更好的方法来查找数组中最小元素的位置?
- android – Flutter中自签名证书上的SSL握手错误
- nosql – 最大的已知Neo4j集群是什么?
- Oracle数据库并行查询出错的解决方法