vue面试2

VUE2

1. 为什么.Vue被称为“渐进框架”?

1. 使用渐进式框架的代价很小，从而使现有项目(使用其他技术构建的项目)更容易采用并迁移到新框架。Vue.js 是一个渐进式框架，因为你可以逐步将其引入现有应用，而不必从头开始重写整个程序。

2. Vue的最基本和核心的部分涉及“视图”层，因此可以通过逐步将Vue引入程序并替换“视图”实现来开始你的旅程。

2.如何在单页Vue应用 (SPA)中实现路由?

可以通过官方的vue-router 库在用Vue构建的SPA中进行路由。该库提供了全面的功能集，其中包括嵌套路线、路线参数和通配符、过渡、HTML5历史与哈希模式和自定义滚动行为等功能。Vue还支持某些第三方路由器包。

3.如何确保在单文件组件中定义的CSS 样式仅应用于该组件,而不被用于其他组件?

这可以通过样式标签上的scoped属性来实现。

4.什么是插槽(slot)?

插槽允许你定义可以封装和接受子DOM元素的元素。组件模板中的<slot></slot>元素作为通过组件标签捕获的所有DOM元素的出应。

5.vue中transition的理解?

过渡动画主要包含6个class，分别为:

1. v-enter:定义元素进入过渡的初始状态，在元素插入前生效，插入后一帧删除。

2. v-enter-active:在元素插入前生效，在动画完成后删除。

3. v-enter-to:在元素插入后—帧生效，在动画完成后删除，

4. v-leave:离开过渡的初始状态，在元素离开时生效，下一帧删除

5. v-leave-active:在离开过渡时生效，在动画完成后删除

6. v-leave-to○离开过渡结束状态，在离开过渡下―帧生效，在动画完成后删除

6.vue-roter的钩子函数?

1. 全局钩子

   router.beforeEach((to,from,next) => {
       
   })

    

2. 单个路由钩子

beforeRouteEnter(to,from,next){
    
}

7.vuex的使用

Vuex是一个专为 Vuejs ,应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以―种可预测的方式发生变化，具体包括:

1. state : Vuex使用单一状态树,即每个应用将仅仅包含一个store实例，但单状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

2. getter: state的计算属性，类似,vue的计算属性，主要用来过滤―些数据。

3. action: actions 可以理解为通过将 mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view层通过store.dispath_来分发action。可以异步函数调用.

4. mutation: mutations定义的方法动态修改Vuex的store中的状态或数据

5. modules:项目特别复杂的时候，可以让每一个模块拥有自己的statemutation; action、getters,使得结构非常清晰，方便管理。

8.vue首屏白屏如何解决?

1. 路由懒加载。

2. vue-cli开启打包压缩和后台配合gzip访问。

3. 进行cdn加速

4. 开启vue服务渲染模式。

5. 用webpack 的externals 属性把不需要打包的库文件分离出去，减少打包后文件的大小。

9.vue常用的修饰符?

1. .stop:等同于JavaScript中的eventistopPropagation()，防止事件冒泡;

2. prevent:等同于JavaScript 中的event.preventDefault()，防止执行预设的行为(如果事件可取消，则取消该事件，而不停止事件的进―步传播)

3. .once:只会触发—次。

4. .self:只会触发自己范围内的事件，不包含子元素;

10.vue的router和route区别

1. Vue Router：

   • Vue Router 是一个用于管理前端路由的插件，它允许你在Vue应用中实现页面间的切换和导航。

   • Vue Router 提供了路由配置、路由导航、路由参数传递等功能，使得前端页面的导航和组织更加灵活和可控。

   • 通过配置路由表，可以定义不同的路由路径和对应的组件，从而实现不同页面的展示和切换。

2. route（路由对象）：

   • route 是 Vue Router 提供的一个对象，表示当前路由的信息。

   • 在每个路由组件中，可以通过 this.$route 访问到当前路由的信息。

   • route 对象包含了当前路由的路径、参数、查询参数、路由元信息等等。

   • 通过 route 对象，可以获取当前路由的信息，进行相关的处理和判断。

11.vue-router实现懒加载的方式?

1. vue异步加载

{
    path: '/home',
    name: "home',
    component: resolve => require(['@/components/home'],resolve)
}

2. 路由懒加载(使用import)

const Home = 0 = > import('@/components/home')
{
    path: '/home',
    component: Home
}

12.delete和 Vue.delete删除数组的区别?

delete 只是被删除的元素变成了empty/undefined 其他的元素的键值还是不变。Vue.delete直接删除了数组改变了数组的键值。

13.路由跳转和location.href 的区别?

使用location.href="/url'来跳转，简单方便，但是刷新了页面;使用路由方式跳转，无刷新页面，静态跳转;

14.refs、$parent的使用?

1. $ref：在子组件上使用ref特性后, this.属性可以直接访问该子组件。可以代替事件emit和$on的作用。

2. $paren：$parent 属性可以用来从一个子组件访问父组件的实例，可以替代将数据以prop的方式传入子组件的方式;当变更父级组件的数据的时候，容易造成调试和理解难度增加;