vue面试题.pdf

标题：vue面试题.pdf 描述：vue常见面试题总结 标签：vue 面试 vue.js js 1. v-show与v-if的区别 在Vue中，v-show与v-if都是用来根据条件控制DOM元素的显示与隐藏，但它们的工作原理不同。v-show操作的是元素的display属性，利用CSS来切换元素的显示状态，因此初始渲染开销较大，适用于频繁切换显示状态的场景。v-if则是控制元素的创建和插入，如果条件不成立，则元素根本不会被渲染到DOM中，其切换开销较大，适用于运行时条件很少改变的情况。v-if有更高的切换开销，而v-show有更高的初始渲染开销。在实际应用中，前台数据展示推荐使用v-show，管理系统权限列表展示推荐使用v-if。 2. methods、computed、watch三者的区别 methods、computed和watch是Vue中三种不同的实现数据响应和更新的方式。它们的共同点是都可以定义函数来响应数据变化，不同点在于使用场景和触发时机。 - computed是计算属性，它依赖于其它的响应式数据，当依赖的数据变化时，计算属性会重新计算，具有缓存功能。它适用于一个数据依赖多个数据的情况，例如商品购物车结算。 - watch则类似事件监听，当被依赖的数据发生变化时，才会触发。它适合在数据变化后执行异步或开销较大的操作，比如网络请求。watch可以监听属性引用的变化，但是内部属性的变化无法监听，通过设置deep为true可以进行深度监听。 - methods里面定义的函数需要手动调用，不会自动触发。它的使用场景更为广泛，可以处理各种逻辑操作。 3. watch无法监听数组的情况 Vue无法监听数组值的变化，比如直接通过索引修改数组项或修改数组长度时，watch无法捕捉到这些变化。解决方法包括使用Vue.set方法或者数组的splice方法来修改数组。 4. 如何给一个响应式对象中添加或删除属性 在Vue中，响应式对象新增或删除属性需要使用Vue提供的方法。新增属性时，可以使用Vue.set方法，删除属性则使用Vue.delete方法。 5. vue中自定义指令 Vue允许开发者自定义指令来封装对DOM的操作。使用Vue.directive方法，第一个参数是指令名称，第二个参数是一个对象，其中包含bind、inserted等钩子函数，用于控制指令行为。 6. vue中组件创建的方式 在Vue中，组件可以全局注册或局部注册。全局组件使用***ponent方法，局部组件则是在new Vue实例的components选项中定义。 7. vue中组件通讯的方式 Vue中组件之间的通讯主要分为父传子、子传父、非父子通讯。 - 父传子通过props传递数据，子组件通过props选项接收。 - 子传父通过监听子组件上的事件，并在父组件中定义相应的事件处理函数来实现。 - 非父子组件通讯可以使用EventBus、Vuex或创建公共的Vue实例对象（EventBus）手动封装事件订阅。 8. vue中的过滤器 Vue中过滤器（Filters）用于进行文本格式化，可以将字符串格式化显示。过滤器可以串联，并且可以通过管道符（|）将一个指令的值传递给过滤器。Vue.filter方法用于定义全局过滤器，而局部过滤器则在组件的filters选项中定义。 9. vue的生命周期 Vue的生命周期包含多个钩子函数，每个钩子函数对应组件生命周期的特定阶段。 - beforeCreate：组件实例被创建，此时数据观测和事件还未初始化。 - created：组件实例创建完成，属性已绑定，但DOM未生成，$el属性不存在。 - beforeMount：模板编译/挂载之前，已完成el和data的初始化。 - mounted：模板编译/挂载之后，完成了挂载。 - beforeUpdate：组件更新之前。 - updated：组件更新之后。 - beforeDestroy：组件销毁之前。 - destroyed：组件销毁之后。 10. vue的中单向数据流 Vue推荐单向数据流，即数据从父组件传递到子组件，子组件不允许直接修改父组件的数据，以此来保证状态的可预测性。如果子组件需要修改传递过来的数据，应当通过发送事件给父组件来间接修改。 11. 动态组件 在Vue中，动态组件是指使用<component>标签配合is属性，来根据条件动态切换不同的组件。动态组件的使用场景包括但不限于条件渲染组件、动态加载组件等。动态组件是通过Vue内置的<component>元素和is属性实现的，可以实现组件的动态切换，从而提高应用的灵活性。 以上总结了Vue.js在面试中可能会遇到的一些关键知识点，理解和掌握这些概念对于面试成功至关重要。