资讯专栏INFORMATION COLUMN

Simon_Zhou / 1026人阅读
前言

在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面通用的数据存储容器, 将它绑定到app对象后, 就能在每一个页面都自由的操纵这个对象. 然而在实践中, 由于这个对象及其属性不具备响应式条件, 它不能直接参与业务逻辑的编写, 能力仅仅局限于数据储存. 若是在VueJS项目中, 我们可能经常使用到Vue.$watch去侦听某个数据是否发生变化, 小程序却缺乏这种能力.

在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器(下简称VX):

// 一个快速赋值的语法糖函数, 可以创建结构为 { value: a { b: { val: ""} } } 的对象
vx.set("value.a.d", { val: "" })
// 对某个属性进行侦听, 如果发生改变, 则执行相应函数(可多次watch以执行多个函数)
vx.watch("value.a.d.val", newVal => {
  console.log(`val改变为 : `, newVal)
})
value.a.d.val = 3 // val改编为 : 3

使用VX侦听器, 我们可以更加方便的管理各个页面的状态. 同时, 我们凭借watch语法, 可以更优雅地编写业务逻辑.

坐稳了, 三轮车准备启动了~ 各位评论见~

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

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

相关文章

  • vue中如何实现的自定义按钮

    摘要:在实际开发项目中,有时我们会用到自定义按钮因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就派上了大用场,我们把定义好的按钮组件导出,在全局引用,就可以在其他组件随意使用啦,这样可以大幅度 在实际开发项目中,有时我们会用到自定义按钮;因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就...

    biaoxiaoduan 评论0 收藏0
  • JavaScript代码整洁之道

    摘要:代码整洁之道整洁的代码不仅仅是让人看起来舒服,更重要的是遵循一些规范能够让你的代码更容易维护,同时降低几率。另外这不是强制的代码规范,就像原文中说的,。里式替换原则父类和子类应该可以被交换使用而不会出错。注释好的代码是自解释的。 JavaScript代码整洁之道 整洁的代码不仅仅是让人看起来舒服,更重要的是遵循一些规范能够让你的代码更容易维护,同时降低bug几率。 原文clean-c...

    liaorio 评论0 收藏0
  • 前端经典面试题总结

    摘要:接着我之前写的一篇有关前端面试题的总结,分享几道比较经典的题目第一题考点作用域,运算符栗子都会进行运算,但是最后之后输出最后一个也就是那么其实就是而且是个匿名函数,也就是属于,就输出第二和第三个都是类似的,而且作用域是都是输出最后一个其实就 接着我之前写的一篇有关前端面试题的总结,分享几道比较经典的题目: 第一题: showImg(https://segmentfault.com/im...

    BlackMass 评论0 收藏0
  • 私有云那家好-六大私有云厂商详细对比!

    对比内容UCloudStackZStackVMwareQingCloud腾讯TStack华为云Stack优势总结•基于公有云自主可控•公有云架构私有化部署•轻量化/轻运维/易用性好•政府行业可复制案例轻量化 IaaS 虚拟化平台•轻量化、产品成熟度高•业内好评度高•功能丰富、交付部署快•中小企业案例多全套虚拟产品及云平台产品•完整生态链、技术成熟•比较全面且健全的渠道•产品成熟度被市场认可,市场占...

    ernest.wang 评论0 收藏0
  • cross-env使用记录

    摘要:能跨平台地设置及使用环境变量让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题安装方式改写使用了环境变量的常见如在脚本多是里这么配置运行,这样便设置成功,无需担心跨平台问题关于跨平台兼容,有几点注意 cross-env能跨平台地设置及使用环境变量, cross-env让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题 1、npm安装方式 npm i --save-de...

    Michael_Ding 评论0 收藏0
  • webpack打包插件

    摘要:引入的模块引入的使用将打包打包的拆分将一部分抽离出来物理地址拼接优化打包速度压缩代码,这里使用的是,同样在的里面添加 const path = require(path); //引入node的path模块const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...

    ChanceWong 评论0 收藏0

发表评论

0条评论

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