第 147 题：v-if、v-show、v-html 的原理是什么，它是如何封装的？

Question

v-if 指令的作用是根据表达式的真假切换元素的显示状态，本质是通过操纵 dom 元素来切换显示状态，表达式的值为 true，元素存在于 dom 树中，为 false 从 dom 树中移除，频繁的切换使用 v-show，反之使用 v-if，前者的切换消耗小。

Answer 1

如何根据v-if的原理写一个v-permission,要求切换权限时节点可以被删除,也可以在删除后被添加回来

https://stackoverflow.com/questions/43003976/a-custom-directive-similar-to-v-if-in-vuejs

Answer 2

如何根据v-if的原理写一个v-permission,要求切换权限时节点可以被删除,也可以在删除后被添加回来

Answer 3

v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；
v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值

所以在使用v-html的时候可能会存在XSS攻击的漏洞，被植入可执行的脚本

Answer 4

v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；
v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值

Answer 5

v-if： Watcher监听数据变化，然后，render函数生成VNode对象，patch方法对比新旧VNode, DOM Diff 算法修改真正的DOM元素

Answer 6

v-if：当隐藏结构时该结构会直接从整个dom树中移除；

v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。