Vue面试题（各处搜刮整理）

一、vue的声明周期（共10个）

1、beforeCreate（创建前）：组件实例创建之初，组件的属性生效之前。

beforeCreate执行的时候，data和methods中的数据还没有发生变化，不能在这个阶段调用data中的数据和methods中的方法

使用场景：可以在此时加载一些loading效果，在created中移除loading效果

2、created（创建后）：组件实例已经完全创建完成，属性也绑定，但真实dom还未生成，此时$el 还不可以使用。

created执行的时候，data和methods中的数据已经初始化完毕，如果需要调用methods中的方法或者data中的数据，最早可以在这个方法中调用

使用场景：一般可以在此时发送一些网络请求，获取数据。

3、beforeMount（挂载前）：模板在内存中已经编译好了，但并没有被渲染到页面中，此时dom仅是虚拟dom，还是无法操作，相关的render函数首次被调用

beforeMount这个钩子执行的时候，虽然模板被编译好了，但还未渲染到页面中，所以页面还是旧的

使用场景：可以在当前声明周期内进行数据最后的修改

可获取的对象：this.$options.render(编译好的render函数) this.$el(未渲染的dom元素)

4、mounted（挂载后）：dom加载完成，页面渲染完毕

mounted执行时，创建阶段已结束，进入运行阶段，如果想用通过插件操作页面上的dom元素，最早可在这个钩子执行时进行

使用场景：一般第一个业务逻辑会在这里开始，当需要操作dom的时候执行，可以配合$nextTick使用进行单一事件对数据的更新后更新dom

可获取的对象：this.$options.render(编译好的render函数) this.$el(已渲染的dom元素) this.$refs(dom元素或组件实例的引用对象)

5、beforeUpdate（更新前）：执行它时，data中的数据更新了，但页面中的数据还未更新，即还未渲染dom。

使用场景：适合在更新之前访问原有的dom，比如手动移除已添加的事件监听器等。

6、updated（更新后）：组件数据更新之后

此时data中数据和页面中数据已经保持同步了，都是最新的

使用场景：当数据更新需要做统一业务处理的时候，如页面中用better-scoll滑动时，由于页面内容没有完全加载出来之前，内容的scollHeight不够，导致页面滚动不了，所以在此时使用该钩子函数，在里面进行页面的刷新，可完美解决问题。

7、activited（激活前）：keep-alive专属，组件被激活时调用

当组件切回来时，再去缓存里找这个组件，触发activited函数

使用场景：组件被keep-alive包裹，但切换时，想处理一些业务逻辑，则需要在这个钩子函数中操作

8、deactivited（激活后）：keep-alive专属，组件被销毁时调用

当组件被换掉时，会被缓存到内存中，触发deactivited钩子函数

9、beforeDestroy（实例销毁前）：实例销毁之前调用，此时实例仍然可用

使用场景：主要解绑一些使用addEventListener监听的事件等

10、destroyed（实例销毁后）：实例销毁后被调用，该钩子被调用后，对应Vue实例的所有指令都被解绑、所有监听事件都被移除、所有的子实例也被销毁

使用场景：加点提示toast之类的东西

二、vue中子组件和父组件的执行顺序 （由父组件开始 --> 子组件开始--->子组件结束 --> 父组件结束）

1、渲染过程: beforeCreate(父)-->created(父)--> beforeMount(父)--> beforeCreate(子)--> created(子) --> beforeMount(子) --> mounted(子) --> mounted(父)

2、更新过程：beforeUpdate(父) --> beforeUpdate(子) --> updated(子) --> update(父)

3、销毁过程：beforeDestroy(父) --> beforeDestroy(子) --> destroyed(子) --> destroyed(父)

三、Keep-alive

概念： keep-alive是Vue的一个内置组件，当它包裹动态的组件时，会缓存不活动的组件实例，而不是销毁它们，keep-alive是一个抽象组件，它不会渲染到dom中，也不会出现在父组件链中。

作用：在组件切换的过程中将状态保留到内存中，防止重复渲染dom，减少加载时间和性能消耗，提高用户的体验性

生命周期函数：activited和deactivited，（注意：只有组件被keep-alive包裹时，这两个方法才能被调用，如果作为正常的组件被使用时，这两个组件是不会被调用的）

参考地址：https://blog.csdn.net/m0_45070460/article/details/107432685

四、this.$options

1、作用：①获取data中数据的初始状态 ②获取过滤器，过滤器无法直接通过this.获取，可通过this.$options.filters.过滤器名字获取

2、举例：如重置方法，需要将已修改的查询条件置位最初的状态，则可调用this.searchParams =this.$options.data().searchParams ，无需一个个查询条件重置为初始值

备注：searchParams为查询参数对象，包含查询需要的各个参数

五、vue路由hash和history模式

六、VUE路由的钩子函数

1、导航钩子种类：全局导航钩子、组件内钩子、单独路由独享组件 (共6个函数)

全局的路由钩子函数：beforeEach，afterEach

单个的路由钩子函数：beforeEnter

组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

2、全局前置守卫钩子函数beforeEach

Router.beforeEach((to,from, nex) {

do Something

}

)

to : 类型：Route, 即将要进入的目标路由对象

from: 类型：Route，当前导航即将要离开的路由对象

next: 类型 function, 一定要调用该方法来resolve这个钩子，执行效果依赖于next（）的参数

①next(): 不带参数时，不会触发beforeEach（例：有些路由无需权限，可设置白名单路由即不需要判断权限的路由，如/login， 判断to为白名单中的路由，即可调用next()，直接跳转到相应的路由地址）

②next('/xxxx')或者next({path:'/xxxx'})：带参数时，跳到不同的地址都会触发router.beforeEach钩子函数

七、Compute和watch区别和应用场景

1、computed

computed中的属性不需要在data中定义，且必须由返回值

computed具有缓存，计算属性是基于他们的依赖进行缓存的，只有在它的相关依赖发生变化时才会重新求值。只要计算属性的依赖没有发生变化，调用它会返回之前的缓存，同时computed对其中的变量依

赖是多个时，只要有一个发生了变化，就会触发这个函数。

应用场景：当一个变量的值受多个变量值影响时。

2、watch

watch中的值必须在data中定义，且函数有参数，newVal或oldVal

watch的依赖是单个的，它每次只可以对一个变量进行监控，并且区别于computed属性，监听器watch可以是异步的，但computed不行。

应用场景：当一个变量的值影响着多个变量时

3、filters

过滤器分为全局过滤器和局部过滤器，当命名冲突时，以局部过滤器权重高

全局过滤器：

Vue.filter('过滤器名称'，function(value) {

Do something….

})

局部过滤器：

filters: {

'过滤器名称': function(value) {

Do something….

}

}

应用场景：用过滤器来格式化一些数据或者渲染的文本对于格式展示的要求

八、v-bind和v-model的区别

1、v-bind 是单向绑定，用来绑定数据和属性以及表达式，数据只能从data流向页面

2、v-model是双向绑定，数据能从data流向页面，也能从页面流向data

3、v-bind可以给任何属性赋值，v-model只能给表单类，也就是具有value属性的元素进行数据双向绑定

九、VUEX

十、this.$router和 this.$route

1、this.$router

访问路由器，是一个全局的路由器对象，包含了很多属性和对象（如history对象），任何页面都可以调用其push(),replace(),go()等方法

参数传递方式：①用params传递参数

this.$router.push({name: 'user', params: {userId:1}}) （备注：用params传递参数时只能用name:xxxx，否则参数接收会是undefined）

②用query传递参数

this.$router.push({path: 'user', query: {userId: 1}})

区别：query传递方式相当于get请求，参数会显示在地址栏中，params相当于post请求，参数不会显示在地址栏中

2、this.$route

当前路由对象，包含具体的路由名称、path、params、query

十一、router-view

1、什么是路由：路由是组件与路径的一种映射关系，router-view并成为路由的出口。

十二、v-slot 插槽

https://baijiahao.baidu.com/s?id=1667546704320334891&wfr=spider&for=pc

1、插槽分为：具名插槽、默认插槽（不具名插槽）、作用于插槽

使用插槽是在存在父子关系的组件中使用，可以在子组件中定义插槽位置，在父组件中传入插槽信息

2、默认插槽（不具名插槽）

子组件中定义（children）:<slot></slot>

父组件中定义：引用子组件之后，<children><p>需要传递给子组件的内容</p></children>

3、具名插槽

具名插槽(children): <slot name="名称"></slot>

vue2.6.0以后的版本使用具名插槽和作用域插槽都有的新的语法，使用s-slot提换了之前的slot 和slot-scope， 用v-slot:名称在控制

父组件中定义：

引用子组件之后，

<children>

<templatev-slot:名称>

需要传递给子组件的内容

</template>

</children>

4、作用域插槽

作用域插槽(children): <slot :自定义name=data的中的属性和对象><slot>

子组件：

十三、浏览器缓存

1、http缓存

2、indexedDb

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB

3、cookie

用来数据缓存，但存放数据量非常小，大小限制为4KB以内，如可缓存用户登录信息（如token）等。

cookie的作用：cookie缓存的数据始终在同源http中携带，在浏览器和服务器之间传递；

浏览器关闭时，默认删除cookie数据，但cookie可视设置过期时间，在过期时间之内，关闭浏览器，cookie仍存在。

4、localStorage

作用：本地存储。

用法：存数据：localStorage.setItem('属性名','属性值')

取数据：localStorage.getItem('属性名')

删除书：localStorage.removeItem('属性名')

清空数据：localStorage.clear()

特点：localStorage是永久存储的，除非手动删除，否则一直存在

只能存储字符串类型数据，如果是其他类型数据，会自动转为字符串格式存储。

5、sessionStorage

作用：本地存储，

特点：浏览器关闭时，会自动清除sessionStorage缓存的数据；

只能存储字符串类型数据，如果是其他类型数据，会自动转为字符串格式存储。

6、indexDB

indexDB是浏览器提供的本地数据库，它可以被网页脚本创建和操作。indexDB允许存储大量数据。提供查找接口，还能建立索引。就

数据库类型而言，indexedDB不属于关系型数据库（不支持SQL查询），更接近于nosql数据库。

7、http 缓存

http缓存分为强制缓存和协商缓存，强制缓存是指请求的资源在本地缓存中有时，资源从本地缓存中取，不需要发起请求

转载：https://blog.csdn.net/jiang_ziY/article/details/123818243

转载：https://blog.csdn.net/qq_17335549/article/details/128630153

转载：https://www.yisu.com/zixun/720734.html