vue考题（1）

于2023-08-26 01:57:48发布

222

1. scoped原理

给节点新增自定义属性，然后css根据属性选择器添加样式

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[data-v-xxx] {
            background: red;
        }
    </style>
</head>
<body>
    <div data-v-xxx>1</div>
    <div>2</div>
</body>
</html>

2. vue中如何做样式穿透

.xxx /deep/ .zzz {

}
// xxx是父元素 
// zzz是子元素

3. vue的生命周期

请参考这篇文章： http://111.230.246.226:8080/article/53

4.发送请求在created还是mounted？

如果页面只有一个组件，那放在哪里请求都可以。

如果是有父子关系的，则要看情况，如果想父组件的数据早一点现实出来，则把父组件的请求放在create里，否则把请求放在mounted

因为父组件的create生命周期是比子组件的生命周期要早运行

5. v-for中的key值作用是什么

请参考这篇文章： http://111.230.246.226:8080/article/398

6. vue2中的data为什么必须是一个函数？

因为vue组件定义的是可以重用的组件，比如我定义一个my-component的组件，那页面可以添加好几个my-component。

<div id="div-1">
   <my-component></my-component>
</div>
<div id="div-2">
   <my-component></my-component>
</div>
<div id="div-3">
   <my-component></my-component>
</div>

那这个时候，vue会根据定义代码去生成三个不同的对象，初始化过程大概这样：

var item1 = new my-component()
item1.data = my-component.data();

var item2 = new my-component()
item2.data = my-component.data();

var item3 = new my-component()
item3.data = my-component.data();

可以看到对象的data实际就是调用你定义的my-component的data函数而来的。

如果data不是函数，而是一个对象，那就麻烦了，根据javascript对象引用的规则，会导致三个对象的data实际指向同一个值，那改了一个对象的data，另外几个也同时改了，就没法复用了。

7. computed、methods、watch有什么区别

1. computed vs methods区别
computed 是有缓存的，只要值没发生改变，第二次从computed获取值，它是直接从缓存中返回，不需要通过计算
methods  没有缓存，每次都需要计算

2. computed vs watch区别
computed支持缓存，依赖属性值发生变化，计算属性才会重新计算，否则用缓存；wath不支持缓存
computed函数中必须有return，watch不用
computed是第一次加载就监听，watch是不监听
computed不支持异步，watch是可以异步操作

8.vue路由的hash模式和history模式有什么区别？

如果一个路由地址是不存在的，hash不会发送请求，history会

打包后，history需要后端配置路由规则，否则会出现空白页，hash不用

更多内容请参考这篇文章： https://blog.csdn.net/QQ408896436/article/details/79254124

9. vue路由传参是怎么样的？

有3种传参方式

1、params

this.$router.push({name: 'index', params:{ id: item.id }}) // 传参
this.$router.params.id // 获取

2、query （和params很类似，不同点是可以解决页面刷新参数丢失的问题）

this.$router.push({name: 'index', query:{ id: item.id }}) // 传参
this.$router.query.id // 获取

3、动态路由传参

this.$router.push({name: '/index/${item.id}'}) // 传参
{path: '/index:id'} // 路由配置

10. vue的生命周期都做了什么？

请参考这篇文章： http://111.230.246.226:8080/article/344

11. vue的双向绑定原理？

通过Object.defindProperty劫持数据发生改变，如果数据发生改变了（在set中进行赋值），触发update方法进行更新节点内容（节点内容值的是这种{{str}}），从而实现了数据的双向绑定原理

12. 谈谈你对keep-alive的了解

1. 是什么？
vue自带的一个组件

2.功能是什么？
缓存组件，提升性能

3.使用场景
比如首页进入到详情页，如果用户在首页每次点击都是同一个地址，那么详情页就没必要去请求，直接缓存起来就可以了。如果点击的不是同一个地址，那么就请求接口（在activated生命周期请求）

13. v-if和v-show区别

1. 展示形式不同
v-if是创建一个dom节点
v-show是display：none、block

2. 使用场景不同
频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

14. vue为什么会有nextTick？原理是什么？

因为vue更新数据是异步渲染的。
比如有2个变量item1和item2，item1的值发生改变了，此时vue是不会立刻渲染的，然后item2在很短的时间内也发生改变，此时vue会把item1和item2的值一起渲染，这样就提高了性能。
但是这样会带来新的问题，假设item1是一个boolean类型的值，true显示input框，false隐藏。
代码如下 ：
<input v-if="item1"/>
此时我们把item1的值从false改为true，但是vue此时是需要等item2的值也发生改变，才会去渲染，所以如果此时去操作input的dom属性，则会报错。
为了解决这个问题，vue增加了nextTick，nextTick实际上是一个异步任务，它可以保证获取到的值是渲染之后的。
原理是promise或者setTimeout，如果浏览器支持promise则用promise，否则用setTimeout

考这篇文章： http://111.230.246.226:8080/article/61

15. 组件传值相关

请参考这篇文章： http://111.230.246.226:8080/article/58

16. props和data优先级谁高？

props > methods > data >computed > watch

17. vuex相关

请参考这篇文章： http://111.230.246.226:8080/article/64

18. 路由守卫和动态路由相关

请参考这篇文章： http://111.230.246.226:8080/article/59

19. v-model是如何实现的？语法糖实际是什么？

<template>
    <div>
      {{ message }}
      <input type="text" :value="message" @input="message = $event.target.value">
    </div>
</template>
<script>
export default {
  data() {
    return {
      message: 0
    };
  }
};
</script>

20.vue性能优化

1. 使用路由懒加载
2. 使用异步组件
3. 使用keep-alive缓存组件
4. 第三方插件使用cdn引入
5. html、js、css压缩
6. v-for渲染数据加上key值
7. 用骨架屏
8. 服务端开启GZIP压缩
9. 后端文件、get接口做缓存

异步组件使用方式

21. vue2和vue3的区别

1. 最大的区别是vue3采用的是组合式api来编写代码，公共的代码部分可以抽离出去
2. 去除了beforeCreate和created 这2个生命周期，用setup来代替，并且生命周期的钩子函数的命名不一样了。比如vue2的beforeMount在vue3中叫onBeforeMount
3. vue3中的template可以有多个根元素，vue2只能有一个根元素
4. 定义数据的方式不同，vue3采用ref或者reactive来定义可响应的变量，vue2则把变量放到data中，方法放到methods中
5. 劫持数据的方式不一样，vue2采用的是ES5的Object.definePropert对数据进行劫持，结合发布订阅模式的方式来实现的。Vue3中则使用ES6的Proxy对数据代理

22. spa单页面的优缺点？

优点：
1. 响应速度快，内容的改变不需要重新加载整个页面

缺点
1. 不能用浏览器的前进和后退功能
2. 不利于SEO优化
3. 首屏加载时间过长

23. vue3的reactive与ref有什么区别？

从定义数据角度对比：

ref用来定义：基本类型数据。
reactive用来定义：对象（或数组）类型数据。
备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

从原理角度对比：
ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

从使用角度对比：
ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
reactive定义的数据：操作数据与读取数据：均不需要.value。

24. vue数据传递有几种方式？

1. 父传子，用props
2. 子传父，用emits
3. 兄弟传兄弟，用eventBus
4. 用vuex、Pinia
5、用ref和$refs
6、用依赖注入provide、inject