Vue面试总结-基础使用

1、computed和watch区别

computed 计算属性、不支持异步

计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要依赖值没有发生改变函数就不会再执行，直接访问。

watch 监听器、支持异步

而侦听器 watch 是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。

 

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

相同：v-if和v-show都是用来控制元素的渲染

不同：

v-if是根据后面数据的真假，来判断DOM的添加删除等操作

v-show只是在修改元素的css样式（display:none属性值）

v-if如果初始渲染条件为真，就渲染，反之就不渲染

v-show不管初始条件是否为真，都会被渲染

使用场景：

v-if有更高的切换消耗，不适合做频繁的切换

v-show有更高的初始渲染消耗，适合做频繁的切换

 

3.v-for中为什么要用key，以及key尽量不要使用index

因为vue组件高度复用，增加Key可以标识组件的唯一性， key的作用主要是为了高效的更新虚拟DOM

不要使用index作为key值：

性能问题（diff算法），当涉及到从中间插入、新增元素时，及时后面的数据没有改变，但是dom需要重新渲染

4.父子组件间通讯

父子

父组件：v:bind="content"

子组件：props:{

"content":{

"type":String,

"default":"hhh"

}

}

子父

this.$emit("test",参数) @test=""

 5.兄弟组件间通讯

第一创建一个新的js文件

import Vue from 'vue';

export default new Vue();

第二步，在需要传值的页面引入js文件

import eventBus from

methods：{

btn:function(){

eventBus .$emit('add',data);

}

}

第三步，在需要引用的页面同样引入js文件

mounted：{

eventBus .$on('add',(data)=>{

console.log(data);

})

}

 

6.生命周期，描述有父子组件的时候生命周期，当keep-live时增加的钩子函数

 

https://segmentfault.com/a/1190000011381906

生命周期	阶段	描述
beforeCreated	创建前	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
created	创建后	vue实例的数据对象data有了，$el还没有。
beforeMount	模板载入前	vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换
mounted	模板载入后	vue实例挂载完成，data.message成功渲染。
beforeUpdate	组件更新前	组件更新之前调用
updated	组件更新后	组件更新之后调用
beforeDestroy	组件销毁前	调用$destroy方法后，立即执行beforeDestroy
pdestroyed	组件销毁后	组件销毁后调用，此时只剩下dom空壳

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:

　　activated 与 deactivated

 

7.子组件为什么data需要返回一个对象

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果 

8.keep-live的使用

是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

举例说明：在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.

生命周期：当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。 

9.如何使css只在当前组件起作用

如果想写的css只对当前组件起作用，则在style中写入scoped

原理：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

10.对vue中nextTick的理解

Vue是异步渲染，data改变之后，DOM不会立刻被渲染，$nexttick会在DOM渲染之后执行，以获取最新DOM节点

11. Vue中hash模式和history模式的区别

• 最明显的是在显示上，hash模式的URL中会夹杂着#号，而history没有。
• Vue底层对它们的实现方式不同。hash模式是依靠onhashchange事件(监听location.hash的改变)，而history模式是主要是依靠的HTML5 history中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。
• 当真正需要通过URL向后端发送HTTP请求的时候，比如常见的用户手动输入URL后回车，或者是刷新(重启)浏览器，这时候history模式需要后端的支持。因为history模式下，前端的URL必须和实际向后端发送请求的URL一致，例如有一个URL是带有路径path的(例如www.lindaidai.wang/blogs/id)，如果后端没有对这个路径做处理的话，就会返回404错误。所以需要后端增加一个覆盖所有情况的候选资源，一般会配合前端给出的一个404页面。 

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

　　vuex是vue框架中的状态管理器

　　在main.js引入store，注入，新建了一个目录store，export导出

　　适用场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

13.vue页面之间跳转

　　声明式（标签跳转） <router-link :to="xxx">

　　编程式（ js 跳转） router.push('index')

       参数问题query，params

       当路由vue-router里面：id，后使用，this.$route.params.，此时，最好用name参数

       this.$route.query. 参数在url里面 此时name和path都能用

       https://www.cnblogs.com/listen9436/p/10651132.html

       query和params的区别

       直白的来说 query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，

       而 params相当于post请求，参数不会再地址栏中显示 

14.slot插槽

 

15.动态、异步组件

:is="component-name"

需要根据数据，动态渲染的场景。即组件类型不确定

异步组件：FormDemo: ()=> import('../BaseUse/FormDemo')

16.mixin

多个组件有相同的逻辑，抽离出来

vue 3提出的composition api旨在解决这些问题

mixin的问题

变量来源不明确，不利于阅读

多mixin可能会造成命名冲突

mixin和组件可能出现多对多的关系，复杂的较高

17.vue中$router和$route的区别

 1.$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。

2.$route是一个跳转的路由对象，每一个路由都会有一个$route对象，是一个局部的对象，可以获取对应的name，path，params，query等

18.v-once的作用和用法？

        被定义了 v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。

19.vue如何在父组件中调用子组件的方法

 子组件

methods: { jumpTiger() { this.$router.push({ path: '/tigerGoods' }) },

父组件使用子组件的时候

在这里加上ref属性 <children ref="child"></children>

父子间调用方法

methods: { jumpButton() { this.$refs.child.jumpTiger(); },

20.vue-router路由模式

hash

#后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。每次 hash 值的变化，会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作

history

因为HTML5标准发布，多了两个 API，pushState() 和 replaceState()。通过这两个 API （1）可以改变 url 地址且不会发送请求，（2）不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改。

区别：

• 前面的hashchange，你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
• history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

当用户刷新页面之类的操作时，浏览器会给服务器发送请求，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。