vue详解,深入理解vue

　　本文主要介绍vue中nextTick的相关信息，帮助你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。

背景

　　Vue是异步渲染的。当数据改变时，DOM不会立即呈现。当页面被呈现时，数据修改将被集成。多次数据修改只会一次集成渲染，这就是异步渲染的原因。只有异步渲染才能实现集成操作。

例子

　　方法：{

　　update() {

　　for(设I=0；i 10i ) {

　　this . testnum=this . testnum I；

　　}

　　},

　　},

　　TestNum将在您的Vue视图中改变。但是需要注意的是，这个改变过程，虽然我们修改了10次firstNum循环，实际上它只在视图上更新了最后一个值为——，这也是很合理的。比如我们的演示中，每个循环中testNum的赋值只是一个过程，最终目的是得到10个循环的计算结果。如果我们做10次，不必要的性能开销会很痛苦。

需求

　　我们需要修改数据，获取DOM，操作并求解DOM，

例子

　　模板

　　div id=应用程序

　　ul ref=ul1

　　li v-for=(v，i) in list :key=i{{ v }}/li

　　/ul

　　按钮@click=add 添加DOM/按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：“应用程序”，

　　data() {

　　返回{

　　列表：[a ， b ， c]，

　　};

　　},

　　方法：{

　　add() {

　　this . list . push(` $ { date . now()} `)；

　　this . list . push(` $ { date . now()} `)；

　　this . list . push(` $ { date . now()} `)；

　　const ulElem=this。$ refs.ul1

　　console . log(ulelem . child nodes . length)；

　　},

　　},

　　};

　　/脚本

　　本来点击后数组长度应该输出6，但实际上数组长度只有3，因为数据改变后DOM不会立即改变。此时，我们无法获得新的节点。此时的DOM节点仍然是开头的A、B、C。DOM操作完成后，它被异步呈现。

　　然而，我们的期望是点击后立即得到最后三个。这时候就需要邀请我们的主角nextTick了。

　　add() {

　　this . list . push(` $ { date . now()} `)；

　　this . list . push(` $ { date . now()} `)；

　　this . list . push(` $ { date . now()} `)；

　　const ulElem=this。$ refs.ul1

　　这个。$nextTick(()={

　　console . log(ulelem . child nodes . length)；

　　});

　　},

　　从这个例子也可以看出$nextTick会在DOM渲染完成后回调。同时也可以看出，虽然我们一次点击修改了三次数据，但是很多修改都会被整合，最后渲染一次。这也说明渲染是异步的，如果是同步的，就没办法集成。

　　以上是vue中nextTick的详细内容。更多关于vue中nextTick的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。