常见事件修饰符

1: 常见事件修饰符:
   1.1: .stop 等同于javaScript 中的event.stopPropagation();  防止事件冒泡;
   1.2: .prevent： 等同于javaScript 中event.preventDefault();  防止执行预设的行为。

   1.3: .capture: 与事件冒泡方向相反, 事件捕获由外到内。
   1.4: .self： 只会触发自己范围内的事件, 不包含子元素。
   1.5： .once() 事件 只会触发一次。
---------------------------------------------------------------------------
v-if / v-show / v-html 的原理:
v-if：会调用addifCondition方法, 生成vnode 的时候忽略对应的节点操作, render 的时候就不会渲染。
v-show: 会生成vnode, render 的时候也会渲染真是的节点操作,  只是在 render的过程中会在节点的属性中修改成 show 属性值, 也就是常说的display 属性。

v-html: 回先移除节点下的所有的节点, 调用html 方法，通过addProp 添加innnerHTML 属性, 归根结底还是设置了 innnerHTML 为 v-html 的值。


v-if 和 v-show 的区别:
 1: 手段: v-if 是动态的向DOM树内添加或者删除DOM 元素; v-show: 是通过设置DOM 元素的display 样式属性控制显示与隐藏。

 2: 编译过程: v-if 切换一个局部编译/ 卸载的过程,  切换过程中合适的销毁和重建内部的事件监听和子组件, v-show: 只是简单的基于css 切换。

 3: 编译条件: v-if 是惰性的,  如果初始条件为假, 则什么也不做; 现在只有一次条件变为真时, 才会局部编译。 v-show: 是在任何条件下, 无论首次是否为真, 都会被编译, 然后被缓存。 而且DOM 元素会被保留。

4: 性能消耗: v-if 有更高的切换消耗。 v-show: 有更高的初始渲染消耗。
5: 使用场景:  v-if 适合条件不大可能改变;  v-show: 适合频繁切换。