## v-model如何实现双向绑定 `v-model`本质是`v-bind`和`v-on`的语法糖，用来在表单控件或组件上创建双向绑定。 ~~~ <input v-model='searchText'> 等价于 <input v-bind:value='searchText' v-on:input='searchText = $event.target.value'> ~~~ 在一个组件上使用`v-model`，默认会为组件绑定名为`value`的`prop`和名为`input`的事件 ## v-show / v-if 的区别是什么？ * `v-if`指如果条件不成立则不会渲染当前指令所在节点的`Dom`元素，会在切换过程中对条件块的事件监听器和子组件进行销毁和重建 * `v-show`只是基于`css`进行切换，不管条件是什么，都会进行渲染（切换`display:block | none`） So：`v-if`切换的开销较大，而`v-show`初始化的开销较大，所以在需要频繁切换显示和隐藏的`Dom`元素时，使用`v-show`更合适，渲染后很少进行切换则使用`v-if`较合适 > v-show 控制的是元素的CSS（display）；v-if 是控制元素本身的添加或删除。 > > v-show 由 false 变为 true 的时候不会触发组件的生命周期。 > > v-if 由 false 变为 true 则会触发组件的beforeCreate、create、beforeMount、mounted钩子，由 true 变为 false 会触发组件的beforeDestory、destoryed方法。 > > v-if 比 v-show有更高的性能消耗。 ### v-if不能和v-for一起用 性能浪费，每次渲染都要先循环再进行条件判断，考虑用计算属性替代。 Vue2.x中v-for比v-if更高的优先级。 Vue3.x中v-if 比 v-for 更高的优先级。 >当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级， 这意味着 v-if 将分别重复运行于每个 v-for 循环中。 所以，不推荐v-if和v-for同时使用。 如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。 ## Vue中 v-html 有什么作用？会导致什么问题？ `v-html`可以用来识别HTML标签并渲染出去 **导致问题：**在网站上动态渲染任意`Html`，很容易导致受到`Xss`攻击，所以只能在可信内容上使用`v-html`，且永远不能用于用户提交的内容上