2020-11-14

vue面试题

1.vue常见的指令

v-text:更新DOM对象的 textContent
​ v-html:更新DOM对象的 innerHTML
​ v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
​ v-on:绑定事件
​ v-for:基于源数据多次渲染元素或模板块
​ v-if：根据表达式的值的真假条件，销毁或重建元素
​ v-show：根据表达式之真假值，切换元素的 display CSS 属性
​ v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
​ v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

2.v-if和v-show的区别

v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

3.怎么请求数据的

通过axios

4组件和模块化的区别

组件化：组件化就是基于可重用的目的，将一个大的软件系统按照分离关注点的形式，拆分成多个独立的组件，主要目的就是减少耦合。
​ 一个独立的组件可以是一个软件包、web服务、web资源或者是封装了一些函数的模块。
​ 这样，独立出来的组件可以单独维护和升级而不会影响到其他的组件。
​ 模块化：模块化的目的在于将一个程序按照其功能做拆分，分成相互独立的模块，
​ 以便于每个模块只包含与其功能相关的内容，模块之间通过接口调用。
​ 将一个大的系统模块化之后，每个模块都可以被高度复用。
​ 区别：模块化的目的是为了重用，模块化后可以方便重复使用和插拨到不同的平台，不同的业务逻辑过程中。
​ 组件化的目的是为了解耦，把系统拆分成多个组件

5在vue中获取dom元素

在vue中可以通过给标签加ref属性，就可以在js中利用$refs去引用它，从而操作该dom元素

6Vuex的使用和五个核心

state定义全局状态（即用于保存基本数据）
mutations中用于声明操作state中的基本数据，同步操作
actions中声明操作mutations函数，异步操作
modules：用于模块化操作
getters是通过基本数据派生出来更加复杂的数据(相当于计算属性)

7Vue全家桶有些什么

vue：主要Vue
​ vue-router：关于路由方面的配置
​ vuex：数据共享和缓存用
​ vue-resource：于后台交互用（现在改为axios 但是axios不是Vue里面的东西）
​ vue-cli：快速创建项目的脚手架

8vue生命周期

beforeCreate()
​ 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
​ 注意：此时，无法获取 data中的数据、methods中的方法
​ created()
​ 说明：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
​ beforeMounted()
​ 说明：在挂载开始之前被调用,此时无法获取到el中的DOM元素
​ mounted()
​ 说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
​ beforeUpdated()
​ 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
​ 注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的
​ updated()
​ 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作
​ beforeDestroy()
​ 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
​ 使用场景：实例销毁之前，执行清理任务，比如：清除定时器
​ destroyed()
​ 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

9Vue-cli的src文件夹中有哪些文件

assets中是图片，字体等一些静态资源
​ components中是组件
​ filters中是过滤器
​ router中是路由文件
​ App.vue 根组件
​ mian.js

10组件中 data 为什么是函数

因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

11对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
viewmodel和model实现双向数据绑定

12什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
第一次页面加载会触发哪几个钩子？
会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
DOM 渲染在 哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。

13Vue组件间的参数传递

1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

14vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to，from，next：
to：route即将进入的目标路由对象，
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

15怎么定义 vue-router 的动态路由? 怎么获取传过来的值

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

16vue常用的修饰符？

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

17vue.js的两个核心是什么？

数据驱动、组件系统

18路由跳转方式

1.router-link标签会渲染为标签
2.通过js跳转比如router.push(’/home’)

19computed和watch有什么区别

computed
computed是计算属性，也就是计算值，它更多用于计算值的场景
computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算
computed适用于计算比较消耗性能的计算场景
watch
watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作
无缓存性，页面重新渲染时值不变化也会执行

20vue中子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
第三种都可以实现子组件调用父组件的方法，

21vue中 keep-alive 组件的作用

keep-alive：主要用于保留组件状态或避免重新渲染。两个重要属性，include 缓存组件名称，exclude 不需要缓存的组件名称。
v-if 和 v-show 有什么区别

22vue-router有哪几种导航钩子

全局守卫： router.beforeEach
全局解析守卫： router.beforeResolve
全局后置钩子： router.afterEach
路由独享的守卫： beforeEnter
组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

23vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用集中式存储管理应用的所有组件的状态，主要是为了多页面、多组件之间的通信。
Vuex有5个重要的属性，分别是 State、Getter、Mutation、Action、Module，由 view 层发起一个 Action 给 Mutation，在 Mutation 中修改状态，返回新的状态，通过 Getter暴露给 view层的组件或者页面，页面监测到状态改变于是更新页面。如果你的项目很简单，最好不要使用 Vuex，对于大型项目，Vuex 能够更好的帮助我们管理组件外部的状态，一般可以运用在购物车、登录状态、播放等场景中。

24$route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等