v-text v-html {{}} 的区别 和 v-if v-show 的区别

• v-text 与 {{}} 区别
  • 1- 相同点 ：设置文本
  • 2- 不同点 ：插值存在页面闪烁问题 v-text 不存在闪烁
  • 解决办法：
    • 给设置插值的父标签 添加指令v-cloak 在样式中设置 [v-cloak]{display:none}
• v-text 与 v-html 区别
  • 1- 相同点 ：设置文本
  • 2- 不同点 ：v-text 不能解析html元素，v-html可以
• v-show 与 v-if 的区别
  • 1- 操作
    • v-if ：向DOM树添加或者删除DOM元素
    • v-show ：控制css中display属性 进行元素的显示与隐藏
  • 2- 编译过程
    • v-if : 局部编译卸载的过程：在切换过程中，销毁或者重建 组件中的事件与子组件
    • v-show : 执行css的切换
  • 3- 编译条件
    • v-if : 惰性，只有条件为true的时候才会编译解析组件
      • v-show : 任何情况下都会自动加载，然后控制元素的显示与隐藏
  • 4- 性能消耗
    • v-if : 切换消耗高
    • v-show : 只有初始渲染消耗
  • 5- 使用场景
    • v-if : 改变频率不频繁
    • v-show : 频繁切换
  • 6- 为什么列表渲染时要单独绑定key值
    • 1- 唯一标识
    • 2- 如果列表项自身有id区分（唯一的证明）则使用即可，如果不存在则依赖key值作为唯一标识
  • 7- v-model双向绑定的原理
    • get 、set 此处留给你们课下分析
    • 1- 观察者模式 ：当属性发生改变时，使用该数据的地方也会发生改变
    • 2- 数据劫持 ：object.defineproperty 给属性赋值时，程序可以感知到，从而改变属性值