学习Vue必须掌握的知识要领（满满的全是干货）

拉跨丽
297 阅读12分钟

【一般】Vue的最大优势是什么?

  • 比较轻量，中国人自己写的框架，文档易读（这里比较轻松，拿出平时和朋友聊天的语气）

  • 下面几个，能说的越多越好

    • 双向数据绑定,
    • 数据驱动视图,
    • 组件化开发
    • 数据和视图分离
    • 单页面应用可以实现页面数据局部刷新

【高频】MVVM和MVC区别是什么?

这道题可能只问MVVM， 也可能两个一起问

  • MVC ： 传统的设计模式。

    • 设计模式： 一套广泛被使用的开发方式

    • M： model 模型

      • 模型：就是数据的意思

    • V ： view视图

      • 视图：就是页面的意思

    • C：controller控制器

      • 控制器：在这里写js业务逻辑，把数据M 渲染到 视图 V （有点类似于我们之前学习的，把数据渲染到页面）
  • MVVC： vue所使用的设计模式

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)

  • MVVM，一种软件架构模式，决定了写代码的思想和层次

    • M： model数据模型 (data里定义)
    • V： view视图 （页面标签）
    • VM： ViewModel视图模型 (vue.js源码)

  • MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

    • V （修改视图） -> M（数据自动同步）
    • M（修改数据） -> V （视图自动同步）

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！ (思想转变)

【一般】Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

.enter:监听键盘enter键

【一般】对Vue渐进式的理解

  • 官方专业答案

    • 主张最少,
    • 自底向上,
    • 增量开发,
    • 组件集合,
    • 便于复用

  • 个人见解

    • 使用模块化规范，实现自助餐式开发，用什么导什么。 最大程度上节省资源。

【一般】说出至少4个Vue指令及作用

这道题还有一种问法：说出几个常用的vue指令

  • v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
  • v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号
  • v-slot: 缩写为#, 组件插槽
  • v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
  • v-show 显示内容
  • v-if 显示与隐藏
  • v-else 必须和v-if连用 不能单独使用 否则报错
  • v-text 解析文本
  • v-html 解析html标签

【一般】为什么避免v-for和v-if在一起使用

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

【高频】v-show和v-if的区别

  • v-show和v-if的区别? 分别说明其使用场景?

  • 相同点： v-show 和v-if都是true的时候显示，false的时候隐藏

  • 不同点1：原理不同

    • v-show:一定会渲染，只是修改display属性
    • v-if:根据条件渲染

  • 不同点2：应用场景不同

    • 频繁切换用v-show,不频繁切换用v-if

【几乎必问】Vue中key值作用

高逼格答案： 提升vue渲染性能

  • 1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比， 如果dom结构一致，则vue会复用旧的dom。 （此时可能造成数据渲染异常）
  • 2.使用key可以给dom添加一个 唯一标识符，让vue强制更新dom

【高频】Vue中:key作用, 为什么不能用索引

最高逼格答案： 因为用了索引和没用， 没啥区别（用了等于没用）

  • :key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化
  • 因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

【高频】Vue中有时候数组会更新页面，有时候不更新，这是为什么

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

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

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

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

  • slice()
  • filter()
  • concat()

【高频】 方法和计算属性和侦听器区别

  • 方法

    • 需要主动调用触发
    • 不会缓存

  • 计算属性

    • 监听多个属性：只要计算属性内部数据变化就会触发
    • 有缓存机制（必须要说的）

  • 侦听器

    • 监听一个属性
    • 不会缓存（这个可以不用回答）

【一般】请说下封装 vue 组件的过程

高逼格答案： 有复用的地方就有封装

（js如此，vue也是如此）

  • 1.先分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能

    • 找出业务需求中存在复用的地方

  • 2.具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法

【几乎必问】vue组件传值

  • 父传子

      1. 子组件props定义变量
    • 2.父组件在使用子组件时通过行内属性给props变量传值
    • 特点：单向数据流

  • 子传父

    • 1.子组件：$emit触发父的事件
    • 2.父在使用组件用@自定义事件名=父的方法 (子把值带出来)
    • 特点：事件监听

【高频】Vue 组件 data 为什么必须是函数

  • 官方文档：cn.vuejs.org/v2/style-gu…

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

    • 如果data是一个对象，对象是引用类型。 一旦某一个地方修改，就会全部修改
    • data是一个函数，每一次复用组件的时候就会从这个函数返回一个新的对象。 这样组件在复用的时候就可以做到数据互不干扰。

【一般】讲一下组件的命名规范

  • 官方文档：cn.vuejs.org/v2/style-gu…
  • 给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，
  • 因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

【高频】scoped作用与原理

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

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

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

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

==【百分百必问】==vue生命周期总共分为几个阶段？

核心： 四个阶段8个勾子

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1* ）beforeCreate*

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2* ）created*

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3* ）beforeMount*

在挂载开始之前被调用：相关的 render 函数首次被调用。

4* ）mounted*

el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。

5* ）beforeUpdate*

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6* ）updated*

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7* ）activated*

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8* ）deactivated*

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9* ）beforeDestroy*

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10* ）destroyed*

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11* ）errorCaptured（2.5.0+ 新增）*

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

==【百分百必问】==第一次加载页面会触发哪几个钩子函数？

  • 四个钩子

    • beforeCreate,
    • created,
    • beforeMount,
    • mounted 这几个钩子函数

【高薪必问】Vue 的 nextTick 的原理是什么?

  • 1为什么需要 nextTick

    • Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

  • 2.知识储备（可以不说，但是自己要知道，以防不测）

    • 事件循环中宏任务和微任务这两个概念
    • 常见的宏任务有 script, setTimeout, setInterval, setImmediate（一种执行更加频繁的定时器）
    • 常见的微任务有 ,Promise.then(), async

  • 3.最终答案：

    • nextTick 的原理是 vue 通过异步队列控制 DOM 更新

      • nextTick底层是promise，所以是微任务。这个一定要知道

    • （这个是官方语言，说不说看你自己心情) ： nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

  • 4.小科普：其实vue在版本更新的时候。 时而将nextTick封装成宏任务，时而将nextTick封装成微任务。 不过目前vue2最新的版本，nextTick底层是微任务

【高薪必问】v-slot插槽与作用域插槽

  • 1.插槽作用：父组件 传递 html结构 给 子组件
  • 2.具名插槽作用：父组件 传递 多个html结构 给 子组件
  • 3.作用域插槽作用：父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据

插槽使用2个步骤

第一步：在子组件中定义一个插槽 <slot>默认值：如果父组件没有传递则默认显示</slot>

第二步：在父组件中传递结构: <子组件>父组件需要传递的结构</子组件>

具名插槽语法如下

1.给子组件的添加name属性 ： name="插槽名"

2.父组件使用v-slot:插槽名 : 给指定的插槽传递结构

  • 注意：这个v-slot指令必须要写在<template>标签中,否则会报错
  • <template>是HTML5新增的一个语义化标签，模板的意思。 这个标签本身不会被渲染，因此最终在页面是看不见的。 这个标签类似于div,就是一个空盒子容器。 与div唯一的区别就是它不会渲染。

作用域插槽语法如下

1.给子组件的添加一个自定义属性 : <slot :属性名="属性值" ></slot>

2.给父组件的

avatar
文章
阅读
粉丝