Vue的知识梳理总结及面试可能

最新推荐文章于 2024-05-15 10:00:00 发布
最新推荐文章于 2024-05-15 10:00:00 发布
阅读量377 收藏 2
点赞数 2
文章标签： 面试 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2900678151/article/details/109547230
版权
本文详细梳理了Vue.js的关键概念，包括双向数据绑定原理、数组更新检测、事件修饰符、v-model实现、计算属性和watcher的区别、虚拟DOM、浏览器加载流程、组件data为何为函数等。还探讨了Vue的生命周期、插槽、动画、路由、父子通信、axios使用以及手机端自适应等实战技巧。
摘要由CSDN通过智能技术生成 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               ## Vue的数据驱动原理？数据更新原理？响应式原理？
  1. 数据通过object.defineProperty进行getset拦截。
  2. 通知watcher（观察者模式）订阅发布模式，触发组件重新渲染，创建新的虚拟DOM，对比旧的虚拟DOM，通过diff找出不同，以最小代价更新节点。

什么是Vue？

  1. 核心代表人物 尤雨溪
  2. Vue是饿了么ued团队开发并维护的一个渐进式框架，核心关注视图层
  3. vue的核心是一个允许采用简洁的模板声明式的将数据渲染进DOM系统
  4. m与v没有任何联系，VM=>双向数据绑定

为什么vue中m层改变了，viewmodel知道m层变化，或双向数据绑定的原理？

  1. vue在创建视图时，会将数据配置到vue实例中，然后内部通过object.defineProperty方法，为数据动态添加get和set方法，当获取数据时会触发get方法，当设置对象时会触发set方法；当set方法触发 完成时，进一步watcher触发，数据改变完成了，试图也进行了重新渲染。

数组的更新检测

  1. vue将被侦听的数组的变更方法进行了包裹，所以他们将会触发视图更新
  2. push（） 在数组后面添加元素，返回数组的长度
  3. pop（） 在数组后面删除一个元素，返回删除的数据
  4. shift（） 在数组前面删除一个元素，返回删除的数据
  5. UNshift（）
  6. splice（） 数组的剪贴，删除，插入
  7. sort（） 数组的排序
  8. reserve（） 数组的反转
    不会触发视图更新的有：concat() slice()

事件修饰符

  1. stop 阻止事件冒泡
  2. prevent 取消事件默认行为
  3. self 只有在自身上面触发
  4. once 触发一次

v-model 底层实现原理

  1. 内部给输入框绑定value属性，和监听input属性
    修饰符：
    lazy 等光标离开后进行更新操作
    number 若能被parsefloat解析则输出结果否则原样输出
    trim 去掉前后空格

计算属性 及watcher与computed区别

  1. 计算属性会根据现有元素生成一个新的数据，并且两者产生永久性关联，建立缓存关系，当无关数据变动时，计算属性不会重新计算，而直接从缓存取值即可
  2. 区别： watch监听只能是单个的监听，每次监听只能一个变量的修改，计算属性可以依赖多个数据的变化。2.当需要数据变化时执行异步操作或开销较大时用watch

什么是虚拟DOM？

  1. 虚拟DOM就是虚拟对象，属于虚拟数据，真实DOM的一种映射
  2. 内存中生成一棵虚拟DOM
  3. 将内存中的虚拟DOM树初始化渲染成一颗真实DOM树
  4. 当我们修改vue实例中data数据时
  5. 之前的虚拟DOM结合更改后的数据生成一颗新的虚拟DOM
  6. 将此次生成的虚拟DOM与上一次虚拟DOM对比（diff算法）
  7. 将对比后差异的部分进行重新真实的DOM渲染

浏览器加载一个HTML文件的大致流程

  1. 构建DOM树
  2. 构建style rules ，页面样式表
  3. 将DOM树和样式表结合形成render tree（渲染树）
  4. 布局 为每个render 树上的节点确定在显示屏上的精准坐标信息
  5. 绘制 触发每个节点的paint方法

为什么组件的data必须是函数？

因为每个实例可以维护一份被返回对象的独立拷贝

slot插槽

最低0.47元/天 解锁文章
毅哥哥1
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.js get和set方法使用
05-03
NULL 博文链接：https://fanshuyao.iteye.com/blog/2434769
web面试题大全
weixin_30484247的博客
09-17 233
$HTML， HTTP，web综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些SEO web开发中会话跟踪的方法有哪些 <img>的title和alt有什么区别 doctype是什么,举例常见doctype及特点 HTML全局属性(global attribute)有哪些 什么是web语义化,有什么好处 HTTP method 从浏览器...
vue组件通信必知必会——事件总线Event Bus
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-15 1715
主要介绍了vue项目中，如何使用EventBus（事件总线）实现跨组件通信，并了解vue2和vue3中不同组件之间，生命周期构子函数执行的顺序。
WEB开发面试题
每一天都有新的希望
07-20 1602
1.HTML的全称： 2.HTML的结构：  3.常用标签:                  4.CSS的全称：5.CSS的作用： 6.CSS中创建Class的语法：                   7.CSS中引用ID的语法：                                               8.列举javascript中常用的系统函数： 9.XML的全称： 10.什么是Well-Formed的XML文件：                        11.什么是DTD:
vue的get 和set
热门推荐
王依米
05-15 1万+
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;    &l
web面试题收集
愿你成为自己喜欢的模样，不抱怨，不将就，有自由，有光芒！
03-11 2766
文章目录Web1、nginx优化哪些、有没有做过nginx支持https的访问，怎么配置2、nginx前端页面/图片加载不出来，如何排查3、nginx+keepalived脑裂是什么、怎么预防、怎么处理4、nginx和lvs、haproxy有什么区别5、Tomcat优化 Web 1、nginx优化哪些、有没有做过nginx支持https的访问，怎么配置 1、修改用户和组 2、网页压缩 3、防盗链 4、隐藏版本号 5、修改缓存时间 6、日志切割 7、设置连接超时机制 8、更改进程数 9、I/O事件配置中使用e
Vue面试题及Vue知识点整理
12-10
（都是一些基础的vue面试题，大神不用浪费时间往下看） 一、对于MVVM的理解？ MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件，它负责...
vue面试题整理vuejs基础知识整理.pdf
12-14
Vue基础知识点总结 Vue是一款流行的前端框架，以下是关于Vue基础知识点的总结： 1. Vue的基本原理： 当创建一个Vue实例时，Vue会遍历data中的属性，使用Object.defineProperty（Vue 3.0使用Proxy）将它们转换为...
2023(完整版)vue面试题及答案(最新整理).pdf
06-28
以下是对Vue面试题中涉及的知识点的详细说明： 1. **Vue的基本原理**： - 当创建一个Vue实例时，Vue会遍历`data`对象中的所有属性，使用`Object.defineProperty`（在Vue 3中改为`proxy`）来拦截这些属性的读取和...
收藏整理了关于vue面试题汇总知识.pdf
12-14
在本文中，我们将对Vue面试题进行总结和分析，从基础知识到高级概念，涵盖了Vue的核心原理、双向数据绑定、MVVM模式等多个方面。 一、 Vue 基础 1. Vue 的基本原理 当一个Vue实例创建时，Vue会遍历data中的属性，...
Vue之 get和set
smalCat的博客
04-15 7108
在之前的面试中遇到面试官让我讲解一下vue的get和set的原理，当时我有点蒙逼，个人熟练运用vue但并未去探究其原理，所以GG 现在讲解一下： get和set是es5也就是es2015中的对象访问器，它在对象属性或方法获取值（get）时被触发，同时设置值得时候也会触发（set） 这是es5的特性 vue中的运用： vue在组件本身是一个对象，当将此对象传入vue的实例的时候，vu...
Web 常见面试题
10-04
该文档整理了web常见面试题，包括一下内容： 1. 谈谈你对http协议的理解，http 常见的状态码有哪些 2. GET 和 POST 的区别（4个） 3. http 中重定向和请求转发的区别（8个） 4. Cookie 和 Session
区别 5. 什么是 jsp,什么是 Servlet?jsp 和 Servlet 有什么区别? 6. jsp 有哪些域对象和内置对象及他们的作用 7. 过滤器和监听器是什么，有什么用 8. 谈谈你对 ajax 的认识?
web常见面试题
lxn_zyl的博客
08-19 820
某面试题库
学习笔记（23):零基础掌握 Python 入门到实战-class定义对象，self指向自身（二）
weixin_44614551的博客
09-18 144
【为什么学Python】 Python 是当今非常热门的语言之一，2020年的 TIOBE 编程语言排行榜中 ，Python名列第一，并且其流行度依然处在上升势头。 在2015年的时候，在网上还经常看到学Python还是学R的讨论，那时候老齐就选择了Python，并...
web面试题
henry_rhy的博客
09-28 407
web面试题 1.web自动化中常见的元素定位方式 （1）id：根据id来获取元素，返回单个元素，id值一般是唯一的 （2）name：根据元素的name属性定位 （3）tagName：根据元素的标签名定位 （4）className：根据元素的样式class值定位 （5）linkText：根据超链接的文本值定位 （6）partialLinkText：根据超链接的部分文本值定位 （7）cssSelector：css选择器定位 （8）xpath：通过元素的路径来定位 2.如何定位属性值动态变化的
vue的$set和$get方法详解
m0_72446057的博客
02-21 5060
vue的$set和$get学习
怎么在控制台打印vue实例对象_程序员择业疑惑：前端要凉？学习Vue还有必要吗？...
weixin_39689297的博客
11-23 268
点击上方蓝色字关注我们~前端之火永不熄灭，Vue该学的一点都不能少！1前言我们以前实现过一个简单的响应式逻辑，但是比起 Vue 的实现那简直就是小孩子的玩具，在Vue 中, 使用了observer， watcher，和 dep 三种对象来实现响应式。而响应式的属性是具有嵌套特征的复杂对象。这里涉及到设计模式，递归与算法等，可谓是代码的技巧精华所在。2响应式系统TemplateScript...
Web相关面试题
weixin_42632642的博客
11-19 2324
1,判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20 var reg = /1[a-zA-Z_0-9]{4,19}/;/∗注意：1.要用开头和/;/*注意：1.要用^开头和/;/∗注意：1.要用开头和结尾，2.总长度5-20翻译为{4,19}；3.别忘了还有下划线；*/ reg.test(“a1a__a1a__a1a__a1a__”); 2，截取字符串abcdefg的efg var str = “abcdefg”; if (/efg/.test(str)) {/判
WEB面试题
m0_46401564的博客
06-13 387
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、箭头函数二、this2.总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、箭头函数 ECMAScript新增使用箭头函数( => ) 语法定义函数表达式能力，很大程度上，箭头函数实例化函数对象与正式表达式创建函数对象行为对象行为相同的。任何
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值