资讯专栏INFORMATION COLUMN

Vuet.js规则详解,它是你不知道的强大功能?

张率功 / 2512人阅读

摘要:事先将状态更新的规则写好,然后将规则注入到组件中,然后状态按照预订的规则来进行更新。主动型和被动型规则内置了这几种常见的规则,除了规则外,其他都是属于主动型更新规则,在达到一定的条件上会自动触发状态更新。

Vuet.js是什么?

Vuet.js是给Vue.js提供状态管理的一个工具,与vuex不同,它是一种崇尚规则定制的状态管理模式。事先将状态更新的规则写好,然后将规则注入到组件中,然后状态按照预订的规则来进行更新。
github:Vuet.js

主动型和被动型规则

Vuet.js内置了lifemanualneedonceroute这几种常见的规则,除了manual规则外,其他都是属于主动型更新规则,在达到一定的条件上会自动触发状态更新。

life

描述: 每次都会在组件的beforeCreate钩子中调用一次更新,组件销毁时在destroyed钩子,状态会被重置,恢复到初始状态
在一个父组件中,想和自己的子子组件进行通信,但是又不希望父组件销毁之后,原来的状态还在,life规则就是专门针对这种场景的,在组件销毁时,模块的状态也会随之恢复到初始状态

manual

manual规则允许将各种更新模块状态的方法集中起来管理,等待用户来手动触发对应的模块更新,比如记录用户点击一个按钮的次数:


{{ count }}

通过上面的代码,就可以得知Vuet.js是天然的支持多组件进行通信,总之它是简单的,敏捷的。manual规则默认以$模块名称将方法集合注入到组件中,使得代码在阅读方面会更友好,更通俗易懂,同时代码也会更优雅。

need

描述: 每次都会在组件的beforeCreate钩子中调用一次更新
比如有一个消息的数量,我希望每次打开消息页面的时候,消息数量都能自动更新,这种场景使用need规则就再合适不过了

once

描述: 仅第一次在组件的beforeCreate钩子中调用一次更新,之后在任何组件都不会再进行更新
比如你A、B、C三个页面,都需要选择省市区,而这些数据几乎是不可变的,所以之后就没有再必要进行更新了。once的规则就能帮你节省了不必要的请求,帮你优化程序

route

哈哈,这个篇幅有点大,等下次专门开篇文章进行讲解。

总结

vuet允许你将有规律的状态更新,封装成一种规则,从而提升你的开发效率,比如说需要定时向服务器更新消息,这也是一种规则,下次有时间,我们可以专门写这样的一个规则。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83683.html

相关文章

  • 2017-06-27 前端日报

    摘要:前端日报精选漫谈函数式编程一十年踪迹的博客前端每周清单的优势与劣势有望超越在嵌入式及物联网的应用现状进阶系列高阶组件详解一前端之路译如何充分利用控制台掘金程序猿升级攻略众成翻译中文译如何充分利用控制台掘金前端从强制开启压缩探 2017-06-27 前端日报 精选 漫谈 JS 函数式编程(一) - 十年踪迹的博客前端每周清单: Vue的优势与劣势;Node.js有望超越Java;JS在嵌...

    Eidesen 评论0 收藏0
  • Vue.js轻松实现页面后退时,还原滚动位置

    摘要:前言从发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为。其实自带的规则能够支持同时记录全局滚动条自身的滚动条,这样就能大大的提升了我们的用户体验例子源码官方 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发效率上的飙升,它就像草原,而你是野马,任你随意...

    赵连江 评论0 收藏0
  • Vue.js实现用户登录退出和e2e测试

    摘要:前言本来只是想写个实现登录退出的例子的,但是又觉得这样干货太少。哈哈,不小心被吓到了吧,其实这些都是有办法可以解决的,下次有机会,我们可以再讨论一下使用的正确姿势。 前言 本来只是想写个Vuet实现登录退出的例子的,但是又觉得这样干货太少。一个好的开源项目,少不了单元测试和e2e测试,为了保证Vuet教程的丰富性和程序的稳定性,所以我选择了写的例子即能当教程使用,也可以用于测试,丰富的...

    MycLambert 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<