Vue常用面试题

条件渲染
1.v-if只会渲染出符合条件的节点,v-show都会渲染,只是将不符合条件的隐藏
2.如何选择?判断为一次性的或者更新并不频繁的选择v-if,频繁的选择v-show
如果更新频繁用v-if会涉及到节点的不断销毁和渲染,影响性能
考点:
beforeDestroy中要可能要做什么?
解除绑定,销毁子组件以及事件监听器。
自定义事件的绑定要解除;比如setTimeout定时任务要销毁;自己绑定的window或document的事件要销毁;该销毁的不要遗留在内存中

考点:

父子组件 created 和 mounted created 是 vue 实例的完成,数据已经可以获取。因为父组件可能需要使用子组件的数据,故父组件需要先行 created mounted 是组件渲染完成的时刻,

父组件包含子组件,故整个父子组件的绘制完成需要所有子组件先渲染完成,父组件则在最后 mounted

创建初始化实例是从外到内的,但是渲染是从内到外的。
父 beforeCreate
父 created
父 beforeMount
子 beforeCreate
子 created
子 beforeMount
子 mounted
父 mounted

在更新组件时,跟上面类似
父 beforeUpdate
子 beforeUpdate
子 updated
父 updated

销毁阶段
父 beforeDestroy
子 beforeDestroy
子 destroyed
父 destroyed

生命周期: 

Vue高级特性:
1. 自定义v-model
2. $nextTick
3. refs
4. slot
5. 动态组件
6. 异步组件
7. keep-alive
8. mixin

vue响应式,或如何实现数据双向绑定

虚拟dom

vdom总结:
用JS模拟DOM结构(vnode)
新旧vnode对比,得出最小的更新范围,最后更新DOM(按需更新)
数据驱动视图的模式下,有效控制DOM操作

 

### Vue 常见面试题汇总 以下是关于 Vue 的常见面试题,涵盖核心概念、组件化开发、生命周期、性能优化等方面: #### 1. Vue 的双向绑定原理是什么? Vue 的双向绑定通过 `v-model` 指令实现。在底层,Vue 使用了数据劫持(通过 `Object.defineProperty` 或 `Proxy`)结合发布-订阅模式[^1]。当数据发生变化时,视图会自动更新;同样,用户在视图中的操作也会触发数据模型的更新。 #### 2. 父组件如何向子组件传递数据? 父组件可以通过 `props` 向子组件传递数据。子组件需要在 `props` 属性中定义接收的数据类型和名称。例如: ```javascript // 父组件 <child-component :message="parentMessage"></child-component> // 子组件 props: { message: { type: String, required: true } } ``` #### 3. Vue 中的事件绑定如何实现? 在 Vue 中,可以通过 `v-on` 指令绑定事件监听器。例如,绑定一个点击事件: ```html <button v-on:click="handleClick">点击我</button> ``` 或者使用简写形式: ```html <button @click="handleClick">点击我</button> ``` #### 4. Vue 的生命周期有哪些阶段? Vue 实例从创建到销毁的生命周期包括以下主要阶段:`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy` 和 `destroyed`。每个阶段都有特定的用途,例如在 `mounted` 阶段可以发起 AJAX 请求[^2]。 #### 5. Vue 中的 `keep-alive` 是什么? `keep-alive` 是 Vue 提供的一个高阶组件,用于缓存动态组件实例,避免重复渲染。它常用于需要保留组件状态的场景,比如页面切换时保留输入框内容[^3]。使用方式如下: ```html <keep-alive> <component :is="currentView"></component> </keep-alive> ``` #### 6. Vue 中的 `computed` 和 `watch` 有什么区别? `computed` 用于声明依赖于其他响应式属性的计算属性,具有缓存机制,只有当依赖的数据发生变化时才会重新计算。而 `watch` 用于观察某个数据的变化,并执行回调函数,适合处理异步操作或复杂的逻辑。 #### 7. Vue Router 的两种模式是什么? Vue Router 支持两种路由模式:`hash` 模式和 `history` 模式。`hash` 模式使用 URL 的 `#` 符号区分路径,不会发送请求到服务器;`history` 模式则利用 HTML5 的 History API 实现更美观的 URL,但需要后端配置支持。 #### 8. Vuex 的核心概念有哪些? Vuex 是 Vue 的状态管理库,其核心概念包括:`state`(存储全局状态)、`getters`(派生状态)、`mutations`(同步修改状态)、`actions`(异步操作)和 `modules`(模块化管理状态)。 #### 9. 如何优化 Vue 应用的性能? - 使用 `v-if` 替代 `v-show` 减少 DOM 元素。 - 对列表渲染使用 `key` 属性以提高虚拟 DOM 的效率。 - 在合适的地方使用 `keep-alive` 缓存组件。 - 避免在模板中直接调用复杂方法,改用 `computed` 属性。 - 使用懒加载和按需加载减少初始加载时间[^3]。 #### 10. Vue 3 相较于 Vue 2 的主要改进有哪些? Vue 3 引入了 Composition API,提供了更灵活的状态管理和逻辑复用能力。此外,Vue 3 还优化了渲染性能、减少了包体积,并增强了 TypeScript 支持[^2]。 --- ### 示例代码 以下是一个简单的 Vue 组件示例,展示 `props` 和 `v-model` 的使用: ```vue <template> <input :value="modelValue" @input="updateValue" /> </template> <script> export default { props: ['modelValue'], methods: { updateValue(event) { this.$emit('update:modelValue', event.target.value); } } }; </script> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值