VUE面试题汇总(九)

news2024/11/27 0:44:17
  1. 之间联系(Model 和 ViewModel 的双向数据绑定)

解析:

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象(桥梁)。

在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

85. MVC、MVP 与 MVVM 模式

参考答案:

一、MVC

通信方式如下

  1. 视图(View):用户界面。 传送指令到 Controller

  2. 控制器(Controller):业务逻辑 完成业务逻辑后,要求 Model 改变状态

  3. 模型(Model):数据保存 将新的数据发送到 View,用户得到反馈

二、MVP

通信方式如下

mvp

  1. 各部分之间的通信,都是双向的。

  2. View 与 Model 不发生联系,都通过 Presenter 传递。

  3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter 非常厚,所有逻辑都部署在那里。

三、MVVM

MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。通信方式如下

MVVM

唯一的区别是,它采用双向绑定(data-binding):View 的变动,自动反映在 ViewModel,反之亦然。

86. 常见的实现 MVVM 几种方式

参考答案:

1.发布-订阅者模式(backbone.js) 最早的mvvm框架

一般通过pub、sub的方式来实现数据和视图的绑定 使用起来比较麻烦

2.脏值检查(angular.js)

用定时器轮训检测数据是否发生改变 性能低

3.(vue用什么方式实现的数据绑定?)

数据劫持 Object.defineProperty给对象的属性增加修饰符来劫持各个属性的setter getter(获取值和设置值的时候 你都能知道

然后就可以修改页面的视图了) 此外还结合了发布订阅模式 把所有订阅 指定 统一做更新的处理

IE8以下不支持 Object.defineProperty这个属性的 所以vue只兼容到ie9

87. 解释下 Object. defineProperty()方法

参考答案:

这是 js 中一个非常重要的方法,ES6 中某些方法的实现依赖于它,VUE 通过它实现双向绑定,此方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象

解析:

语法


Object. defineProperty(object, attribute, descriptor)

  • 这三个参数都是必输项

  • 第一个参数为 目标对象

  • 第二个参数为 需要定义的属性或者方法

  • 第三个参数为 目标属性所拥有的特性

descriptor


前两个参数都很明确,重点是第三个参数 descriptor, 它有以下取值

  • value: 属性的值

  • writable: 属性的值是否可被重写(默认为 false)

  • configurable: 总开关,是否可配置,若为 false, 则其他都为 false(默认为 false)

  • enumerable: 属性是否可被枚举(默认为 false)

  • get: 获取该属性的值时调用

  • set: 重写该属性的值时调用

一个例子

var a = {};

Object.defineProperty(a, “b”, {

value: 123

});

console.log(a.b); //123

a.b = 456;

console.log(a.b); //123

a.c = 110;

for (item in a) {

console.log(item, a[item]); //c 110

}

因为 writable 和 enumerable 默认值为 false, 所以对 a. b 赋值无效,也无法遍历它

configurable


总开关,是否可配置,设置为 false 后,就不能再设置了,否则报错, 例子

var a = {};

Object.defineProperty(a, “b”, {

configurable: false

});

Object.defineProperty(a, “b”, {

configurable: true

});

//error: Uncaught TypeError: Cannot redefine property: b

writable


是否可重写

var a = {};

Object.defineProperty(a, “b”, {

value: 123,

writable: false

});

console.log(a.b); // 打印 123

a.b = 25; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)

console.log(a.b); // 打印 123, 赋值不起作用。

enumerable


属性特性 enumerable 定义了对象的属性是否可以在 for… in 循环和 Object. keys() 中被枚举

var a = {};

Object.defineProperty(a, “b”, {

value: 3445,

enumerable: true

});

console.log(Object.keys(a)); // 打印[“b”]

enumerable 改为 false

var a = {};

Object.defineProperty(a, “b”, {

value: 3445,

enumerable: false //注意咯这里改了

});

console.log(Object.keys(a)); // 打印[]

set 和 get


如果设置了 set 或 get, 就不能设置 writable 和 value 中的任何一个,否则报错

var a = {};

Object.defineProperty(a, “abc”, {

value: 123,

get: function() {

return value;

}

});

ES6

  • 列举常用的ES6特性:

  • 箭头函数需要注意哪些地方?

  • let、const、var

  • 拓展:var方式定义的变量有什么样的bug?

  • Set数据结构

  • 拓展:数组去重的方法

  • 箭头函数this的指向。

  • 手写ES6 class继承。

微信小程序

  • 简单描述一下微信小程序的相关文件类型?

  • 你是怎么封装微信小程序的数据请求?

  • 有哪些参数传值的方法?

  • 你使用过哪些方法,来提高微信小程序的应用速度?

  • 小程序和原生App哪个好?

  • 简述微信小程序原理?

  • 分析微信小程序的优劣势

  • 怎么解决小程序的异步请求问题?

其他知识点面试

  • webpack的原理

  • webpack的loader和plugin的区别?

  • 怎么使用webpack对项目进行优化?

  • 防抖、节流

  • 浏览器的缓存机制

  • 描述一下二叉树, 并说明二叉树的几种遍历方式?

  • 项目类问题

  • 笔试编程题:

最后

技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1845398.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

种子流媒体服务器TorrServer

什么是 TorrServer ? TorrServer 是一个允许用户在线查看种子而无需预先下载文件的程序。 TorrServer 的核心功能包括缓存种子以及通过 HTTP 协议进行后续数据传输,允许根据系统参数和用户的互联网连接速度调整缓存大小。 软件特点 缓存流媒体本地和远程…

金蝶云星空与MES系统深度集成对接案例全公开

项目背景 深圳市某自动化设备有限公司,自2006年成立以来,一直专注于高端精密自动化设备的研发、生产与销售。作为一家高科技企业,公司依托深圳这一经济特区的地理优势,构建了覆盖全国的服务网络,并拥有两个先进的生产…

爬虫超详细介绍

爬虫(Spider)是一种自动化程序,用于在互联网上获取信息。 其工作原理主要可以分为以下几个步骤: 发起请求: 爬虫首先需要向目标网站发起HTTP请求,以获取网页的内容。这个请求可以包含一些额外的信息&…

【C++】类和对象(四)拷贝构造、赋值运算符重载

文章目录 四、拷贝构造函数干嘛的?写拷贝构造函数的注意事项正确写法 不显示定义拷贝构造函数的情况浅拷贝:one:示例:内置类型:two:示例:自定义类型一个提问 深拷贝 五、赋值运算符重载运算符重载函数原型注意调用时的两种书写方式完整实现代…

skywalking segment索引占用elasticsearch大量磁盘空间

现象: skywalking segment索引占用elasticsearch大量磁盘空间 原因 recordDataTTL 是SkyWalking的一个配置项,用于设置记录数据的存活时间(TTL, Time To Live)。SkyWalking是一个开源的应用性能监控系统,用于监控分…

tplink安防监控raw文件转码合成mp4的方法

Tplink(深圳普联)专业的网络设备生产商,属于安防监控市场的后来者。Tplink的安防产品恢复了很多,其嵌入式文件系统也一直迭代更新。今天要说的案例比较特殊,其不仅仅要求恢复,还要求能解析出音频并且要求画面和声音实现“同步”。…

入门Rabbitmq

1、什么是消息队列 消息队列:应用之间传递消息的方式,允许应用程序异步发送和接收消息,不需要连接对方 消息:文本字符串,对象.... 队列:存储数据。先进先出 2、应用场景 ①库存系统挂掉之后 MQ会等待&…

AI PPT生成器,一键在线智能生成PPT工具

PPT作为商业沟通和教育培训中的重要工具,PPT制作对于我们来说并不陌生。但是传统的PPT制作不仅耗时,而且想要做出精美的PPT,需要具备一定的设计技能。下面小编就来和大家分享几款AI PPT工具,只要输入主题,内容就可以在…

本地快速部署大语言模型开发平台Dify并实现远程访问保姆级教程

文章目录 前言1. Docker部署Dify2. 本地访问Dify3. Ubuntu安装Cpolar4. 配置公网地址5. 远程访问6. 固定Cpolar公网地址7. 固定地址访问 前言 本文主要介绍如何在Linux Ubuntu系统使用Docker快速部署大语言模型应用开发平台Dify,并结合cpolar内网穿透工具实现公网环境远程访问…

C# WPF入门学习主线篇(二十八)—— 使用集合(ObservableCollection)

C# WPF入门学习主线篇(二十八)—— 使用集合(ObservableCollection) 在WPF中,数据绑定是构建动态和响应式用户界面的关键。ObservableCollection是一个特别有用的集合类型,它不仅支持数据绑定,还…

在Tomcat中部署war包

1、准备war包 确保已经有一个有效的war包,该war包包含了web应用程序的所有内容; 2、停止tomcat服务器 在部署之前,确保tomcat服务器已经停止,进入tomcat的配置目录执行命令:[路径]/tomcat/conf; 在Linux…

windows系统实现应用程序开机即运行(不登录系统也行)

由于近期需要设置一个Java程序开机自启动,因此试了一下方法,总结了两点,一个是需要用户登录系统之后再启动,一种是不需要登录,只要开机就会启动。 先看准备工作,写一个启动脚本: echo on E: cd…

[STM32]万年历

[STM32]万年历 需要资料的请在文章末尾获取~ ​​ 01描述 使用原件:stm32f103c8t6最小系统板x1,0.96寸OLED显示屏四角x1,4x4矩阵按键x1; 键位对应图: 1, 2, 3, 4------------- 切换页面 设置…

Dynamics 365 on-premise 隐藏高级查找导出按钮

提示 着急可以直接看结果代码部分 背景 Dynamics 365 on-premise中有个高级查找的功能,查询的结果支持导出,如下图 业务反馈这个有数据安全风险,要修改显示规则。 一开始想着能用RibbonWorkbench改,就很爽快得答应了业务。结果用RibbonWorkbench改不了。 反复尝试 既…

AI早班车2024.5.21

先一步知道AI未来! 全球AI新闻速递 1.中国电信:发布万亿参数语义模型 Tele-FLM-1T。 2.蚂蚁图数据库再获LDBC权威测试世界第一。 3.昇腾 AI 算力性能已超英伟达 A100,近半中国大模型选择昇腾技术路线。 4.中国气象局发布“风清”、“风雷”…

造价信息网工程造价信息最新明细

提供造价信息网工程造价信息、厂商报价市场价,交通工程造价信息,电网工程造价信息,园林苗木绿化造价信息,工程定额免费资源可在 祖国建材通 www.zgjct.com 查询获取下载 造价信息网工程造价信息更新明细如下: 直辖市 …

深入浅出通信原理 | 通信系统模型中的基带信号的发送与接收

微信公众号上线,搜索公众号小灰灰的FPGA,关注可获取相关源码,定期更新有关FPGA的项目以及开源项目源码,包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、通信系统模型中的信…

使用ERNIE Bot SDK和一条核心prompt开发AI“划拳“游戏!

项目背景 划拳是汉族民间饮酒时一种助兴取乐的游戏,起源于汉代。 游戏规则如下: 两人同时伸出一只手,先攥起拳头,代表财不外露。再伸出一到五个手指,表示从零到五之间的数字,同时嘴里大声喊出两人所出数字之和。 两人…

构建智慧高速公路:软件管理平台业务架构解析

随着交通网络的不断完善和技术的快速发展,智慧高速公路正成为交通领域的重要发展方向。在智慧高速公路系统中,软件管理平台扮演着关键的角色,它不仅是管理各种设备和系统的核心,还承担着数据监控、故障诊断、维护管理等重要任务。…

Linux 一键部署Nginx+ModSecurity

前言 ModSecurity 是 Apache 基金会的一个开源、高性能的 Web 应用程序防火墙(WAF),它提供了强大的安全规则引擎,用于检测和阻止各种攻击行为,如 SQL 注入、XSS 跨站点脚本攻击等。而 nginx 是一个高性能的 Web 服务器,常用于处理大量的并发请求,具有很高的负载均衡能力…