计算机编程

目前在用vue,由于其是数据和页面渲染绑定的,我一个函数内修改数据,在函数没执行完之前,页面是不渲染的,所以进度条只能在完全加载完毕后,显示个100%后来想用原生,才发现原生也是一样的,必须函数处理之后才展示页面用excel的vba时不是如此,可以实时修改表格数据的,也就是你能看到“刷”的过程请问js怎么实现啊?我目前是有个大table,本地的不需要网络,计算出来要10秒左右时间,我打算做个进度条但由于不涉及网络异步问题,所以这10秒完全是计算时间,cpu猛跑的那种请问怎么才能一边猛跑,一边还能实时渲染数据呢?谢谢

构建一个基于数据双向绑定原理的应用

首先,这一切都是基于我们能够实时监听到数据变化,并根据变化做出实时响应

构建一个defineReactive函数

  1. 函数参数解释
  • Obj => 传过来的实例
  • key => 实例中_data属性的键
  • val => 实例中_data属性的值
  1. 函数解释
  • 通过Object.defineProperty_data[key]设置为可以响应的
  • descriptor中的get用来监听取值操作
  • descriptor中的set用来监听赋值操作

tip:
当且仅当该属性的 configurabletrue 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false

definedReactive (obj, key, val) {
      const dep = new Dep()
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: () => {
          console.log('正在获取' + key)
          return val
        },
        set: (newVal) => {
          val = newVal
          console.log('正在设置' + key + '值为' +  newVal)
        }
      })
    }

该方法的作用是可以将传递过来的obj[key]设置为可观测的,我们需要将实例中_data的所有属性变为可监测的

observerable (obj) {
  Object.keys(obj).forEach(val => {
    this.definedReactive(obj, val, obj[val])
  })
}

我们只需要在构造函数中调用该函数,实例中_data的所有属性就都编程可监测的了

constructor (option) {
  this._data = option.data
  this.observerable(this._data)
}

好啦,现在实例中_data的所有属性的修改,赋值,获取我们都能够相应的监听到了!
但是,在vue中我们要使用data中的xxx属性并不是像这样:this._data.xxx,而是直接this.xxx就可以访问到该属性。
那么,我们如何实现在直接在实例中访问到_data的属性呢?

函数解释

  • 我们仍然通过Object.defineProperty实现一层代理功能,在获取实例上的xxx值的时候,我们将_data中的值返回,设置时也同理
setProxy (data, key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    get: () => {
      return data._data[key]
    },
    set: (newVal) => {
      val = newVal
      data._data[key] = newVal
    }
  })
}

该函数依然只完成了对data[key]中一个值的代理,我们需要为_data中所有值都代理到实例上

Object.keys(option.data).forEach(val => {
  this.setProxy(this, val)
})

到现在,我们已经可以通过实例获取_data中的值了。
到现在,我们可以手动一下,

let vue = new Vue({
    data: {
      heroName: 'peter'
    },
    el: '#app'
  })
  console.log(vue.heroName)
  vue.heroName = 'hero'

得到的结果是

正在获取heroName
peter
正在设置heroName值为hero
正在获取heroName
peter

目前我们的第一步已经完成了

其他新闻
友情链接

公司名称巴黎人电玩
版权所有:Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有

友情链接

Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有
公司地址http://www.zhongqiangjy.com