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;

}

},

以上！