Vue常见指令

v-text 指令，设置标签的内容

v-html 指令（不建议使用），会用一个HTML标签字符串，替换该元素下面的所有内容。

但是，不建议使用v-html指令，因为它会导致被恶意者进行XSS攻击的潜在风险。

v-show 指令，控制元素的显示隐藏，元素存在并占据空间。

元素隐藏时，相当于给该元素添加了CSS 样式：display:none;

v-if指令，控制元素是否加载。

v-esle-if/v-else指令不能单独使用，必须配合v-if一起使用。

v-if 与 v-show

v-if：有更高的切换开销；

v-show：有更高的初始化开销。

若需要频繁的切换则使用 v-show 比较好，否则使用 v-if 比较好。

v-for 指令，for循环，基于源数据多次渲染元素或模板块。

v-for 既可以渲染一个数组，也可以渲染一个对象。

v-if 与 v-for

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

在 vue2 中 v-for 比 v-if 有更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。

在 vue3 中 v-if 比 v-for 有更高的优先级。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。

v-bind 指令，可简写为“:”，动态地绑定一个或多个属性，或一个来自父组件的 prop 里的表达式

v-on指令，专门用于给元素绑定监听事件

v-model 指令，是双向绑定的语法糖。

双向绑定：当数据变化视图同步更新，当视图更新数据也会同步更新。

vue 在实例化的时候，使用 Object.definePropety() 方法或 Proxy 构造函数，

对 data 进行 getter 和 setter 的处理。在组件渲染时，若用到 data 里的某个数据，

这个数据就会被依赖收集进 watcher 里。当数据更新，如果这个数据在 watcher 里，

就会收到通知并更新，否则不会更新——vue 采用“数据劫持”+“观察者模式（发布者-订阅者模式）”

相结合的方式实现了双向绑定

第一步，“数据劫持”：vue 2.x 用 Object.defineProperty() 方法来实现数据劫持，为每个属性分配一个订阅者集合的管理数组 dep；vue 3.x 用 ES6 的 Proxy 构造函数来实现数据劫持。

第二步，“添加订阅者”：在编译的时候在该属性的数组 dep 中添加订阅者，添加方式包括：v-model 会添加一个订阅者，{{}} 也会，v-bind 也会，只要用到该属性的指令理论上都会。

第三步，“为 input 添加监听事件”：为 input 添加监听事件，修改值就会为该属性赋值，触发该属性的 set() 方法，在 set() 方法内通知订阅者数组 dep，订阅者数组循环调用各订阅者的 update() 方法更新视图。