数据绑定最常见的形式就是使用“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.  
  10. function genOnce (el, state) {              //第10179行  渲染v-once指令
  11.   el.onceProcessed = true;
  12.   if (el.if && !el.ifProcessed) {             //如果有定义了v-if指令
  13.     return genIf(el, state)
  14.   } else if (el.staticInFor) {                //如果是在v-for环境下
  15.     var key = '';
  16.     var parent = el.parent;
  17.     while (parent) {
  18.       if (parent.for) {
  19.         key = parent.key;
  20.         break
  21.       }
  22.       parent = parent.parent;
  23.     }
  24.     if (!key) {
  25.       "development" !== 'production' && state.warn(
  26.         "v-once can only be used inside v-for that is keyed. "
  27.       );
  28.       return genElement(el, state)
  29.     }
  30.     return ("_o(" + (genElement(el, state)) + "," + (state.onceId++) + "," + key + ")")
  31.   } else {
  32.     return genStatic(el, state)               //否则直接调用genStatic()函数
  33.   }
  34. }

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函数，如下:

writer by:大沙漠 QQ:22969969

  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配合使用，则它会被当作一个静态节点来对待，经过了第一次渲染后就会把模板缓存起来，以后的更新渲染都只是从缓存中拿出结果而已。

Vue.js 源码分析(二十) 指令篇 v-once指令详解的更多相关文章

  1. Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...

  2. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  3. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  4. Vue.js 源码分析(二十四) 高级应用 自定义指令详解

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...

  5. Vue.js 源码分析(二十二) 指令篇 v-model指令详解

    Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语 ...

  6. Vue.js 源码分析(二十五) 高级应用 插槽 详解

    我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...

  7. jQuery 源码分析(二十) DOM操作模块 插入元素 详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...

  8. Vue.js 源码分析(二十三) 指令篇 v-show指令详解

    v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...

  9. Vue.js 源码分析(二十一) 指令篇 v-pre指令详解

    该指令会跳过所在元素和它的子元素的编译过程,也就是把这个节点及其子节点当作一个静态节点来处理,例如: <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. laravel使用Dingo\Api通过response()->json()返回空对象

    laravel使用Dingo\Api写接口跟android对接时,android一直反应解析错误,无法解析数据. { "status_code":200, "messag ...

  2. laravel中控制器的创建和使用(五)

    laravel中我们可以使用 artisan 命令来帮助我们创建控制器文件. php artisan make:controller TestController TestController 控制器 ...

  3. 深入理解JVM，7种垃圾收集器

    本人免费整理了Java高级资料,一共30G,需要自己领取.传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 如果说收集算法是内存回收的方法论, ...

  4. MySQL基于报错注入2

    目标站点: 0x1 注入点判断 http://www.xxxxxx.com/pages/services.php?id=1 #true http://www.xxxxxx.com/pages/serv ...

  5. 剑指offer 15：链表的倒数第k个节点

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 解题思路 使用快慢指针法,让快指针先走k步,然后再让慢指针开始走,当快指针到达链表尾部时,慢指针刚好到达倒数第k个节点. C++代码实现: /* ...

  6. Python 字符串用法总结

    一.将某个对象转换为字符串,有str()和repr()两种方法 区别:repr() 转化为供解释器读取的形式str() 转化为适于人阅读的形式 a = 123456 print('repr输出:', ...

  7. [20190530]oracle Audit文件管理.txt

    [20190530]oracle Audit文件管理.txt --//昨天听课,讲一些oracle相关安全的问题,对方提到audit file的管理,应该引入OS audit,这样目的是仅仅root查 ...

  8. [Linux] centos6.5升级安装的supervisor

    因为我要用它来管理多个PHP进程去执行任务,在默认版本下的配置多个子进程不起作用 默认版本的supervisor版本比较低2.1.9,对于运行多个子进程貌似有问题,最新版的supervisor4.1的 ...

  9. Shell脚本（1）

    在创建Shell脚本时,必须在文件的第一行指定要使用的shell.格式为:#!/bin/bash 除了第一行外,在shell脚本中井号(#)用作注释行 若出现错误:command not found ...

  10. Linux的启动过程的分析

    Linux的启动过程 Linux系统从启动大哦提供服务的基本过程为:首先机器家电,然后通过MBR或者UEFI装载GRUB,再启动内核,再由内核启动服务,最后开始对外服务 CentOS7要经历四个主要阶 ...