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

[yygmind]

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

[Leader755]

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

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

[zeroone001]

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

[brady0316]

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

[JaykeyGuo]

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

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

[yangmin4052]

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

[yft]

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

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