经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Vue.js 源码分析(二十) 指令篇 v-once指令详解
来源:cnblogs  作者:大沙漠  时间:2019/7/8 12:04:04  对本文有异议

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,例如:<p>Message: {{ msg }}</p>以后每当msg属性发生了改变,插值处的内容都会自动更新。

可以给DOM节点添加一个v-once指令,这样模板只会在第一次更新时显示数据,此后再次更新该DOM里面引用的数据时,内容不会自动更新了,例如:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="d" v-once>
  10. <p>{{message}}</p>
  11. </div>
  12. <script>
  13. Vue.config.productionTip=false;
  14. Vue.config.devtools=false;
  15. var app = new Vue({el:'#d',data:{message:'Hello World!'}})
  16. </script>
  17. </body>
  18. </html>

DOM渲染为:

为了验证修改message属性不会触发DOM更新,我们在控制台输入app.message="Hello Vue"来修改message属性

可以发现DOM并未更新,此时app.message等于"Hello Vue!"的,我们打印看看,如下:

可以看到app.message等于Hello Vue!,为什么没有触发更新了,因为Vue内部把模板缓存起来了,把v-once对应的节点当作一个静态节点来看待,而不是一个响应式的数据(没有经过Object.defineproperty处理)


 源码分析


 在解析模板生成AST节点树对象的时候会通过processOnce尝试去获取v-once指令,如果有定义则在当前AST对象上增加一个once属性,值为true,如下:

  1. function processOnce (el) { //第9460行 解析v-once属性
  2. var once$$1 = getAndRemoveAttr(el, 'v-once'); //获取v-once属性
  3. if (once$$1 != null) { //如果存在,则给el增加一个once属性,值为true
  4. el.once = true;
  5. }
  6. }

例子里的模板解析时执行到这里后等于:

 

接下来在generate生成rendre函数的时候会先判断AST中有无once属性,如果有则调用genOnce函数,genOnce会调用genStatic()去生成一个静态节点

  1. function genElement (el, state) { //第10139行 生成函数字符串
  2. if (el.staticRoot && !el.staticProcessed) {
  3. return genStatic(el, state)
  4. } else if (el.once && !el.onceProcessed) { //如果有设置了once属性,则调用genOnce()函数
  5. return genOnce(el, state)
  6. } else if (el.for && !el.forProcessed) {
  7. /**/
  8. }
  9. function genOnce (el, state) { //第10179行 渲染v-once指令
  10. el.onceProcessed = true;
  11. if (el.if && !el.ifProcessed) { //如果有定义了v-if指令
  12. return genIf(el, state)
  13. } else if (el.staticInFor) { //如果是在v-for环境下
  14. var key = '';
  15. var parent = el.parent;
  16. while (parent) {
  17. if (parent.for) {
  18. key = parent.key;
  19. break
  20. }
  21. parent = parent.parent;
  22. }
  23. if (!key) {
  24. "development" !== 'production' && state.warn(
  25. "v-once can only be used inside v-for that is keyed. "
  26. );
  27. return genElement(el, state)
  28. }
  29. return ("_o(" + (genElement(el, state)) + "," + (state.onceId++) + "," + key + ")")
  30. } else {
  31. return genStatic(el, state) //否则直接调用genStatic()函数
  32. }
  33. }

genStatic函数是静态节点渲染时的分支,如下:

  1. function genStatic (el, state) { //第10172行
  2. el.staticProcessed = true;
  3. state.staticRenderFns.push(("with(this){return " + (genElement(el, state)) + "}")); //再次调用genElement(el, state),但是结果保存到state.staticRenderFns里面
  4. return ("_m(" + (state.staticRenderFns.length - 1) + (el.staticInFor ? ',true' : '') + ")") //对于静态节点,返回格式为_m(id),id为staticRenderFns数组属性里的索引,生成Vnode时用于缓存用的
  5. }

对于v-once和静态节点来说,渲染后它的render函数是一个_m函数,其中参数是一个索引值,是存储在staticRenderFns数组属性对应的索引,每个值是一个静态DOM,只会渲染一次的

例子里的模板渲染后等于render和staticRenderFns属性如下:

最后执行render函数的时候就会执行_m(0)这个函数,_m等于全局的renderStatic函数,如下:

  1. function renderStatic ( //第3869行 渲染静态节点
  2. index,
  3. isInFor
  4. ) {
  5. var cached = this._staticTrees || (this._staticTrees = []); //这个是缓存
  6. var tree = cached[index]; //尝试从缓存中拿到tree
  7. // if has already-rendered static tree and not inside v-for,
  8. // we can reuse the same tree.
  9. if (tree && !isInFor) { //如果该静态AST在缓存中有了,而且不是在v-for环境下
  10. return tree //则直接返回tree即可
  11. }
  12. // otherwise, render a fresh tree.
  13. tree = cached[index] = this.$options.staticRenderFns[index].call( //调用$options.staticRenderFns里对应的函数渲染成一个Vnode,并保存到缓存中
  14. this._renderProxy,
  15. null,
  16. this // for render fns generated for functional component templates
  17. );
  18. markStatic(tree, ("__static__" + index), false); //设置标记
  19. return tree
  20. }

可以看到对于v-once节点来说,如果没有和v-if或v-for配合使用,则它会被当作一个静态节点来对待,经过了第一次渲染后就会把模板缓存起来,以后的更新渲染都只是从缓存中拿出结果而已。

原文链接:http://www.cnblogs.com/greatdesert/p/11149610.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号