vue.js与微信小程序区别是什么(2)-木庄网络博客

vue实例化后，初始化data，通过this.能获取到data内的数据，正常操作：

data(){
  return {
    message:””
  }
},
methods:{
  change:function(){
    this.message = “呵呵哒”
  }
}

小程序中，初始化页面数据之后，是通过this.data来获取页面的data来获取页面对象的，同样操作，

data:{
  message:”呵呵”
},
methods:{
  this.data.message = “呵呵哒”;   //视图界面上的值并没有发生改变
}

先不说一不小心this.message，后来幡然醒悟过来这是小程序，那么，问题又来了，视图界面上的值并没有发生变化。

再去查询文档（来自微信小程序官方文档说明）：

1、直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。

2、单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

3、this.data与this.setData的关系就是this.setData里面存储的是this.data的副本，而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面，因为这个时候的this.setData里面的副本还是没有更新前的。

简而言之，就是，setData 函数刷新数据并展示在页面上，this.data改变了数据，但是不会改变视图页面的内容。

所以，正确操作

methods:{
  this.data.message = “呵呵哒”;
  this.setDate({
     message:this.data.message
});
console.log(this.data.message)
}

相关免费学习推荐：JavaScript（视频）

以上就是vue.js与微信小程序区别是什么的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » vue.js与微信小程序区别是什么

vue.js与微信小程序区别是什么

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论