【小白鲨笔记】vue面试题（二）

二、v-if与v-show，ref，scoped

---

1. v-if 与 v-show

• 共同点：都用于逻辑显示/隐藏DOM元素

• 不同点：

  • v-if：添加/移除HTML元素（更耗费性能）

  • v-show：添加/删除display：none属性

---

2. ref

• 作用：给元素/子组件注册引用信息，引用信息添加至父组件的refs上

  1. 普通DOM元素：指向DOM元素（可直接获取DOM元素）

  2. 子组件：指向子组件实例

• 优点

  • 更安全：ref是vue中的方法，不依赖class或者id样式

  • 减少对DOM节点的操作、消耗

❗refs是非响应式，不能再模板中做数据绑定，初始渲染时不能访问refs

<div ref="a"></div>
console.log(this.$refs.a) // 将获取上面的DOM元素

---

3. scoped

• 作用：进行样式隔离，组件共享时，让样式只在当前组件生效，不影响其他组件

• 原理：给节点新增自定义属性，再用css以属性选择器的方式添加样式

<style scoped>
p { color: red; } // 实际上该选择器为 p[data-xx]
</style>