Vue面试题1
目录
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。