Vue面试题

最新推荐文章于 2024-06-19 01:22:05 发布

猿人啊兴

最新推荐文章于 2024-06-19 01:22:05 发布

阅读量13

点赞数

分类专栏： Java面试文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_56224451/article/details/133799156

版权

Java面试专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue面试题

1-10

1.vue 组件通讯方式有哪些方法

在Vue中，组件通信的方式有以下几种方法：

父组件向子组件通信：通过props将数据传递给子组件。父组件可以在子组件上使用属性绑定语法将数据传递给子组件，子组件可以通过props接收并使用这些数据。

子组件向父组件通信：通过事件触发和监听实现子组件向父组件通信。子组件通过$emit方法触发一个自定义事件，并传递数据给父组件，父组件可以通过v-on指令监听子组件触发的事件，并执行相应的处理函数。

兄弟组件通信：如果两个组件没有直接的父子关系，可以借助一个共同的父组件来实现兄弟组件之间的通信。通过父组件作为中介，将数据传递给两个兄弟组件。

跨级组件通信：当组件层级非常复杂且嵌套层次深时，可以使用Vue的provide和inject方法进行跨级组件通信。通过在父级组件中使用provide提供数据，然后在子孙组件中使用inject注入数据，从而实现跨级组件之间的通信。

使用Vuex进行状态管理：如果应用的组件之间需要共享一些全局状态，可以使用Vuex进行状态管理。Vuex是Vue官方提供的状态管理库，通过在store中定义和修改数据，并通过getters、mutations、actions等方式进行组件之间的通信。

需要根据实际情况选择合适的组件通信方式，在简单组件通信场景下可以使用props和事件触发监听，而在复杂的组件通信场景下可以考虑使用Vuex进行状态管理。

2.Vue 响应式原理

Vue的响应式原理基于ES5的Object.defineProperty方法，它可以劫持JavaScript对象的访问器属性（getter和setter），从而在属性值发生改变时自动更新视图。

具体地说，当被Vue实例化的数据对象中的某个属性被读取时，Vue会监听这个属性的getter方法；当该属性被修改时，Vue则会监听它的setter方法，并触发视图的重新渲染。

Vue的响应式原理分为以下几个步骤：

首先，Vue通过Object.defineProperty方法对所有被Vue实例化的数据进行处理。对于每个属性，都会定义一个getter和setter方法，以便在属性读取和修改时能够被监听。

当某个属性被读取时，Vue会将对应的Watcher对象添加到该属性的依赖列表中，并将该Watcher对象与当前正在渲染的组件关联起来。

在组件渲染过程中，如果有数据变化，Vue会根据依赖列表中的Watcher对象，执行对应的更新函数，从而更新组件的视图。

当某个属性被修改时，Vue会触发该属性的setter方法，然后通知依赖列表中关联的所有Watcher对象，执行对应的更新函数。

值得注意的是，Vue的响应式原理只能监听对象的已有属性。如果添加或删除了某个属性，那么Vue并不会监听它的变化。如果需要监听对象中新添加或删除的属性，可以使用Vue.set和Vue.delete等方法。

另外，Vue还提供了一些其他的API，比如computed计算属性、watch监听器等，方便我们更加灵活地使用响应式系统。通过这些API，我们可以在数据发生变化时执行自定义的逻辑，实现更复杂的响应式行为。

3.什么是 MVVM

MVVM是一种软件架构模式，用于将应用程序的用户界面和业务逻辑进行解耦。它由三个主要组件组成：Model、View和ViewModel。

Model（模型）代表应用程序的数据和业务逻辑。通常通过与服务器进行通信或从本地存储获取数据，并对数据进行处理和操作。

View（视图）是用户界面的可视化呈现层。它通常是由HTML、CSS和其他UI组件组成，用于显示模型中的数据，并且对用户输入做出响应。

ViewModel（视图模型）是View和Model之间的桥梁。ViewModel通过数据绑定将模型中的数据自动反映到视图上，并监听视图中的用户操作并更新模型。ViewModel还可以包含一些逻辑和方法，用于处理用户交互和其他业务逻辑。

MVVM的核心思想是数据驱动视图，通过数据绑定机制将视图和模型联系在一起。当模型数据发生变化时，视图会自动更新；而用户在视图上的操作也会反映到模型中。

MVVM框架的代表是Vue.js，它提供了强大的数据绑定和组件化能力，使开发者可以更高效地构建现代化的Web应用程序。在Vue中，使用声明式的模板语法和指令，可以轻松地实现数据绑定和组件的复用，同时提供了一系列的生命周期钩子和观察者机制，方便开发者处理业务逻辑和响应用户操作。

总而言之，MVVM是一种将视图、模型和视图模型相互分离的架构模式，它通过数据绑定实现了视图和模型的自动同步，使前端开发更加高效和可维护。

4.mvvm 与 mvc 区别它和其它框架（jquery）的区别是什么哪些场景适用

mvc和mvvm其实区别并不大，都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多、频繁的场景，更加便捷。

5.vue.cli 中怎样使用自定义组件遇到过哪些问题

第一步：在components目录新建组件文件（indexPage.vue），script一定要export default {}。

第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’

第三步：注入到vue子组件的components属性上面,components:{indexPage}

第四步：在template视图view中使用，例如有indexPage命名，使用的时候则index-page。

6.Vue的双向数据绑定原理是什么

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

7.详细说下你对vue生命周期的理解

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前后：在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

载入前后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前后：当data变化时，会触发beforeUpdate和updated方法。

销毁前后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

8.什么是vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的链接

HTML5 历史模式或 hash 模式，在 IE9 中自动降级

自定义的滚动条行为

9.Vuex

1.概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境
创建文件：src/store/index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
在main.js中创建vm时传入store配置项
......
//引入store
import store from './store'
......

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store
})

10.路由

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

前端路由：key是路径，value是组件。

1.基本使用
安装vue-router，命令：npm i vue-router

应用插件：Vue.use(VueRouter)
编写router配置项:
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

//暴露router
export default router
实现切换（active-class可配置高亮样式）
<router-link active-class="active" to="/about">About</router-link>
指定展示位置
<router-view></router-view>
2.几个注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

每个组件都有自己的$route属性，里面存储着自己的路由信息。

整个应用只有一个router，可以通过组件的$router属性获取到。

3.多级路由（多级路由）
配置路由规则，使用children配置项：
routes:[
    {
        path:'/about',
        component:About,
    },
    {
        path:'/home',
        component:Home,
        children:[ //通过children配置子级路由
            {
                path:'news', //此处一定不要写：/news
                component:News
            },
            {
                path:'message',//此处一定不要写：/message
                component:Message
            }
        ]
    }
]

猿人啊兴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue面试题

MVVM是一种软件架构模式，用于将应用程序的用户界面和业务逻辑进行解耦。它由三个主要组件组成：Model、View和ViewModel。Model（模型）代表应用程序的数据和业务逻辑。通常通过与服务器进行通信或从本地存储获取数据，并对数据进行处理和操作。View（视图）是用户界面的可视化呈现层。它通常是由HTML、CSS和其他UI组件组成，用于显示模型中的数据，并且对用户输入做出响应。ViewModel（视图模型）是View和Model之间的桥梁。
复制链接

扫一扫