【Vue】灵魂拷问

1、说说Vue的优缺点

  • 优点:渐进式,组件化,轻量级,虚拟dom,响应式,单页面路由,数据与视图分开
  • 缺点:单页面不利于seo,不支持IE8以下,首屏加载时间长

2、为什么说Vue是一个渐进式框架

渐进式就是你想用 vuex 就用,不用也行,你想用 component 就用,不用也可以,或者你可以选择不用,或者只选几样去用

3、MVVM是什么?和MVC有何区别呢?

  • MVVM
    VM: 也就是View-Model,数据的双向绑定将【模型】转化成【视图】,即后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM事件监听。
  • MVC
    Model(模型):负责从数据库中取数据.
    View(视图):负责展示数据的地方
    Controller(控制器):用户交互的地方,例如点击事件等等,思想:Controller 将 Model 的数据展示在 View 上
  • 区别
    整体看来,MVVM 比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM 中,View不知道 Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性。Vue是MVVM框架,但是不是严格符合MVVM,因为MVVM规定Model和View不能直接通信,而Vue的ref可以做到这点。

4、Vue生命周期

  • beforeCreate:实例话Vue,未初始化和响应式数据
  • created:已初始化和响应式数据,可访问数据
  • beforeMount:render调用,虚拟DOM生成,未转真实DOM
  • mounted:真实DOM挂载完成
  • beforeUpdate:数据更新,新虚拟DOM生成
  • updated:新旧虚拟DOM进行对比,打补丁,然后进行真实DOM更新
  • beforeDestroy:实例销毁前,仍可访问数据
  • destroy:实例销毁,子实例销毁,指令解绑,解绑本实例的事件
  • activated:keep-alive所缓存组件激活时调用
  • deactivated:keep-alive所缓存组件停用时调用
  • errorCaptured:子孙组件的错误捕获,此函数可返回false阻止继续向上传播

5、Vue修饰符

  • .once:事件只触发一次
  • .number:将v-medol绑定的值转数字
  • .trim:讲v-model绑定的值首位空格给去掉
  • .stop:阻止事件冒泡
  • .capture:事件的捕获
  • .self:点击事件绑定本身才触发
  • .lazy:输入框失焦时才会更新v-model的值
  • .prevent:阻止默认事件
  • .native:绑定事件在自定义组件上时,确保能执行
  • .left、.middle、.right:鼠标左中右键的触发
  • passive:相当于给移动端滚动事件加一个.lazy
  • camel:确保变量名会被识别成驼峰命名
  • .sync:简化子修改父值的步骤

6、Vue内部指令

  • v-text:元素的textContent
  • v-html:元素的innerHTML
  • v-show:通过样式display改变显隐,控制的css
  • v-if:通过操作DOM改变显隐
  • v-else:配合v-if
  • v-else-if:配合v-else
  • v-for:循环渲染
  • v-on:绑定事件,缩写@
  • v-bind:绑定变量,缩写:
  • v-model:双向绑定
  • v-slot:插槽
  • v-once:只渲染一次
  • v-pre:跳过元素编译
  • v-cloak:隐藏双括号,有值显示

7、v-if 和 v-show 有何区别?

  • v-if:通过操作DOM来控制显隐,适用于偶尔的情况,因为每一次执行它都要生成和销毁,v-if有着更高的切换消耗
  • v-show:通过改变css样式display属性控制显隐,适用于频繁显隐的情况,不会销毁,v-show在初始渲染消耗更高点
    频繁或者大数量显隐使用v-show ,否则使用v-if

8、为什么 v-if 和 v-for 不建议用在同一标签?

v-for 优先级高于 v-if,每项都通过 v-for 渲染出来后再去通过 v-if 判断显隐,过程中会增加无用的 dom 操作,渲染了无用的节点

9、如何设置动态class,动态style?

  • 动态class对象:<div :class="{ 'is-active': true, 'red': isRed }"></div>
  • 动态class数组:<div :class="'is-active', isRed ? 'red' : '' "></div>
  • 动态style对象:<div :style="{ color: textColor, fontSize: '18px' }"></div>

10、为什么不建议用index做key,为什么不建议用随机数做key?

用index和用随机数都是同理,随机数每次都在变,做不到专一性,也很消耗性能

相关推荐
Pedantic2 小时前
SwiftUI 手势层级(Gesture Hierarchy)详解
前端
飘尘2 小时前
前端转型全栈(Java后端)的快速上手指引
前端·后端·全栈
一颗烂土豆2 小时前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl
浏览器工程师3 小时前
AI Agent 接浏览器任务,先别让它一路点到底
前端·后端
雨季mo浅忆3 小时前
VSCode自动格式化三要素
前端
爱勇宝4 小时前
深扒 Anthropic 1680 位工程师简历:应届生几乎没机会,AI 公司最缺的不是博士
前端·后端·程序员
kyriewen5 小时前
同事每天催我 Code Review,我写了个脚本让 AI 替我 review PR——现在他反过来催 AI 了
前端·javascript·ai编程
user20585561518137 小时前
Windows 项目安装时报 `node-sass` 错误,如何快速处理
前端
LiaCode7 小时前
Redis 在生产项目的使用
前端·后端