月薪3万的你,真的懂Vue吗?

216 阅读4分钟

11.png

前言vue学习精髓

最近鼓捣了一下 Vue的精髓但因为精力有限,先发一部分整理的一些可以提高开发效率的小知识,让你在 Vue 的项目开发中更加丝滑、顺畅。

【一般】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 (视图自动同步)

【一般】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()

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

-   方法

-   需要主动调用触发
-   不会缓存
  • 计算属性

    监听多个属性:只要计算属性内部数据变化就会触发

    有缓存机制(必须要说的)

  • 侦听器

    监听一个属性

    不会缓存(这个可以不用回答)