v html的原生实现,Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解-CSDN博客

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

document

vue.config.productiontip=false;

vue.config.devtools=false;

var app = new vue({

el:'#app',

data:{

message:'hell world!'

}

})

渲染结果为:

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

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

document

vue.config.productiontip=false;

vue.config.devtools=false;

你好

var app = new vue({

el:'#app',

data:{

message:'hell world!',

hello:"hello world"

}

})

渲染的结果为:

源码分析

我们以第二个例子为例。

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;

}

对于

节点来说，他的ast对象如下:

对于

你好

对象来说，他的ast对象如下:

执行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__)) {