搞明白这个,能帮助我们理解开发中出现的很多问题。
一、我们先来回顾一下vue模板服务器托管网的渲染过程:
(1)执行render函数,生成虚拟DOM。
render函数是根据render、templete、el这三个选项得来的,优先级依次降低。如果有render函数,则直接使用;否则如果有templete选项,则把templete作为模板编译成render函数;否则把el的outerHTML作为模板编译成render函数。单页面组件中,使用标签作为模板编译成render函数。
render函数首次执行时,会触发模板依赖数据的getter,getter会记录哪个模板用到了自己,同时模板也会记录自己用到了哪些属性,这个过程叫依赖收集。
每次模板重新渲染时,模板中的表达式、methods函数、全局函数都会重新执行。因为render函数就是个函数,当它执行时,里面的表达式和函数都会跟着执行。但这里面有一个例外,就是计算属性,因为计算属性会缓存结果,多用计算属性是个好习惯。
(2)虚拟DOM和数据结合,生成真实的DOM。
(3)如果不是首次渲染,生成的服务器托管网虚拟DOM会和原来的进行比较,通过diff算法,计算出来最少的需要更新的DOM。
(4)如果是首次渲染,把DOM挂载到页面中。如果是重新渲染,则更新DOM。这一步是vue能影响的最后一步。
(5)浏览器渲染页面。这一步是浏览器渲染进程操作的,和vue无关。但vue可以在上一步里,计算出DOM的最小更新,来尽量避免回流和重绘。
二、首次渲染和重新渲染的不同
(1)执行时机和原理不同
vue从创建实例,到mounted执行结束,这一整个生命周期是一个同步的过程。意味着,如果你试图在created前加async,来让异步数据获取完成后再进入beforeMount钩子,是没用的。
模板的首次渲染,也是一个同步的过程。它是从beforeMount的同步代码结束开始,同步的生成虚拟DOM、真实DOM、挂载到页面这一系列操作之后,最后进入mounted钩子。
但是,从模板首次渲染完成,也就是从进入mounted钩子开始,之后的渲染逻辑就完全不一样了,被称为异步更新队列。如果说首次渲染是生命周期驱动的,那么重新渲染,就是数据的变化驱动的。
当模板所依赖的属性被重新赋值时,该属性的setter被触发。因为这个属性记录了哪些模板用到了自己,它就通知这些模板的Watcher进入微任务队列。在同一个事件循环中,如果一个模板所依赖的多个属性发生改变,它不会被重复放入到微任务队列。这就是我们所熟悉的,多次修改数据,vue只会更新DOM一次。
哪些操作会导致模板的重新渲染呢?从mounted钩子开始,所有对模板依赖数据的更改,都会导致模板的重新渲染。
比如,在mounted中同步修改数据,在浏览器事件中修改数据,在created中异步获取数据后修改数据等。
(2)依赖数据不同
要注意的是,我们通常习惯在created里异步获取数据,异步数据是不会参与到模板的首次渲染中的。当异步数据获取成功后,数据的改变会触发模板的重新渲染。
模板首次渲染采用的数据,是prop、data、计算属性的初始值。更准确的说,是render函数开始执行之前的数据。
那么,在beforeCreate、created、beforeMount里对数据进行的同步操作,是会作用于模板的首次渲染的。而所有的异步数据,以及mounted中对数据的修改,首次渲染都是用不到的。
无论是首次渲染还是重新渲染,都是基于当前的数据。首次渲染时使用的是实例创建时的数据状态,而重新渲染则是基于数据变化后的最新状态。
三、所以,知道这些有什么用?
(1)在给data中的属性设初始值时,要考虑健壮性。不要忘了,这些初始值会用于模板的首次渲染。
在开发中我们经常犯这样的错误,就是没有考虑data初始值对首次渲染的兼容。当然,有个好处是代码会报错,帮助我们发现错误。
给我们的启发是什么呢?对data赋初值,能多赋,不要少赋。我以前喜欢把所有属性初始值都设为null,这个习惯很不好,容易报错。我们应该设置有意义的初始值,至少应该用[]、”、0这些代替null。
(2)开发中经常出现,进入页面后某个元素闪一下没了。
是因为我们在这个元素使用了v-if,首次使用初始值渲染时是有的,后面异步获取数据后重新计算就没了,所以会闪一下。
为了避免这个问题,我们应该养成一个习惯,就是元素默认是不显示的,拿到异步数据后再决定是否显示,这样就避免了闪一下的情况出现。如果在元素上再加一个进入动画,就更好了。
还有一个v-cloak指令也是解决闪烁问题的,好像是解决{{}}闪烁问题的,我还没有用过。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
一、背景简介 站长工作台,致力于为京东物流所有站长、运营管理人员提供高效工作平台,拥有多元化的业务形态。我们力求提升团队研发效率、实现敏捷业务交付,以打造一支具备灵活性、高度协作和强适应能力的敏捷团队。 二、提效案例描述 2.1、痛点分析 站长工作台的报表页面…