Vue面试题1-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56131422/article/details/142033935

1.简述 v-if 和 v-show 的区别？

2.简述Vue有哪些内置指令？

3.简述Vue computed 和 watch 区别和运用的场景？

4.简述 Vue 2.0 响应式数据的原理？

5.请解释Vue的父子组件生命周期钩子函数执行顺序？

1.简述 v-if 和 v-show 的区别？

v-if 是条件渲染指令，只有当条件为真时，元素才会被渲染并插入 DOM。

v-show 通过设置 CSS 的 display 属性来控制元素的显示与隐藏，无论条件如何，元素都会存在于 DOM 中，只是不可见。

以下示例中，通过点击按钮来切换 isVisible 的值，你可以观察到 v-if 的元素会被添加或移除，而 v-show 的元素则只是在视觉上显示或隐藏。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue v-if vs v-show</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>使用 v-if</h2>
    <p v-if="isVisible">这个段落只有在 isVisible 为 true 时才会被渲染到 DOM 中。</p>

    <h2>使用 v-show</h2>
    <p v-show="isVisible">这个段落总是会被渲染到 DOM 中，只是根据 isVisible 控制是否显示。</p>

    <button @click="toggleVisibility">切换可见性</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isVisible: true
      },
      methods: {
        toggleVisibility() {
          this.isVisible = !this.isVisible;
        }
      }
    });
  </script>
</body>
</html>

2.简述Vue有哪些内置指令？

Vue 的内置指令包括：v-bind（绑定属性），v-model（双向数据绑定），v-if（条件渲染），v-else（与 v-if 配合使用），v-else-if（条件分支），v-for（列表渲染），v-on（事件监听），v-show（显示隐藏），v-pre（跳过编译），v-cloak（保持元素在 Vue 实例编译前隐藏），v-once（只渲染一次）。

3.简述Vue computed 和 watch 区别和运用的场景？

computed 用于定义计算属性，依赖于 Vue 实例的数据属性。它们会基于其依赖的响应式数据进行缓存，只有当这些依赖的数据变化时，计算属性才会重新计算。计算属性会被缓存，直到其依赖的数据发生变化。适用于需要基于现有数据进行复杂计算或逻辑处理的场景，其值会被缓存，直到相关数据改变。

watch 是观察者，用于观察 Vue 实例的数据属性，并在这些属性发生变化时执行特定的回调函数。用于在数据变化时执行异步操作或复杂逻辑，适合用于监控特定数据的变化并触发副作用。

4.简述 Vue 2.0 响应式数据的原理？

Vue 2.0 响应式数据的原理基于数据劫持和发布-订阅模式。通过 Object.defineProperty 对数据对象的属性进行劫持，实现数据变化时自动通知观察者并触发视图更新。

5.请解释Vue的父子组件生命周期钩子函数执行顺序？

在 Vue 的父子组件中，生命周期钩子函数的执行顺序如下：

父组件的 beforeCreate → 子组件的 beforeCreate → 父组件的 created → 子组件的 created → 父组件的 beforeMount → 子组件的 beforeMount → 子组件的 mounted → 父组件的 mounted。