0
收藏
评论

微信小程序和Vue在数据传输及页面渲染机制的几点不同

总结微信小程序和Vue的数据传输及页面渲染机制的几点不同以及导致的在开发方式上的差异

最近使用了uni-app框架开发小程序,里面的数据传输及页面渲染是基于vue实现的,在使用的过程中,发现总结了微信小程序和vue同时作为MVVM框架的在数据传输及页面渲染机制的几点不同。

一、可触发视图更新的数据传输方式的不同

1、在小程序中,只有调用setData方法才会真正将数据传输至视图层,仅仅调用this.data.xx,是不会引起视图更新的。
2、在vue中,只要调用this.xx就可以触发视图层的更新。
此外,针对数组的更新检测,除了调用this.可以触发视图更新外,
vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新,这些被包裹过的方法包括:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
所以在调用了这些方法后,我们不需要再调用this.xx,即可实现视图层的更新。

二、数据传输机制的不同

2、小程序中只要是setData的值都会传输至视图层,不会做数据未更新的检查以及页面不需要数据的筛选排除,而且也不需要在data中预定义所有视图层所需要的属性值,未预定义的值调用setData也可以实现视图层的重新渲染。
vue中只要this.xx的数据与当前data中的数据相等或者视图层未使用的data数据,这些数据就不会进行传输,所以也不会触发重新渲染;此外如果是没有在data中预先定义的属性值,调用this.xx,也不会触发视图更新。
注:所以针对这一条,我们要注意以下几点:
1) 因为 Vue 无法探测普通的新增属性,所以只要是视图层中用到的数据属性,一定要在data数据对象中预先定义。
2) this.xx的数据与当前data中的数据相等时不会传输数据触发视图更新。
针对这一条,在出现一些设置了值页面却未发生渲染时,可能是此原因,在这里我遇到的一个例子:
需求是:用户输入文本,需要限制最长可输入14个字,14个字不是限制输入14个字符而是这样定义的:要使输入的文本刚好占14个中文汉字的空间(这里:一个英文字母(不分大小写)占一个字节的空间,一个中文汉字占两个字节的空间),所以我需要处理英文两个字符算一个字的情况,于是就封装了一个求取当前字符串长度,如果字数多了就将多余的字符截掉,再将截取后的字符串传输回视图层显示。
这个操作之前在小程序端是完全可以实现的。
但是在vue中,当输入的字符超出了14的长度之后,因为截取出来的值都会与当前data中的值相等,所以不会进行数据传输,也不会更新页面。
以下是目前的替代方案:

titleChange(e) {//绑定的监听用户输入的事件
    var that = this;
    if (str != e.detail.value.trim()) {//如果截取的值与当前输入框中的文本不相等,则需要强制渲染
        this.title = '';//先将title的值设置为空
        setTimeout(function() {//添加一个延时函数,再将title的值设置为截取后的值
            that.title = str;
        })
    } else {
            this.title = str;
    }
},

以上!

最后一次编辑于  07-06  (未经腾讯允许,不得转载)
复制链接赞 0收藏投诉评论

4 个评论

  • K动一PC肌锻炼专家
    K动一PC肌锻炼专家
    07-06

    这个和this.setData性能哪个好,好多少?

    07-06
    赞同 11
    回复 3
    • 痛快科技
      痛快科技
      07-08

      官方给的说法,在大量列表类数据渲染时,vue的效率比没有优化过的setData高

      07-08
      赞同
      回复
    • 痛快科技
      痛快科技
      07-08

      该文章没有去评论性能方面的问题,我觉得是跟开发者如何使用有关系的,框架肯定都是做了性能优化的,需要我们在了解机制的前提下合理的使用,才能达到最好的性能。性能方面究竟哪个好我也期待哪位大神在此回复下。

      07-08
      赞同
      回复
    • K动一PC肌锻炼专家
      K动一PC肌锻炼专家
      07-08回复痛快科技

      关注了,我的小程序用了太多了setData,急需优化

      07-08
      赞同
      回复