【面试系列】=＞Vue

原创已于 2022-03-17 14:33:42 修改 · 918 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #面试

于 2020-11-27 18:39:47 首次发布

【前端面试系列】专栏收录该内容

21 篇文章

订阅专栏

0,vue中组件的data为什么是一个函数

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

1, 如何让CSS只在当前组件中起作用？

在组件中的style前面加上scoped

2, <keep-alive></keep-alive>的作用是什么?

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

3, vue组件中如何获取dom元素?

使用ref属性获取, 在组件模板元素中添加ref属性, 在js中用this.$refs获取

4, 说几个vue中的指令和它的用法？
v-model双向数据绑定；
v-for循环；
v-if, v-show 显示与隐藏；
v-bind 动态绑定属性
v-on事件绑定；
v-once: 只绑定一次。

5, v-on指令可以同时监听多个函数吗?

可以, v-on的事件监听类似于DOM原生api添加事件监听者addEventListener

6, vue循环中为什么使用key?

需要使用key来给循环中每个节点做一个唯一标识,要保证每一个循环中key的值各不相同,以避免vue中的重用机制造成可能的渲染异常,从底层来看,key属性主要为了diff算法就可以正确的识别此节点.并高效的更新虚拟DOM

7, vue的组件配置对象中都有哪些常用字段？分别是什么作用？
Data 组件中的数据
props 组建的属性数据,接收父组件的传值
computed 计算属性
components 定义或引用子组件
methods 自定义函数
watch 属性监听
filters 数据过滤器
mounted 等生命周期函数

8,分别简述computed和watch的使用场景
computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　例子：购物车商品结算的时候,
　　　　有缓存,在我执行的时候,会先看一下是否有缓存,如果有,那么就直接执行缓存里面的,
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　例子：搜索数据
　　　　deep 控制是否要看这个对象里面的属性变化
总结:
如果一个数据需要经过复杂计算就用 computed
如果一个数据需要被监听并且对数据做一些操作就用 watch

9, 列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？

beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed
当前页面有事件监听器或者计时器时,需要在destroyed中取消或销毁

10, vue路由的钩子函数有哪些?
全局的路由钩子函数：beforeEach、afterEach
单个的路由钩子函数：beforeEnter
组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

router.beforeEach((to, from, next) => {
  if (to.path === "/login") return next();
  const tokenStr = window.localStorage.getItem("token");
  if (!tokenStr) return next("/login");
  next();
});

11, 介绍以下vue组件内的路由守卫(即路由的生命周期/钩子函数)，有哪些参数（to，from，next）

vue组件中的路由钩子方法有
beforeRouteEnter 进入路由前调用。这里组件还未创建, 不能使用this
beforeRouteUpdate 路由更新之前被调用, 组件不会重新初始化, 可以使用this
beforeRouteLeave 离开路由之前被调用，可以访问里面的this属性
方法中都有三个参数:
to:即将要进入的目标路由对象；
from:当前导航即将要离开的路由对象；
next ：调用该方法后，才能进入下一个路由钩子函数

12, vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？
Vue组件data中的数据在组件创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染的代码。
v-model相当于 v-bind:value 加 v-on:input

13, vue中怎么实现非父子组件之间的传值？
1.在项目规模不是特别大时，可以创建一个空组件作为总线，项目中其他组件都可以通过总线进行传值。
2.大大型项目中，可以使用vuex进行数据管理，将数据统一放在store中进行管理。
3.也可以在路由跳转时,通过路由传值,
4.Vue 中 provide/inject可以用来传值,在多层嵌套组件的时候

 // provide他相当于发射器，发送的内容，是通过返回值return出来
    provide () {
      this.jc1= Vue.observable({ //不使用这个方法时是死数据不会进行改变，使用了就是双向数据绑定的
            jc1:1000
        });

      return {
        jc2: this.jc1, //jc是你自己后面传递给其他子组件，其他组件的值    通过获取自己data中数据然后将其注入给后代
        names:this.name
      } 
    },

14, vue中路由如何传值?
(1, 使用url拼接字符串传值,使用$route.query接收
(2, 使用友好URL传值,使用$route.params接收
(3, 使用命名路由params字符传值,使用$route.params接收
(4, 使用query对象传值,使用$route.query接收

15, vue中有哪些数据传递方式?
(1, 组件传值: 父传子,通过props属性或slot插槽传递, 子传父,通过$emit发射自定义事件传递, 非父子,通过bus总线传递
(2, 路由传值: 可通过url路径传值和编程式导航对象传值

16, vuex如何使用?
首先在项目中 npm install vuex 安装
新建vuex状态管理文件store,导入vuex并添加状态数据
在组件中使用mapState()函数映射状态数据并使用
在组件中使用commit()函数提交申请修改状态数据

17, Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？

state => 基本数据相当于data。在组件中使用mapState()函数把状态数据映射入组件即可使用
getters => 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。我们在组件中使用 $store.getters获取数据
mutations => 提交更改数据的方法，同步！我们在组件中使用 $store.commit('',params)修改数据
actions => 像一个装饰器，包裹mutations，使之可以异步。使用mapAction()映射入组件使用
modules => 模块化Vuex

18, vue中如何处理跨域请求

vue中处理跨域请求一般要设置代理服务器实现跨域,
在vue项目的根目录中手动创建vue.config.js配置文件,在devServer字段中配置服务器代理
在使用axios请求数据时直接使用代理地址

19, axios和ajax的区别：
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

20, vue和react有哪些异同点?
相同点
(1, 都通过虚拟DOM实现了视图的渲染与更新
(2, 都是组件化编程, 把整个项目分割成一个个的组件来实现
(3, 都有单向数据流的规则执行数据流动, 父组件通过props属性向子组件传值
不同点
(1, vue常用html标签模板,使用js实现逻辑,视图与逻辑分离, react使用jsx语法实现模板, html与js相结合
(2, vue组件中的data数据可以直接调用并更新而react中的state数据需要使用setState()函数执行更新
(3, vue属于渐进式前端框架,更适用于开发小型,灵活的项目, react生态更丰富,更适用于开发专业,大型的项目
(4, vue在组件中提供了指令,过滤器,属性监听等,可以方便快捷的操作DOM

21, vue有哪些常用的UI组件库
element (PC端)，
VUX (移动端),
Mint UI(移动端)
Vant (移动端)

22, vue中v-if和v-show有什么区别
v-if的原理是根据判断条件来动态的进行增删DOM元素, 比较耗费性能和内存, 频繁显示隐藏不建议使用
v-show是根据判断条件来动态的进行显示和隐藏元素, 通过设置样式display为block和none来实现, 适用于频繁显示隐藏的情况

23, vue有哪些优缺点:
优点:
(1 简单好用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。
(2 单页面应用, 使用单文件组件结构, 用户体验好,
(3 性能比较好：相比其他框架, 它占用更少的空间，并提供更好的性能。
(4 基于MVVM模式, 数据驱动视图, 更高效
(5 适应性强：组件化设计可以提高开发效率,方便代码复用, 提升整个项目的可维护性
缺点:
(1, vue生态环境不如react和angular, 但有追赶和超越的趋势
(2, vue不支持IE8
(3, vue封装的比较深入,不利于seo优化, 报错不明显,

24, 什么是MVVM?
MVVM是model-view-viewModel的简写, 它是一种开发模式, 它实现了视图和数据逻辑之间的分离, model模型指的是后端传递的数据, view视图指的是所看到的页面, viewModel是连接视图view和模型model的桥梁, 从而实现模型model到视图view的转化和视图view到模型model的转化, 也就是我们所说的双向数据绑定, 使用MVVM模式实现的前端框架有 vue 和 react

25, vue项目怎么打包app ?
(1 首先使用webpack打发布包, npm run build
(2 然后通过Hbuilder 新建H5+App项目
(3 把第一步打包出的dist文件夹导入项目
(4 在项目中的manifest.json文件中进行打包配置
(5 点击Hbuilder工具菜单栏发行中的原生App-云打包

26, vue中虚拟DOM的实现原理
虚拟DOM是通过js对象的结构来记录html标签节点, 当组件数据更新需要渲染视图时,先用diff算法计算变化前后js对象(也就是虚拟DOM树)结构的不同, 得到最小差异, 然后针对性的更新部分真实DOM节点, 这样可以极大提高视图渲染效率, 节省内存消耗

27, 请说下封装 vue 组件的过程？
(1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(思考1小时，代码10分钟，程序猿的准则。)
(2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
(3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
(4. 封装完毕了，直接调用即可

28, vue2和vue3的区别？
（1.响应式初始化的优化

在 Vue2 中，对非数组数据的劫持是通过
Object.defineProperty，因为要确保所有数据的变化都能被监听到，不论数据数据多深，用到没，只能无脑递归。

// data.js
// 模拟大数据

const data = []

for (let i = 0; i < 150; i++) {
  data.push({ name: 1, sex: 1, age: 1 })
}

const children = JSON.stringify(data)
for (const item of data) {
  item.children = JSON.parse(children)
  for (const it of item.children) {
    it.children = JSON.parse(children)
  }
}

vue2

<!-- html -->
<div id="app">
    我是 Vue2，<button @click="changeData">增加数据</button>
</div>
  
  
<!-- script -->
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="./data.js"></script>
<script>
    new Vue({
      el: '#app',
      data() {
        return {
          data: []
        }
      },
      methods: {
        changeData() {
          this.data = data
        }
      }
    })
</script>

（2.Vue2 性能

页面加载之后，我们点击按钮，来看下性能。我们能发现响应式数据耗费了大概 8.7s，哪怕我们页面中并没有用到这个数据。

在这里插入图片描述
Vue3

<div id="app">
    我是 Vue2，<button @click="changeData">增加数据</button>
</div>
  
  

<script src="https://unpkg.com/vue@latest"></script>
<script src="./data.js"></script>
<script>
    Vue.createApp({
      data() {
        return {
          data: {}
        }
      },
      methods: {
        changeData() {
          this.data = data
        }
      }
    }).mount('#app')
</script>

可以看到耗费时间大约 0.1s，因为没有使用脚手架创建工程，所以这个 0.1s 中有很多时间用在了模板编译上，实际上的时间就更少了。

在这里插入图片描述

区别：Vue3 和 Vue2 响应式数据最大的区别就是，Vue3 是用到哪个数据，才会去对这个数据做劫持，我下面贴一段 Vue3 响应式处理的代码。

自称为：惰性劫持

编译

Vue3 利用编译做了一些优化，而且对性能的提升是非常高的，现在贴一段代码，看看在 Vue2，Vue3 编译过后有什么不同。

<ul>
  <li>
    我是静态数据1
    <span>123</span>
  </li>
  <li>我是静态数据2</li>
  <li>我是静态数据3</li>
  <li>我是静态数据4</li>
  <li>我是静态数据5</li>
  <li>{{ name }}</li>
</ul>

Vue2

在 Vue2 编译中主要的优化是：找到静态节点 =>
找到值得标记的静态根节点，静态节点就是不会变化的节点，而静态根节点就是静态节点最大的祖先，也不会变化。这样每次组件更新的时候就可以跳过这些节点，从而提升性能。

在这里插入图片描述

Vue3

Vue3 将所有可以提升的节点全部提升，从而每次 render 的时候不会重复创建静态节点。

在这里插入图片描述

接下来我们去看看这个 dynamicChildren 到底是要做什么。代码太多，下面以图片示例，组件 patch 的时候会调用一些
patch 的子方法，其中会对 dynamicChildren 做判断，如果有，直接用新旧两个 dynamicChildren
去对比，Vue2 中你不论怎么办，你都得从头比到脚，而在 Vue3 中，可以直接对会变化的节点进行对比，这个是之前不敢想像的。