iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >vue页面渲染是异步的吗
  • 637
分享到

vue页面渲染是异步的吗

2023-07-04 18:07:45 637人浏览 安东尼
摘要

这篇文章主要介绍“Vue页面渲染是异步的吗”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue页面渲染是异步的吗”文章能帮助大家解决问题。vue页面渲染是异步的。vue采用的是异步渲染,这样可以提升

这篇文章主要介绍“Vue页面渲染是异步的吗”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue页面渲染是异步的吗”文章能帮助大家解决问题。

vue页面渲染是异步的。vue采用的是异步渲染,这样可以提升性能;如果不采用异步更新,在每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue会在本轮数据更新后,再去异步更新视图。

vue页面渲染是异步的。

Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被推入到队列中一次,这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的,然后,在下一个的事件循环tick中,Vue刷新队列并执行实际(已去重的)工作,Vue在内部对异步队列尝试使用原生的Promise.thenMutationObserversetImmediate,如果执行环境不支持,则会采用setTimeout(fn, 0)代替。

描述

对于Vue为何采用异步渲染,简单来说就是为了提升性能,因为不采用异步更新,在每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue会在本轮数据更新后,再去异步更新视图,举个例子,让我们在一个方法内重复更新一个值。

this.msg = 1;this.msg = 2;this.msg = 3;

事实上,我们真正想要的其实只是最后一次更新而已,也就是说前三次DOM更新都是可以省略的,我们只需要等所有状态都修改好了之后再进行渲染就可以减少一些性能损耗。

对于渲染方面的问题是很明确的,最终只渲染一次肯定比修改之后即渲染所耗费的性能少,在这里我们还需要考虑一下异步更新队列的相关问题,假设我们现在是进行了相关处理使得每次更新数据只进行一次真实DOM渲染,来让我们考虑异步更新队列的性能优化
假设这里是同步更新队列,this.msg=1,大致会发生这些事: msg值更新 -> 触发setter -> 触发Watcherupdate -> 重新调用 render -> 生成新的vdom -> dom-diff -> dom更新,这里的dom更新并不是渲染(即布局、绘制、合成等一系列步骤),而是更新内存中的DOM树结构,之后再运行this.msg=2,再重复上述步骤,之后的第3次更新同样会触发相同的流程,等开始渲染的时候,最新的DOM树中确实只会存在更新完成3,从这里来看,前2次对msg的操作以及Vue内部对它的处理都是无用的操作,可以进行优化处理。

如果是异步更新队列,会是下面的情况,运行this.msg=1,并不是立即进行上面的流程,而是将对msg有依赖的Watcher都保存在队列中,该队列可能这样[Watcher1, Watcher2...],当运行this.msg=2后,同样是将对msg有依赖的Watcher保存到队列中,Vue内部会做去重判断,这次操作后,可以认为队列数据没有发生变化,第3次更新也是上面的过程,当然,你不可能只对msg有操作,你可能对该组件中的另一个属性也有操作,比如this.otherMsg=othermessage,同样会把对otherMsg有依赖的Watcher添加到异步更新队列中,因为有重复判断操作,这个Watcher也只会在队列中存在一次,本次异步任务执行结束后,会进入下一个任务执行流程,其实就是遍历异步更新队列中的每一个Watcher,触发其update,然后进行重新调用render -> new vdom -> dom-diff -> dom更新等流程,但是这种方式和同步更新队列相比,不管操作多少次msg Vue在内部只会进行一次重新调用真实更新流程,所以,对于异步更新队列不是节省了渲染成本,而是节省了Vue内部计算及DOM树操作的成本,不管采用哪种方式,渲染确实只有一次。

此外,组件内部实际使用VirtualDOM进行渲染,也就是说,组件内部其实是不关心哪个状态发生了变化,它只需要计算一次就可以得知哪些节点需要更新,也就是说,如果更改了N个状态,其实只需要发送一个信号就可以将DOM更新到最新,如果我们更新多个值。

this.msg = 1;this.age = 2;this.name = 3;

此处我们分三次修改了三种状态,但其实Vue只会渲染一次,因为VIrtualDOM只需要一次就可以将整个组件的DOM更新到最新,它根本不会关心这个更新的信号到底是从哪个具体的状态发出来的。
而为了达到这个目的,我们需要将渲染操作推迟到所有的状态都修改完成,为了做到这一点只需要将渲染操作推迟到本轮事件循环的最后或者下一轮事件循环,也就是说,只需要在本轮事件循环的最后,等前面更新状态的语句都执行完之后,执行一次渲染操作,它就可以无视前面各种更新状态的语法,无论前面写了多少条更新状态的语句,只在最后渲染一次就可以了。
将渲染推迟到本轮事件循环的最后执行渲染的时机会比推迟到下一轮快很多,所以Vue优先将渲染操作推迟到本轮事件循环的最后,如果执行环境不支持会降级到下一轮,Vue的变化侦测机制(setter)决定了它必然会在每次状态发生变化时都会发出渲染的信号,但Vue会在收到信号之后检查队列中是否已经存在这个任务,保证队列中不会有重复,如果队列中不存在则将渲染操作添加到队列中,之后通过异步的方式延迟执行队列中的所有渲染的操作并清空队列,当同一轮事件循环中反复修改状态时,并不会反复向队列中添加相同的渲染操作,所以我们在使用Vue时,修改状态后更新DOM都是异步的。
当数据变化后会调用notify方法,将watcher遍历,调用update方法通知watcher进行更新,这时候watcher并不会立即去执行,在update中会调用queueWatcher方法将watcher放到了一个队列里,在queueWatcher会根据watcher的进行去重,若多个属性依赖一个watcher,则如果队列中没有该watcher就会将该watcher添加到队列中,然后便会在$nextTick方法的执行队列中加入一个flushSchedulerQueue方法(这个方法将会触发在缓冲队列的所有回调的执行),然后将$nextTick方法的回调加入$nextTick方法中维护的执行队列,flushSchedulerQueue中开始会触发一个before的方法,其实就是beforeUpdate,然后watcher.run()才开始真正执行watcher,执行完页面就渲染完成,更新完成后会调用updated钩子。

$nextTick

在上文中谈到了对于Vue为何采用异步渲染,假如此时我们有一个需求,需要在页面渲染完成后取得页面的DOM元素,而由于渲染是异步的,我们不能直接在定义的方法中同步取得这个值的,于是就有了vm.$nextTick方法,Vue$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的DOM。简单来说就是当数据更新时,在DOM中渲染完成后,执行回调函数。
通过一个简单的例子来演示$nextTick方法的作用,首先需要知道Vue在更新DOM时是异步执行的,也就是说在更新数据时其不会阻塞代码的执行,直到执行栈中代码执行结束之后,才开始执行异步任务队列的代码,所以在数据更新时,组件不会立即渲染,此时在获取到DOM结构后取得的值依然是旧的值,而在$nextTick方法中设定的回调函数会在组件渲染完成之后执行,取得DOM结构后取得的值便是新的值。

<!DOCTYPE html><html><head>    <title>Vue</title></head><body>    <div id="app"></div></body><script src="https://cdn.bootCSS.com/vue/2.4.2/vue.js"></script><script type="text/javascript">    var vm = new Vue({        el: '#app',        data: {            msg: 'Vue'        },        template:`            <div>                <div ref="msgElement">{{msg}}</div>                <button @click="updateMsg">updateMsg</button>            </div>        `,        methods:{            updateMsg: function(){                this.msg = "Update";                console.log("DOM未更新:", this.$refs.msgElement.innerHTML)                this.$nextTick(() => {                    console.log("DOM已更新:", this.$refs.msgElement.innerHTML)                })            }        },            })</script></html>

异步机制

官方文档中说明,Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。然后,在下一个的事件循环tick中,Vue刷新队列并执行实际工作。Vue在内部对异步队列尝试使用原生的Promise.thenMutationObserversetImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0)代替。
js是单线程的,其引入了同步阻塞与异步非阻塞的执行模式,在Js异步模式中维护了一个Event LoopEvent Loop是一个执行模型,在不同的地方有不同的实现,浏览器和nodejs基于不同的技术实现了各自的Event Loop。浏览器的Event Loop是在HTML5的规范中明确定义,nodeJSEvent Loop是基于libuv实现的。
在浏览器中的Event Loop由执行栈Execution Stack、后台线程Background Threads、宏队列Macrotask Queue、微队列Microtask Queue组成。

  • 执行栈就是在主线程执行同步任务的数据结构,函数调用形成了一个由若干帧组成的栈。

  • 后台线程就是浏览器实现对于setTimeoutsetIntervalXMLHttpRequest等等的执行线程。

  • 宏队列,一些异步任务的回调会依次进入宏队列,等待后续被调用,包括setTimeoutsetIntervalsetImmediate(Node)requestAnimationFrameUI renderingI/O等操作。

  • 微队列,另一些异步任务的回调会依次进入微队列,等待后续调用,包括Promiseprocess.nextTick(Node)Object.observeMutationObserver等操作。

Js执行时,进行如下流程:

  • 首先将执行栈中代码同步执行,将这些代码中异步任务加入后台线程中。

  • 执行栈中的同步代码执行完毕后,执行栈清空,并开始扫描微队列。

  • 取出微队列队首任务,放入执行栈中执行,此时微队列是进行了出队操作。

  • 当执行栈执行完成后,继续出队微队列任务并执行,直到微队列任务全部执行完毕。

  • 最后一个微队列任务出队并进入执行栈后微队列中任务为空,当执行栈任务完成后,开始扫面微队列为空,继续扫描宏队列任务,宏队列出队,放入执行栈中执行,执行完毕后继续扫描微队列为空则扫描宏队列,出队执行。

  • 不断往复...

实例

// Step 1console.log(1);// Step 2setTimeout(() => {  console.log(2);  Promise.resolve().then(() => {    console.log(3);  });}, 0);// Step 3new Promise((resolve, reject) => {  console.log(4);  resolve();}).then(() => {  console.log(5);})// Step 4setTimeout(() => {  console.log(6);}, 0);// Step 5console.log(7);// Step N// ...// Result

Step 1

// 执行栈 console// 微队列 []// 宏队列 []console.log(1); // 1

Step 2

// 执行栈 setTimeout// 微队列 []// 宏队列 [setTimeout1]setTimeout(() => {  console.log(2);  Promise.resolve().then(() => {    console.log(3);  });}, 0);

Step 3

// 执行栈 Promise// 微队列 [then1]// 宏队列 [setTimeout1]new Promise((resolve, reject) => {  console.log(4); // 4 // Promise是个函数对象,此处是同步执行的 // 执行栈 Promise console  resolve();}).then(() => {  console.log(5);})

Step 4

// 执行栈 setTimeout// 微队列 [then1]// 宏队列 [setTimeout1 setTimeout2]setTimeout(() => {  console.log(6);}, 0);

Step 5

// 执行栈 console// 微队列 [then1]// 宏队列 [setTimeout1 setTimeout2]console.log(7); // 7

Step 6

// 执行栈 then1// 微队列 []// 宏队列 [setTimeout1 setTimeout2]console.log(5); // 5

Step 7

// 执行栈 setTimeout1// 微队列 [then2]// 宏队列 [setTimeout2]console.log(2); // 2Promise.resolve().then(() => {    console.log(3);});

Step 8

// 执行栈 then2// 微队列 []// 宏队列 [setTimeout2]console.log(3); // 3

Step 9

// 执行栈 setTimeout2// 微队列 []// 宏队列 []console.log(6); // 6

分析

在了解异步任务的执行队列后,回到中$nextTick方法,当用户数据更新时,Vue将会维护一个缓冲队列,对于所有的更新数据将要进行的组件渲染与DOM操作进行一定的策略处理后加入缓冲队列,然后便会在$nextTick方法的执行队列中加入一个flushSchedulerQueue方法(这个方法将会触发在缓冲队列的所有回调的执行),然后将$nextTick方法的回调加入$nextTick方法中维护的执行队列,在异步挂载的执行队列触发时就会首先会首先执行flushSchedulerQueue方法来处理DOM渲染的任务,然后再去执行$nextTick方法构建的任务,这样就可以实现在$nextTick方法中取得已渲染完成的DOM结构。在测试的过程中发现了一个很有意思的现象,在上述例子中的加入两个按钮,在点击updateMsg按钮的结果是3 2 1,点击updateMsgTest按钮的运行结果是2 3 1

<!DOCTYPE html><html><head>    <title>Vue</title></head><body>    <div id="app"></div></body><script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><script type="text/javascript">    var vm = new Vue({        el: '#app',        data: {            msg: 'Vue'        },        template:`            <div>                <div ref="msgElement">{{msg}}</div>                <button @click="updateMsg">updateMsg</button>                <button @click="updateMsgTest">updateMsgTest</button>            </div>        `,        methods:{            updateMsg: function(){                this.msg = "Update";                setTimeout(() => console.log(1))                Promise.resolve().then(() => console.log(2))                this.$nextTick(() => {                    console.log(3)                })            },            updateMsgTest: function(){                setTimeout(() => console.log(1))                Promise.resolve().then(() => console.log(2))                this.$nextTick(() => {                    console.log(3)                })            }        },            })</script></html>

这里假设运行环境中Promise对象是完全支持的,那么使用setTimeout是宏队列在最后执行这个是没有异议的,但是使用$nextTick方法以及自行定义的Promise实例是有执行顺序的问题的,虽然都是微队列任务,但是在Vue中具体实现的原因导致了执行顺序可能会有所不同,首先直接看一下$nextTick方法的源码,关键地方添加了注释,请注意这是Vue2.4.2版本的源码,在后期$nextTick方法可能有所变更。

var nextTick = (function () {  // 闭包 内部变量  var callbacks = []; // 执行队列  var pending = false; // 标识,用以判断在某个事件循环中是否为第一次加入,第一次加入的时候才触发异步执行的队列挂载  var timerFunc; // 以何种方法执行挂载异步执行队列,这里假设Promise是完全支持的  function nextTickHandler () { // 异步挂载的执行任务,触发时就已经正式准备开始执行异步任务了    pending = false; // 标识置false    var copies = callbacks.slice(0); // 创建副本    callbacks.length = 0; // 执行队列置空    for (var i = 0; i < copies.length; i++) {      copies[i](); // 执行    }  }  // the nextTick behavior leverages the microtask queue, which can be accessed  // via either native Promise.then or MutationObserver.  // MutationObserver has wider support, however it is seriously bugged in  // UIWEBView in iOS >= 9.3.3 when triggered in touch event handlers. It  // completely stops working after triggering a few times... so, if native  // Promise is available, we will use it:    if (typeof Promise !== 'undefined' && isNative(Promise)) {    var p = Promise.resolve();    var logError = function (err) { console.error(err); };    timerFunc = function () {      p.then(nextTickHandler).catch(logError); // 挂载异步任务队列      // in problematic UIWebViews, Promise.then doesn't completely break, but      // it can get stuck in a weird state where callbacks are pushed into the      // microtask queue but the queue isn't being flushed, until the browser      // needs to do some other work, e.g. handle a timer. Therefore we can      // "force" the microtask queue to be flushed by adding an empty timer.      if (isIOS) { setTimeout(noop); }    };  } else if (typeof MutationObserver !== 'undefined' && (    isNative(MutationObserver) ||    // PhantomJS and iOS 7.x    MutationObserver.toString() === '[object MutationObserverConstructor]'  )) {    // use MutationObserver where native Promise is not available,    // e.g. PhantomJS IE11, iOS7, Android 4.4    var counter = 1;    var observer = new MutationObserver(nextTickHandler);    var textNode = document.createTextNode(String(counter));    observer.observe(textNode, {      characterData: true    });    timerFunc = function () {      counter = (counter + 1) % 2;      textNode.data = String(counter);    };  } else {    // fallback to setTimeout        timerFunc = function () {      setTimeout(nextTickHandler, 0);    };  }  return function queueNextTick (cb, ctx) { // nextTick方法真正导出的方法    var _resolve;    callbacks.push(function () { // 添加到执行队列中 并加入异常处理      if (cb) {        try {          cb.call(ctx);        } catch (e) {          handleError(e, ctx, 'nextTick');        }      } else if (_resolve) {        _resolve(ctx);      }    });    //判断在当前事件循环中是否为第一次加入,若是第一次加入则置标识为true并执行timerFunc函数用以挂载执行队列到Promise    // 这个标识在执行队列中的任务将要执行时便置为false并创建执行队列的副本去运行执行队列中的任务,参见nextTickHandler函数的实现    // 在当前事件循环中置标识true并挂载,然后再次调用nextTick方法时只是将任务加入到执行队列中,直到挂载的异步任务触发,便置标识为false然后执行任务,再次调用nextTick方法时就是同样的执行方式然后不断如此往复    if (!pending) {       pending = true;      timerFunc();    }    if (!cb && typeof Promise !== 'undefined') {      return new Promise(function (resolve, reject) {        _resolve = resolve;      })    }  }})();

回到刚才提出的问题上,在更新DOM操作时会先触发$nextTick方法的回调,解决这个问题的关键在于谁先将异步任务挂载到Promise对象上。

首先对有数据更新的updateMsg按钮触发的方法进行debug,断点设置在Vue.js715行,版本为2.4.2,在查看调用栈以及传入的参数时可以观察到第一次执行$nextTick方法的其实是由于数据更新而调用的nextTick(flushSchedulerQueue);语句,也就是说在执行this.msg = "Update";的时候就已经触发了第一次的$nextTick方法,此时在$nextTick方法中的任务队列会首先将flushSchedulerQueue方法加入队列并挂载$nextTick方法的执行队列到Promise对象上,然后才是自行自定义的Promise.resolve().then(() => console.log(2))语句的挂载,当执行微任务队列中的任务时,首先会执行第一个挂载到Promise的任务,此时这个任务是运行执行队列,这个队列中有两个方法,首先会运行flushSchedulerQueue方法去触发组件的DOM渲染操作,然后再执行console.log(3),然后执行第二个微队列的任务也就是() => console.log(2),此时微任务队列清空,然后再去宏任务队列执行console.log(1)

接下来对于没有数据更新的updateMsgTest按钮触发的方法进行debug,断点设置在同样的位置,此时没有数据更新,那么第一次触发$nextTick方法的是自行定义的回调函数,那么此时$nextTick方法的执行队列才会被挂载到Promise对象上,很显然在此之前自行定义的输出2Promise回调已经被挂载,那么对于这个按钮绑定的方法的执行流程便是首先执行console.log(2),然后执行$nextTick方法闭包的执行队列,此时执行队列中只有一个回调函数console.log(3),此时微任务队列清空,然后再去宏任务队列执行console.log(1)

简单来说就是谁先挂载Promise对象的问题,在调用$nextTick方法时就会将其闭包内部维护的执行队列挂载到Promise对象,在数据更新时Vue内部首先就会执行$nextTick方法,之后便将执行队列挂载到了Promise对象上,其实在明白JsEvent Loop模型后,将数据更新也看做一个$nextTick方法的调用,并且明白$nextTick方法会一次性执行所有推入的回调,就可以明白其执行顺序的问题了,下面是一个关于$nextTick方法的最小化的DEMO

var nextTick = (function(){    var pending = false;    const callback = [];    var p = Promise.resolve();    var handler = function(){        pending = true;        callback.forEach(fn => fn());    }    var timerFunc = function(){        p.then(handler);    }    return function queueNextTick(fn){        callback.push(() => fn());        if(!pending){            pending = true;            timerFunc();        }    }})();(function(){    nextTick(() => console.log("触发DOM渲染队列的方法")); // 注释 / 取消注释 来查看效果    setTimeout(() => console.log(1))    Promise.resolve().then(() => console.log(2))    nextTick(() => {        console.log(3)    })})();

关于“vue页面渲染是异步的吗”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网精选频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: vue页面渲染是异步的吗

本文链接: https://www.lsjlt.com/news/346991.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue页面渲染是异步的吗
    这篇文章主要介绍“vue页面渲染是异步的吗”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue页面渲染是异步的吗”文章能帮助大家解决问题。vue页面渲染是异步的。vue采用的是异步渲染,这样可以提升...
    99+
    2023-07-04
  • vue页面渲染是同步还是异步
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。vue页面渲染是异步的。Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多...
    99+
    2023-05-14
    异步渲染 渲染 Vue
  • vue异步数据对页面渲染的影响
    这篇文章主要介绍“vue异步数据对页面渲染的影响”,在日常操作中,相信很多人在vue异步数据对页面渲染的影响问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue异步数据对页面...
    99+
    2024-04-02
  • vue为什么是异步渲染
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。1、nextTick()的原理及作用nextTick确保我们所操作的DOM是更新之后的。(1)应用场景:在视图更新之后,基于新的视图进行操作。在数据变化后执行的某个操作,...
    99+
    2023-05-14
    Vue 异步渲染
  • vue是异步渲染的原因有哪些
    这篇文章主要介绍了vue是异步渲染的原因有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue是异步渲染的原因有哪些文章都会有所收获,下面我们一起来看看吧。原因:可以提升性能。如果不采用异步更新,那么每次更...
    99+
    2023-07-04
  • 使用vue渲染页面的教程
    本篇内容介绍了“使用vue渲染页面的教程”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue渲染页面路径图...
    99+
    2024-04-02
  • CSS会阻塞页面渲染吗
    这篇文章给大家分享的是有关CSS会阻塞页面渲染吗的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。原理解析那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下。 不同的浏览器使用的内核不同,所以他们的渲染过程...
    99+
    2023-06-08
  • Vue的异步渲染axios问题怎么解决
    本文小编为大家详细介绍“Vue的异步渲染axios问题怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue的异步渲染axios问题怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。Vue异步渲染ax...
    99+
    2023-07-05
  • html页面渲染过程是怎样的
    这篇文章主要介绍“html页面渲染过程是怎样的”,在日常操作中,相信很多人在html页面渲染过程是怎样的问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html页面渲染过程是怎...
    99+
    2024-04-02
  • vue异步请求数据重新渲染方式
    目录vue异步请求数据重新渲染下面介绍一种方法解决自定义组件异步获取数据重新渲染视图层逻辑层vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决 ...
    99+
    2024-04-02
  • vue-router是如何实现路由跳转和页面渲染的
    Vue-router是Vue.js官方的路由管理工具,支持基于Vue.js构建单页应用(SPA),它提供的路由功能让我们能够通过管理URL中的路径,来控制页面的跳转和展示。本文将着重探讨 Vue-router 的底层实现原理,分析 Vue-...
    99+
    2023-05-14
  • Vue单页面应用做预渲染的方法实例
    目录前言vue-cli2.0版本vue-cli3.0版本总结前言 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr(服务端渲染)和预渲染两种解决方...
    99+
    2024-04-02
  • web前端页面渲染机制是什么
    本篇内容介绍了“web前端页面渲染机制是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!浏览器在介绍浏览...
    99+
    2024-04-02
  • 分析vue的渲染是什么
    Vue.js 前端框架在前端开发中,是一个十分流行易用的框架。它的渲染机制是Vue.js的核心机制之一,谈及 Vue.js 渲染也是相当深奥的一部分,它的基本原理和底层机制值得我们去一一剖析和探究。Vue.js 的渲染机制是如何运作的呢?在...
    99+
    2023-05-14
  • Vue列表渲染是怎样的
    Vue列表渲染是怎样的,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。   变异方法(mutationmethod),顾名思义,会改变被这...
    99+
    2024-04-02
  • Vue服务端渲染框架Nuxt的步骤
    本篇内容介绍了“Vue服务端渲染框架Nuxt的步骤”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Vue因其...
    99+
    2024-04-02
  • Vue在页面数据渲染完成之后如何调用
    这篇文章主要为大家展示了“Vue在页面数据渲染完成之后如何调用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue在页面数据渲染完成之后如何调用”这篇文章吧。在...
    99+
    2024-04-02
  • 解决vue修改数据页面不重新渲染问题
    目录vue渲染机制和如何解决数据修改页面不刷新问题的多种方法vue渲染机制和如何解决数据修改页面不刷新问题的多种方法 本文不讲原理,只讲干货易懂易学 首先 第一点,vue底层是 将d...
    99+
    2023-03-24
    vue修改数据页面 修改页面不重新渲染
  • Vue路由History mode模式中页面无法渲染怎么办
    这篇文章主要为大家展示了“Vue路由History mode模式中页面无法渲染怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue路由History mo...
    99+
    2024-04-02
  • Vue列表页渲染优化的示例分析
    小编给大家分享一下Vue列表页渲染优化的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!想法初始化时,vue会对data做...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作