在微信小程序里使用watch和computed的方法


Posted in Javascript onAugust 02, 2018

在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData() ,那么如何给小程序也加上这两个功能呢?

我们知道在 vue 里是通过 Object.defineProperty 来实现数据变化检测的,给该变量的 setter 里注入所有的绑定操作,就可以在该变量变化时带动其它数据的变化。那么是不是可以把这种方法运用在小程序上呢?

实际上,在小程序里实现要比 vue 里简单,应为对于 data 里对象来说,vue 要递归的绑定对象里的每一个变量,使之响应式化。但是在微信小程序里,不管是对于对象还是基本类型,只能通过 this.setData() 来改变,这样我们只需检测 data 里面的 key 值的变化,而不用检测 key 值里面的 key 。

先上测试代码

<view>{{ test.a }}</view>
<view>{{ test1 }}</view>
<view>{{ test2 }}</view>
<view>{{ test3 }}</view>
<button bindtap="changeTest">change</button>
const { watch, computed } = require('./vuefy.js')
Page({
 data: {
  test: { a: 123 },
  test1: 'test1',
 },
 onLoad() {
  computed(this, {
   test2: function() {
    return this.data.test.a + '2222222'
   },
   test3: function() {
    return this.data.test.a + '3333333'
   }
  })
  watch(this, {
   test: function(newVal) {
    console.log('invoke watch')
    this.setData({ test1: newVal.a + '11111111' })
   }
  })
 },
 changeTest() {
  this.setData({ test: { a: Math.random().toFixed(5) } })
 },
})

现在我们要实现 watch 和 computed 方法,使得 test 变化时,test1、test2、test3 也变化,为此,我们增加了一个按钮,当点击这个按钮时,test 会改变。

watch 方法相对简单点,首先我们定义一个函数来检测变化:

function defineReactive(data, key, val, fn) {
 Object.defineProperty(data, key, {
  configurable: true,
  enumerable: true,
  get: function() {
   return val
  },
  set: function(newVal) {
   if (newVal === val) return
   fn && fn(newVal)
   val = newVal
  },
 })
}

然后遍历 watch 函数传入的对象,给每个键调用该方法

function watch(ctx, obj) {
 Object.keys(obj).forEach(key => {
  defineReactive(ctx.data, key, ctx.data[key], function(value) {
   obj[key].call(ctx, value)
  })
 })
}

这里有参数是 fn ,即上面 watch 方法里 test 的值,这里把该方法包一层,绑定 context。

接着来看 computed,这个稍微复杂,因为我们无法得知 computed 里依赖的是 data 里面的哪个变量,因此只能遍历 data 里的每一个变量。

function computed(ctx, obj) {
 let keys = Object.keys(obj)
 let dataKeys = Object.keys(ctx.data)
 dataKeys.forEach(dataKey => {
  defineReactive(ctx.data, dataKey, ctx.data[dataKey])
 })
 let firstComputedObj = keys.reduce((prev, next) => {
  ctx.data.$target = function() {
   ctx.setData({ [next]: obj[next].call(ctx) })
  }
  prev[next] = obj[next].call(ctx)
  ctx.data.$target = null
  return prev
 }, {})
 ctx.setData(firstComputedObj)
}

详细解释下这段代码,首先给 data 里的每个属性调用 defineReactive 方法。接着计算 computed 里面每个属性第一次的值,也就是上例中的 test2、test3。

computed(this, {
 test2: function() {
  return this.data.test.a + '2222222'
 },
 test3: function() {
  return this.data.test.a + '3333333'
 }
})

这里分别调用 test2 和 test3 的值,将返回值与对应的 key 值组合成一个对象,然后再调用 setData() ,这样就会第一次计算这两个值,这里使用了 reduce 方法。但是你可能会发现其中这两行代码,它们好像都没有被提到是干嘛用的。

ctx.data.$target = function() {
  ctx.setData({ [next]: obj[next].call(ctx) })
 }
 
 ctx.data.$target = null

可以看到,test2 和 test3 都是依赖 test 的,这样必须在 test 改变的时候在其的 setter 函数中调用 test2 和 test3 中对应的函数,并通过 setData 来设置这两个变量。为此,需要将 defineReactive 改动一下。

function defineReactive(data, key, val, fn) {
 let subs = [] // 新增
 Object.defineProperty(data, key, {
  configurable: true,
  enumerable: true,
  get: function() {
   // 新增
   if (data.$target) {
    subs.push(data.$target)
   }
   return val
  },
  set: function(newVal) {
   if (newVal === val) return
   fn && fn(newVal)
   // 新增
   if (subs.length) {
    // 用 setTimeout 因为此时 this.data 还没更新
    setTimeout(() => {
     subs.forEach(sub => sub())
    }, 0)
   }
   val = newVal
  },
 })
}

相较于之前,增加了几行代码,我们声明了一个变量来保存所有在变化时需要执行的函数,在 set 时执行每一个函数,因为此时 this.data.test 的值还未改变,使用 setTimeout 在下一轮再执行。现在就有一个问题,怎么将函数添加到 subs 中。不知道各位还是否记得上面我们说到的在 reduce 里的那两行代码。因为在执行计算 test1 和 test2 第一次 computed 值的时候,会调用 test 的 getter 方法,此刻就是一个好机会将函数注入到 subs 中,在 data 上声明一个 $target 变量,并将需要执行的函数赋值给该变量,这样在 getter 中就可以判断 data 上有无 target 值,从而就可以 push 进 subs,要注意的是需要马上将 target 设为 null,这就是第二句的用途,这样就达到了一石二鸟的作用。当然,这其实就是 vue 里的原理,只不过这里没那么复杂。

到此为止已经实现了 watch 和 computed,但是还没完,有个问题。当同时使用这两者的时候,watch 里的对象的键也同时存在于 data 中,这样就会重复在该变量上调用 Object.defineProperty ,后面会覆盖前面。因为这里不像 vue 里可以决定两者的调用顺序,因此我们推荐先写 computed 再写 watch,这样可以 watch computed 里的值。这样就有一个问题,computed 会因覆盖而无效。

思考一下为什么?

很明显,这时因为之前的 subs 被重新声明为空数组了。这时,我们想一个简单的方法就是把之前 computed 里的 subs 存在一个地方,下一次调用 defineReactive 的时候看对应的 key 是否已经有了 subs,这样就可以解决问题。修改一下代码。

function defineReactive(data, key, val, fn) {
 let subs = data['$' + key] || [] // 新增
 Object.defineProperty(data, key, {
  configurable: true,
  enumerable: true,
  get: function() {
   if (data.$target) {
    subs.push(data.$target)
    data['$' + key] = subs // 新增
   }
   return val
  },
  set: function(newVal) {
   if (newVal === val) return
   fn && fn(newVal)
   if (subs.length) {
    // 用 setTimeout 因为此时 this.data 还没更新
    setTimeout(() => {
     subs.forEach(sub => sub())
    }, 0)
   }
   val = newVal
  },
 })
}

这样,我们就一步一步的实现了所需的功能。完整的代码和例子请戳。

虽然经过了一些测试,但不保证没有其它未知错误,欢迎提出问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 #Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 #Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 #Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 #Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 #Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 #Javascript
解决vue router组件状态刷新消失的问题
Aug 01 #Javascript
You might like
完美解决PHP中文乱码
2009/11/26 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python中异常报错处理方法汇总
2016/11/20 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
机器学习python实战之决策树
2017/11/01 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
2019个人工作总结
2019/06/21 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
vue的项目如何打包上线
2022/04/13 Vue.js