当前位置：首页 > web >正文

前端开发面试题总结-vue2框架篇（二）

web 2025/6/17 22:07:26

Vue2高频问答

一、为什么 Vue 的 data 属性必须声明为返回一个初始数据的函数?

回答重点：
Vue 的 data 属性声明成一个返回初始数据的函数，是为了确保每个组件实例都有独立的状态。通过这种方式，避免了组件使用相同的数据对象导致的状态共亨和互相干扰。
扩展知识
1)组件实例的独立性
Vue 中，每个组件实例都有自己的状态。假如 data 属性是一个对象而不是函数，那么多个实例将共享同一个数据对象。当一个实例修改数据时，其他实例的状态也会受到影响，导致数据污染。通过将 data声明为函数，每个组件实例都会调用这个函数，从而返回独立的数据对象。这保证了各个实例的互不干涉。
2)Vue 实例和单文件组件的区别
在 vue 实例(如 new vue创建的根实例)中，data 可以是一个对象，因为根实例通常只有一个实例。然而，在单文件组件 (如.vue 文件)中，由于你可能会创建多个组件实例，所以data必须声明为函数。

二、Vue 在 created 和 mounted 这两个生命周期钩子中请求数据有什么区别?

在 Vue.js 中，created 和 mounted 都是常用的生命周期钩子，但它们在使用场景和请求数据时有几个主要的区别。
1)created :这个钩子在实例被创建之后调用。在这个阶段，组件实例已经完成了数据观察、计算属性和方法的初始化，但还没有挂载到 DOM 上。这意味着你可以在这个阶段进行一些数据请求，但无法访问 DOM 元素。
2)mounted:这个钩子在实例被挂载之后调用，在这个阶段，所有的子组件也会一起挂载完成。这意味着你可以访问 DOM 元素并操作它们。如果你需要做一些 DOM 相关的操作或等待组件完全挂载后再执行某些逻辑，可以选择这个钩子。

三、Vue Router 的 hash 模式和 history 模式有什么区别?

Vue Router 的 hash 模式和 history 模式主要区别在于 URL 的表现形式和实现方式。
1)hash 模式:URL中会出现#号，例如:http://example.com/#/home。hash模式的原理是基于 window.location.hash 的变化，来实现更新视图而不重新加载页面。hash 模式的核心特性是利用了浏览器对哈希的支持，使得页面在哈希值变化时不会重新加载全部内容。
2)history模式:URL是普通路径形式，例如:http:/example.com/home。history模式的原理是基于 HTML5的 history.pushstate和 history.replacestate，通过这两个 AP|来操作浏览器历史记录，改变 URL 同时不重新加载页面。所以使用 history 模式时，需要在服务端进行配置，让所有路由都指向同一个入口页面，否则会出现 404 错误。

四、为什么 Vue2 中给对象添加新属性后，界面没有刷新?

这是因为 Vue 的响应式系统对对象的属性增加进行了限制。Vue 2x不支持对象动态添加新属性的检测，所以 Vue 无法检测到对对象属性新增的变化，从而也无法自动更新界面。

五、vue中父子组件的生命周期钩子函数执行顺序

vue中的组件生命周期是: 四大阶段八大钩子, 我这里就用选项式api来和您说说他们的执行顺序

在前两个阶段: 创建和挂载阶段, 执行顺序分别是:
beforeCreate(父)—>created(父)---->beforeMount(父)—>beforeCreate(子)—>created(子)—>beforeMount(子)—>mounted(子) —> mounted(父)
在更新阶段
beforeUpdate(父) —> beforeUpdate(子) —> updated(子) —> updated(父)
销毁阶段
beforeDestroy(父) —> beforeDestroy(子) —> destroyed(子) —> destroyed(父)