【面试笔记（四）】

面试笔记

一.var、let、const 区别 ?

var、let 和 const 是 JavaScript 中用于声明变量的关键字，它们在作用域、可变性和全局对象属性方面有所不同。

1. var：

   • 作用域：var 声明的变量具有函数作用域或全局作用域。在函数内部声明的 var 变量只能在该函数内部访问，在函数外部声明的 var 变量则成为全局变量。
   • 可变性：var 声明的变量是可变的，可以在任何时候重新赋值。
   • 全局对象属性：在全局作用域下，var 声明的变量会成为全局对象（在浏览器中是 window 对象）的属性。

var globalVar = 'I am global'; // 全局变量
   function testVar() {
     var localVar = 'I am local'; // 局部变量
}

2. let：

   • 作用域：let 声明的变量具有块级作用域，即只能在包含它的代码块（如 if 语句、for 循环等）内部访问。
   • 可变性：let 声明的变量也是可变的，但它们不能在声明之前被访问（暂时性死区）。
   • 全局对象属性：在全局作用域下，let 声明的变量不会成为全局对象的属性。

let globalLet = 'I am global'; // 全局变量，但不会成为 window 对象的属性
if (true) {
 let blockVar = 'I am block scoped'; // 块级作用域
}

3. const：

   • 作用域：与 let 相同，const 也具有块级作用域。
   • 可变性：const 声明的变量是不可变的，这意味着一旦被赋值，就不能再重新赋值。但是，如果它指向的是一个对象，对象内部的属性仍然可以修改。
   • 全局对象属性：与 let 相同，const 在全局作用域下声明的变量不会成为全局对象的属性。

const globalConst = 'I am global and immutable'; // 全局常量
if (true) {
 const blockConst = 'I am block scoped and immutable'; // 块级常量
}

4. 总结：
   • 作用域：var 是函数或全局作用域，let 和 const 是块级作用域。
   • 可变性：var 和 let 是可变的，const 是不可变的（但指向的对象内部属性可变）。
   • 全局对象属性：var 在全局作用域下会成为全局对象的属性，let 和 const 不会。
   • 暂时性死区：let 和 const 在声明前存在暂时性死区，var 不存在这个问题。

二. 说出常用的Vue指令 ？

1. v-bind 或 :：用于动态地绑定一个或多个属性，或一个组件 prop 到表达式。

  <img v-bind:src="imageSrc"> <!-- 缩写为 -->
  <img :src="imageSrc">

2. v-model：在表单控件元素上创建双向数据绑定。

  <input v-model="message">

3. v-for：用于基于数组或对象进行列表渲染。

  <div v-for="item in items" :key="item.id">
  	 {{ item.text }}
  </div>

4. v-if：条件性地渲染元素。

  <div v-if="isVisible">可见内容</div>

5. v-show：条件性地渲染元素（元素始终保留在 DOM 中）。

  <div v-show="isVisible">这段内容会根据 isVisible 的值显示或隐藏。</div>

6. v-on 或 @：用于监听 DOM 事件并在触发时执行表达式。

  <button v-on:click="sayHello">点击我</button> <!-- 缩写为 -->
  <button @click="sayHello">点击我</button>

三. v-show 与 v-if 的区别 ？ 各自的适用场景 ？

v-show 和 v-if 都是 Vue.js 中用于条件渲染的指令，但它们在行为和适用场景上有所不同。

1. v-show的特点：
   • 切换 CSS 属性：v-show 通过切换元素的 display CSS 属性来显示或隐藏元素。无论条件真假，元素始终保留在 DOM 中。
   • 性能：当需要频繁切换元素的显示状态时，v-show 更高效，因为它不涉及元素的创建和销毁。
   • 初始渲染：即使初始条件为 false，元素也会被渲染到 DOM 中，只是不可见。
2. v-if 的特点：
   • 条件性渲染：v-if 根据条件真假决定元素是否被渲染到 DOM 中。如果条件为 false，元素不会被创建。
   • 性能：对于不需要频繁切换显示状态的场景，v-if 更合适。它在初始渲染时有更高的性能开销，因为涉及元素的创建和销毁。
   • 初始渲染：如果初始条件为 false，元素不会被渲染到 DOM 中。
3. 适用场景：

• 使用 v-show 的场景：

  • 当你需要频繁切换元素的显示状态，例如切换菜单、显示/隐藏详情等。
  • 当元素的初始状态不重要，或者你希望元素始终存在于 DOM 中。

• 使用 v-if 的场景：

  • 当你希望在某些条件下完全不渲染元素，例如根据用户权限显示不同的内容。
  • 当初始条件为 false 时，你不希望元素被渲染到 DOM 中，以减少初始渲染的负担。
  • 当你处理列表渲染时，如果列表项的渲染成本较高，使用 v-if 可以避免渲染那些不会被显示的项。