Vue进一步了解

Vue中key值作用

面试官你好,我是这么理解key值的,key值的主要作用是给元素添加一个唯一标识符,用于提高vue渲染性能,当data发生变化的时候,vue会使用diff算法来对比新旧虚拟DOM.如果key值相同,才会考虑复用元素.如果key值不同,则会强制更新元素.一般通过给元素key设置为id,来保证vue更新数据的时候可以最大限度复用相同的key值的元素.

v-for指令使用key值几种情况

没有key值(默认是下标) : 不复用，就地更新
key值为下标(相当于没设置) : 不复用，就地更新
key值是id : 复用相同的key，更新不同的key

总结： key值优先设置id, 没有id就用下标

1. 1. axios的请求方式

get请求（常用于获取数据）

post请求（常用于提交表单数据和上传文件）

put请求（对数据进行全部更新）

patch请求（修改部分数据）

delete请求(常用于删除操作(参数可以放在url上也可以和post一样放在请求体中)

注意：axios常根据业务需求需要进行二次封装

为什么避免v-for和v-if在一起使用？

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次。

Vue中有时候数组会更新页面，有时候不更新，这是为什么?

因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

这些方法会触发数组改变, v-for会监测到并更新页面

push()、pop()、shift()、unshift()、splice()、sort()、reverse()

这些方法不会触发v-for更新

slice()、filter()、concat()

vue组件之间是怎么传值的？

1.父传子：props

父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

2.父传子孙：provide 和 inject

父组件定义provide方法return需要分享给子孙组件的属性，子孙组件使用 inject 选项来接收指定的我们想要添加在这个实例上的属性；

3.子传父：通过事件形式

子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。

4.父子、兄弟、跨级：eventBus.js

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（e m i t ）触发事件和（ emit）触发事件和（emit）触发事件和（on）监听事件，巧妙而轻量地实现了任何组件间的通信。

5.通信插件：PubSub.js

6.vuex：vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可；

请说出路由配置项常用的属性及作用？

路由配置参数：

path : 跳转路径

component : 路径相对于的组件

name:命名路由

children:子路由的配置参数(路由嵌套)

props:路由解耦

redirect : 重定向路由

Vue的路由实现模式：hash模式和history模式

1.路径不同

hash有#, history没有#

2.工作模式不同

hash : 修改当前页面hash,不需要服务器额外配置

history: 会给服务器发送请求，需要服务器配置

1.hash模式：在浏览器中符号"#"，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

2.history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

******★★VUE中常用的指令******

1.v-model指令：用于表单输入，实现表单控件和数据的双向绑定。

2.v-on：简写为@，基础事件绑定

3.v-bind：简写为：，动态绑定一些元素的属性，类型可以是：字符串、对象或数组。

4.v-if指令：取值为true/false，控制元素是否需要被渲染

5.v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。

6.v-show指令：指令的取值为true/false，分别对应着显示/隐藏。

7.v-for指令：遍历data中存放的数组数据，实现列表的渲染。

8.v-once：通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

Vue 组件 data 为什么必须是函数

官方文档：Vue组件data一定是函数

因为组件是需要在多个地方使用的

如果data是一个对象，对象是引用类型。一旦某一个地方修改，就会全部修改

data是一个函数，每一次复用组件的时候就会从这个函数返回一个新的对象。这样组件在复用的时候就可以做到数据互不干扰。

scoped作用与原理

作用：组件css作用域，避免子组件内部的css样式被父组件覆盖

默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式

原理：给元素添加一个自定义属性 v-data-xxxxx

一针见血答案：通过属性选择来提高css权重值