微信小程序setData()方法渲染过程

最新推荐文章于 2024-05-13 14:45:00 发布
最新推荐文章于 2024-05-13 14:45:00 发布
阅读量966 收藏 1
点赞数 1
文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45963949/article/details/118558895
版权

微信小程序并不能像vue一样做到所有的数据都是响应式。

如果需要某个数据在事件后改变，则需要我们通过setData()方法来实现。

那么微信小程序又是如何通过setData()方法刷新页面的呢

1.首先要知道，微信小程序在微信客户端这个寄主环境中由渲染层和逻辑层组成。通过渲染层和逻辑层的合作形成一个包含dom信息的js对象，
在这里插入图片描述

随后再将js对象转成一个真正的dom渲染出来。而如果经过了setData()方法识别到数据发生改变，那么微信小程序就会执行diff（different） 操作，对比两个对象直接的差异，从而实现页面数据的刷新

Living-v
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端局部自动刷新_微信小程序使用setData实现局部刷新
weixin_39955142的博客
02-11 2475
微信小程序中我们经常用setData来将数据从逻辑层发送到视图层(异步)，同时改变对应的this.data 的值(同步)。正常场景下，首次请求接口>接口返回数据>setData数据>视图渲染一般界面上都会有刷新按钮、或者下拉刷新，当点击刷新按钮，只想更新部分数据怎么办，这时就要用到局部刷新了。下面举例来具体实现：初始数据如下Page({/*** 页面的初始数据*/data: {...
微信小程序 setData 对 data数据影响问题
12-03
A用来渲染界面，一键还原的时候，就把B的值赋给A，从而引起页面重新渲染，达到重置界面的效果。 结果一点反应也没有。 data里有模拟的数组 itemleft itemright，二选一， 定义代码是这么写的 this.setData({ 　...
微信小程序 获取上一个页面传来的数据对象并且存到data里面，在页面中渲染成功
weixin_45974277的博客
07-29 1715
onLoad: function (options) { let data1 = JSON.parse(options.data);//从上一个页面获取数据对象 console.log(data1) this.setData ( {title:data1.data.list[0].title}, {brand:data1.data.list[0].brand}, {companyName:data1.data....
解析小程序setData工作原理
最新发布
qq_43641110的博客
05-13 1523
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
微信小程序之数据的同步渲染
weixin_51474815的博客
09-07 1786
微信小程序怎么实现的数据同步渲染
微信小程序 开发 自定义tabbar后，需要选择点击两次才会出现样式选中
只会helloworld的小白啊的博客
11-15 640
微信小程序 开发 自定义tabbar后，需要选择点击两次才会出现样式选中
小程序setdata优化_微信小程序的setData
weixin_39898854的博客
12-20 275
由于微信小程序诞生于vue.js和react.js之后，所以他们在当初设计代码架构的时候也是借鉴了vue.js和react.js的想法，也遵循的组件化的方式，延用了setData的机制去把视图层和逻辑层做一个“中转站”两边连接起来。但是这种机制一直存在性能上的问题，微信小程序也不例外。先看一张图:这张图大体描述了一下setData的工作原理，当程序开始触发setData操作的时候，先把数据做成字符...
微信小程序 数据交互与渲染实例详解
11-30
微信小程序 数据交互与渲染 实现效果图： 微信小程序的api中提供了网络交互的api，我们只要调用即可和后端进行数据交互，该api为wx.request.，具体代码如下。 //list.js //获取应用实例 var app = getApp() Page...
微信小程序遇到修改数据后页面不渲染的问题解决
08-31
微信小程序遇到修改数据后页面不渲染的问题可以通过正确地使用setData()方法来解决。开发者需要在开发微信小程序时正确地使用setData()方法，以免出现数据不渲染的问题。 此外，微信小程序还提供了一些其他的解决...
微信小程序实现换肤功能
08-27
微信小程序的开发方式与传统的PC或移动端有所不同，因此实现换肤功能时需要采用特殊的方法。以下将详细介绍如何在微信小程序中实现这一功能。 首先，你需要准备两套CSS样式：一套是默认的样式，另一套是用于换肤的...
dom渲染完毕再渲染数据_请问小程序中如何正确得到dom结构渲染完成的时机？
weixin_34769715的博客
12-31 622
Anfo(作者)if(newVisible){if(this._delayInstance){clearTimeout(this._delayInstance);this.leaving = false;this.leaveActive = false;}this.visibleDelay = true;this.entering = true;this.$nextTick(()=>{thi...
uniapp重新渲染页面_【第1649期】 微信小程序渲染性能调优
weixin_39827036的博客
12-13 833
前言又见小程序性能优化。今日早读文章由微保@梁沛聪授权分享。@梁沛聪，微保技术部-架构平台中心高级前端开发，负责微保小程序基础库搭建、车险业务开发等工作，对小程序性能优化有深入地实践。@微保技术团队由来自国内一线互联网公司和保险公司的技术精英组成，致力于用前沿技术打造最佳互联网保险体验。正文从这开始～～网页的性能优化是前端开发老生常谈的热门话题，其中微信小程序因其页面双线程架构设计，所以...
微信小程序改变页面显示setData、修改数组、分页等学习笔记
weixin_30750335的博客
02-19 647
一、setData 小程序页面加载渲染时是通过获取js文件中Page里面初始化数据data来进行渲染。 js： 　　/** 　　* 页面的初始数据 　　*/ 　　data: { 　　　　name:'张三', 　　}, wxml： 　　<text>{{name}}</text> 结果： 完成渲染后，直接通过赋...
【小程序入门】小程序setData方法以及转为DOM对象
u014650759的专栏
06-13 580
上篇我们知道怎么将参数传递到一个新页面https://blog.csdn.net/u014650759/article/details/91380350，这篇我们接着学习涉及小程序页面的一些处理。 1.在 Android 开发的时候，我们可以直接获得控件，然后对控件做数据绑定工作，而在小程序里，并不能够直接获得控件的对象，所有的数据绑定与动态修改只能通过维护 Page 里面的data{}，以...
vue react 以及微信小程序数据绑定的区别
m0_48723020的博客
11-15 958
1、小程序中 data初始化数据 this.setData() 修改数据 修改数据的行为始终是同步的 数据流 ：单项 Model --> View 2、vue data初始化数据 this.key=value 来修改数据 数据流 ：单项 Model --> View 实现了双向数据绑定 v-model 3、react state中初始化状态数据 修改数据 this.setState( )：自身钩子函数中（compon...
微信小程序_在当前页面刷新数据 / 重载当前页面
热门推荐
佐斌的笔记簿
08-19 1万+
在项目中我们需要删除某条数据时无法及时更新数据 需求:点击某条数据进行删除,没有及时刷新页面数据,(举个栗子)???? 点击当前数据项下的目录 点击删除,执行删除操作 但是按下后,请求也发送过去了,服务器端数据已经将这条数据删除,但是页面没有局部刷新. 解决方法: 经过查询和思考(抓头发),发现了获取该表列表的请求方法写在了 onLoad 里面 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getFa
微信小程序可以进行dom操作吗？
hyqhyqhyqq的博客
03-21 2984
原因：在小程序中，渲染层和逻辑层是分开的，分别运行在不同的线程中，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
小程序性能优化技巧
wanglele16的博客
08-09 528
网页性能优化是前端一个老生常谈的话题，但微信小程序因为双线程的架构设计，跟传统 Web 页面不太一样。所以，今天来探究下微信小程序内的性能优化问题。 首先，要问大家一个问题：从打开微信小程序到首页展示在大家面前，要经过哪些过程？（可以类比与前端另一个常见问题：Web 页面从输入 url 到页面展示具体经过了哪些过程） 1. 启动过程 相信大家对 Web 页面的展现过程非常清楚。那么小程序呢，简要地...
微信小程序 setdata 滞后
08-15
微信小程序的setData函数的确会存在一定的滞后现象。这是因为setData函数是将数据的更新通知给界面，并触发界面的重新渲染，但是这个过程需要一定的时间。 滞后现象的原因主要有两个方面： 1. 异步更新：setData...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值