标签：nextTick Dom 更新 re vue2 使用 回调 datas

1、关于nextTick。

vue中的Dom更新是异步的，是异步的意味着当被处理数据是动态变化时，此时对应的Dom未能及时更新（同步更新）就会导致数据已经更新（model层已经更新）而视力层未更新（Dom未更新）此时就需要使用nextTick了。
当你想要拿到更新后的Dom，一定要在nextTic的回调函数中去获取更新后的Dom的值。
如`this.$nextTick(()=>{})

this.$nextTick(()=>{
 在这里获取dom更新后的值
})

注意：在下次Dom更新循环之后去执行回调函数，修改model层数据之后，立即在这个回调中获取更新后的dom。
回调的调用时机：需要在视图更新之后，基于新的视图上进行操作。

 1   featchData(val) {
 2       this.$nextTick(async () => {
 3         const re = await getHeader($.param(val));
 4         this.recursionFunction(re.datas.records);
 5         this.treerData = re.datas.records;
 6 
 7         // 取父级传过来的id,取不到就从本地缓存取
 8         if (this.$route.query.row.id) {
 9           this.fatherId = this.$route.query.row.id;
10         } else {
11           this.fatherId = localStorage.getItem("cloudRow");
12         }
13         // 获取之前保存的sheet数据
14         let res = await obtainContext(this.fatherId);
15         // 判断 不为空 再赋值
16         if (res.datas.context != "") {
17           this.initializationSheetData = JSON.parse(res.datas.context);
18         }
19       });
20     },

修改数据后Model层会立即同步更新了，而Dom并没有及时更新，而在回调函数中的Dom的值是更新后的，那么回调函数到底做了什么 呢，在数据变化之后立即使用this.$nextTick(callback),callback又称延迟回调，而此回调在dom更新完成后就会自动调用（它会等待Dom更新完成）。

标签：nextTick,Dom,更新,re,vue2,使用,回调,datas
来源： https://www.cnblogs.com/ccKing/p/16624262.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。