欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解

程序员文章站 2022-04-15 15:13:11
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令，例如: 渲染结果为:

{{message}}

里的message被解释为了普通文本，而不是输出真正的 HTML，而

输出了真正的h ......

双大括号会将数据解释为普通文本，而非 html 代码。为了输出真正的 html，你需要使用 v-html 指令，例如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <script>
        vue.config.productiontip=false;
        vue.config.devtools=false;
    </script>
    <div id="app">
        <p>{{message}}</p>
        <p v-html="message"></p>
    </div>
    <script>
        var app = new vue({
            el:'#app',
            data:{
                message:'<span style="color:#f00">hell world!</span>'
            }
        })
    </script>
</body>
</html>

渲染结果为:

Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解

<p>{{message}}</p>里的message被解释为了普通文本，而不是输出真正的 html，而<p v-html="message"></p>输出了真正的html

v-text和v-html类似，v-text以普通文本来插入，例如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <script>
        vue.config.productiontip=false;
        vue.config.devtools=false;
    </script>
    <div id="app">
        <p v-html="message">{{message}}</p>
        <p v-text="hello">你好</p>
    </div>
    <script>
        var app = new vue({
            el:'#app',
            data:{
                message:'<span style="color:#f00">hell world!</span>',
                hello:"hello world"
            }
        })
    </script>
</body>
</html>

渲染的结果为:

Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解

 源码分析

我们以第二个例子为例。

v-html和v-text都是内部指令，它们有初始化函数，分别如下:

function text (el, dir) {       //第9785行 v-text指令
  if (dir.value) {
    addprop(el, 'textcontent', ("_s(" + (dir.value) + ")")); 　　　　//给el.prop上增加一个textcontext属性
  }
}
function html (el, dir) {       //第9788行 v-html指令
  if (dir.value) {
    addprop(el, 'innerhtml', ("_s(" + (dir.value) + ")")); 　　　　　//给el.prop上增加一个innerhtml属性
  }
}

parse()解析模板时会执行processattrs()函数，如下:

function processattrs (el) {  //第9526行 对剩余的属性进行分析
  var list = el.attrslist; 
  var i, l, name, rawname, value, modifiers, isprop;
  for (i = 0, l = list.length; i < l; i++) {
    name = rawname = list[i].name;
    value = list[i].value;
    if (dirre.test(name)) {           //如果该属性以v-、@或:开头，表示这是vue内部指令
      // mark element as dynamic
      el.hasbindings = true;
      // modifiers
      modifiers = parsemodifiers(name);
      if (modifiers) {
        name = name.replace(modifierre, '');
      }
      if (bindre.test(name)) { // v-bind        
        /*v-bind的分支*/
      } else if (onre.test(name)) { // v-on
        /*v-on的分支*/
      } else { // normal directives               //普通指令
        name = name.replace(dirre, '');               //去掉指令前缀，比如v-model执行后等于model
        // parse arg
        var argmatch = name.match(argre);
        var arg = argmatch && argmatch[1];
        if (arg) {
          name = name.slice(0, -(arg.length + 1));
        }
        adddirective(el, name, rawname, value, arg, modifiers);     //执行adddirective给el增加一个directives属性，值是一个数组，例如:[{name: "model", rawname: "v-model", value: "message", arg: null, modifiers: undefined}]
        if ("development" !== 'production' && name === 'model') {
          checkforaliasmodel(el, value);
        }
      }
    } else {
      /*普通属性的分支*/
      }
    }
  }
}

function adddirective (     //第6561行  指令相关，给el这个ast对象增加一个directives属性，值为该指令的信息，比如:
  el,
  name,
  rawname,
  value,
  arg,
  modifiers
) {
  (el.directives || (el.directives = [])).push({ name: name, rawname: rawname, value: value, arg: arg, modifiers: modifiers });
  el.plain = false;
}

对于<p v-html="message">{{message}}</p>节点来说，他的ast对象如下:

Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解

对于<p v-text="hello">你好</p>对象来说，他的ast对象如下:

Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解

执行gendata$2()拼凑data属性时会先执行gendirectives()函数，该函数会执行v-html和v-text指令的安装函数，添加对应的prop属性，最后会转换为domprops属性，例子里的代码经过解析后生产的render函数如下:

with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{domprops:{"innerhtml":_s(message)}},[_v(_s(message))]),_v(" "),_c('p',{domprops:{"textcontent":_s(hello)}},[_v("你好")])])}

可以看到给两个p元素分别添加了一个domprops属性，值为对应的信息,

最后渲染成对应的真实的dom节点后就会执行domprops模块(vue内置的模块，当dom元素渲染、更新、删除时做一些操作)的初始化函数，也就是updatedomprops函数，如下:

function updatedomprops (oldvnode, vnode) {       //第7102行 更新dom对象的props
  if (isundef(oldvnode.data.domprops) && isundef(vnode.data.domprops)) {    //如果oldvnode和vnode的data上都没有domprops属性
    return                                                                    //则直接返回不做处理
  }
  var key, cur;
  var elm = vnode.elm;                                                      //vnode对应的dom节点对象
  var oldprops = oldvnode.data.domprops || {};
  var props = vnode.data.domprops || {};                                    //vnode的domprops对象
  // clone observed objects, as the user probably wants to mutate it
  if (isdef(props.__ob__)) {
    props = vnode.data.domprops = extend({}, props);
  }

  for (key in oldprops) {
    if (isundef(props[key])) {
      elm[key] = '';
    }
  }
  for (key in props) {                                                    //遍历props 对于<p v-html="message">{{message}}</p>这个节点来说，这里的key等于:innerhtml 
    cur = props[key];                                                         //获取对应的值,对于<p v-html="message">{{message}}</p>这个节点来说，cur等于:"<span style="color:#f00">hell world!</span>" 
    // ignore children if the node has textcontent or innerhtml,
    // as these will throw away existing dom nodes and cause removal errors
    // on subsequent patches (#3360)
    if (key === 'textcontent' || key === 'innerhtml') {                   //如果key等于textcontent或innerhtml，这里是对指令v-html和v-text的支持
      if (vnode.children) { vnode.children.length = 0; }                      //如果有子节点，则删除它们
      if (cur === oldprops[key]) { continue }                       
      // #6601 work around chrome version <= 55 bug where single textnode
      // replaced by innerhtml/textcontent retains its parentnode property
      if (elm.childnodes.length === 1) {
        elm.removechild(elm.childnodes[0]);
      }
    }

    if (key === 'value') {                                                //如果key等于value
      // store value as _value as well since
      // non-string values will be stringified
      elm._value = cur;
      // avoid resetting cursor position when value is the same
      var strcur = isundef(cur) ? '' : string(cur);
      if (shouldupdatevalue(elm, strcur)) {
        elm.value = strcur;
      }
    } else {
      elm[key] = cur;                                                     //否则直接设置elm的key属性值为cur，也就是设置元素的innerhtml或textcontent属性
    }
  }
}

从updatedomprop函数内看到，对于v-html或v-text指令来说，如果有子节点，会每个删除掉，所以如果一个元素绑定了v-html或v-text指令，它的子节点时将忽略掉。

总结:通过源码可以发现，对于v-html和v-text来说，vue是通过设置元素原生的innerhtml或textcontent这两个属性来实现的。

 

上一篇： js utc转当地时间

下一篇： Socket抽象层

推荐阅读