一、理解：

1.可能会导致 xss 攻击。比如用v-html一定要保证你的内容是可以依赖的，例：

<input type="text" v-model="msg"/>
<div v-html="msg"></div>
// 因为用户输入的信息不可信，这样输入什么就会放入什么，v-html就相当于一个innerHTML

2.v-html 会替换掉标签内部的子元素

二、原理

    let template = require('vue-template-compiler');let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`)// 编译后，domProps就是一个innerHTMLwith(this){return _c('div',{domProps: {"innerHTML":_s('<span>hello</span>')}})}

// _c 定义在core/instance/render.js

// _s 定义在core/instance/render-helpers/index,js

三、源码

文件位置：src/platforms/web/runtiem/models/dom-props.js

function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {for (key in props) {cur = props[key]// 如果key是textContent或者innerHTML是会将vnode的子节点都变成空if (key === 'textContent' || key === 'innerHTML') {if (vnode.children) vnode.children.length = 0if (cur === oldProps[key]) continueif (elm.childNodes.length === 1) {elm.removeChild(elm.childNodes[0])}}if (key === 'value' && elm.tagName !== 'PROGRESS') {} else if (key === 'innerHTML' && isSVG(elm.tagName) && isUndef(elm.innerHTML)) {} else if (cur !== oldProps[key]) {try {elm[key] = cur // 最终elm的key会被这个值覆盖} catch (e) {}}}
}

vue核心面试题：vue中v-html会导致哪些问题相关推荐

vue核心面试题：Vue中相同逻辑如何抽离？
一.mixin 使用vue中的Vue.mixin,给组件每个生命周期.函数等混入一些公共的逻辑,另外混入对象的钩子将在组件自身钩子之前调用..mixin可以放在全局使用,也可以放在组件中使用. vue ...
vue核心面试题：v-for中为什么要用key
一.v-for中为什么要用key 1.vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地 ...
阿瑶的vue学习笔记(1)Vue核心
1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者:尤雨溪 1.1.3. Vue的特点遵 ...
前端学习笔记之-VUE框架学习-Vue核心
第一章:Vue核心 1.1.Vue简介官网介绍:https://cn.vuejs.org/v2/guide/ 1.2.初识Vue <!DOCTYPE html> <html lan ...
总结关于 Vue 框架面试题
MVVM设计模式 MVC.MVP与MVVM模式 MVC.MVP与MVVM的区别 MVVM的实现原理 Object.defineProperty()方法 ES6中定义的类和对象 JS中的文档碎片解构赋 ...
VUE教程（持续更新中）
VUE教程目录 1. VUE简介 1-1. 技术发展的过程: 2. 使用VUE框架 2-1. 构建你的第一个VUE程序 2-2.VUE核心原理 2-3. VUE组件 2-4. 工程结构 1. VUE ...
Vue全家桶（Vue基础看这篇就够了）
目录第一章:vue核心 1.1.Vue 简介 1.1.1 官网 1.1.2 Vue是什么? 1.1.3 Vue的特点 1.1.4 Vue周边库 1.2 初识Vue 1.3 模板语法 1.4 数据绑定 ...
前端面试题 Vue 中的生命函数(钩子函数)
目录一,生命周期(钩子函数) 的简介二,四类钩子函数的触发条件及使用方法钩子函数声明的位置: 1. Lifecycle-初始化 beforeCreate 和 created 2.Lifec ...
VUE 笔记（持续更新中...）
最近刚好我也在学习vue,这些是我的一些笔记,记录下来,方便用的时候查看,欢迎大家批评指正! 1. 简介 Vue.js是JavaScript MVVM(Model-View-ViewModel)框架 ...

vue核心面试题：vue中v-html会导致哪些问题

一、理解：

二、原理

三、源码

vue核心面试题：vue中v-html会导致哪些问题相关推荐

最新文章

热门文章