VUE面试题汇总(九)

  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对项目进行优化?

  • 防抖、节流

  • 浏览器的缓存机制

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

  • 项目类问题

  • 笔试编程题:

最后

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用RT-Thread Studio创建STM32项目

引言 RT-Thread(简称RTT)是一个开源的实时操作系统,主要面向嵌入式系统应用。它具有高度可裁剪性、跨平台、高可靠性和实时性等特性,广泛应用于物联网(IoT)、工业控制、智能家居和消费电子等领域。本文将介…

110 Realistic Forest Environment Textures Grass(110+真实的森林环境纹理--草、泥土等)

一组110多个真实的树皮、草、泥土、岩石和其他地面纹理,用于森林环境。 每个纹理都是可贴的/无缝的,并且完全兼容各种不同的场景--标准Unity地形、Unity标准着色器、URP、HDRP等等都兼容。 所有的纹理都是4096x4096,并包含一个HDRP掩码,以完全支持HDRP。 特点。 110种质地 …

洛杉矶裸机云服务器怎么用

洛杉矶裸机云服务器是一种结合了物理服务器性能和云服务灵活性的高性能计算服务。它为用户提供了高效、安全的计算和存储能力,特别适合需要大量数据处理和快速响应的应用。具体分析如下,rak部落小编为您整理发布洛杉矶裸机云服务器怎么用。 1. 硬件配置选…

大型语言模型在AMD GPU上的推理优化

Large language model inference optimizations on AMD GPUs — ROCm Blogs 大型语言模型(LLMs)已经改变了自然语言处理和理解,促进了在多个领域中的众多人工智能应用。LLMs在包括AI助手、聊天机器人、编程、游戏、学习、搜索和推荐系统在内的…

SAP 新安装的系统,财务开账期OB52需要传输

调整 se11 实用程序 表维护生成器 改成这个 以上参考 SAP 事务码设置为前台不需传输请求_t811flags-CSDN博客

linux端口被占用 关闭端口

系列文章目录 文章目录 系列文章目录一、linux端口被占用 关闭端口1.参考链接2.具体命令 二、【linux关闭进程命令】fuser -k 和 kill -9 的区别1.参考链接2.具体命令 一、linux端口被占用 关闭端口 1.参考链接 linux端口被占用 关闭端口 2.具体命令 1.查看端口是否被占用 …

第一百一十六节 Java 面向对象设计 - Java 终止块

Java 面向对象设计 - Java 终止块 ​try ​块也可以有零个或一个​ finally​ 块。 ​finally ​块总是与 ​try ​块一起使用。 语法 使用 ​finally​ 块的语法是 finally {// Code for finally block }​finally​ 块以关键字 ​finally​ 开始,后面紧跟一对…

绿色领航·数链未来“2024中国消费电子博览会”招商工作全面启动

中国国际消费电子博览会(简称CICE电博会)自2001年创办以来,已逐渐发展成为全球极具影响力的行业盛会。它不仅是国内外消费电子产业的重要交流平台,更是展示我国消费电子产业发展成果的重要窗口。2024年,这一盛会再次在…

Freepik中的Retouch功能:轻松编辑图片

Freepik是一个免费的在线资源库,提供各种各样的图片、矢量图和图标。除了提供免费的素材下载,Freepik还提供了一些实用的编辑工具,其中包括Retouch功能。Retouch功能可以使用提示词让您对现有图片进行编辑,无需下载任何软件。 以…

番外篇 | FFCA-YOLO复现:面向遥感图像的小目标检测最新方法 | 解决小目标检测特征表示不足和背景混淆等问题

前言:Hello大家好,我是小哥谈。在论文中,作者的动机是设计一个高精度同时具备潜在的实时处理能力的小目标检测器。由此,作者首先分别提出了特征增强模块(FEM)与空间上下文感知模块(SCAM)来丰富局部和全局的上下文特征信息。其中,FEM通过多分支卷积拓宽了骨干网络的感受…

Net开源项目推荐-WPF控件样式篇

Net开源项目推荐-WPF控件样式篇 HandyControlWPFDeveloperswpf-uidesignLive-ChartsAvalonDock HandyControl WPF控件库,比较常用的WPF开源控件库,对WPF原有控件样式都进行了重写和扩展,也增加了许多特别的控件,非常好用 github仓库&#x…

分布式光纤测温DTS使用的单模光纤与多模光纤有何区别?

分布式光纤测温DTS中使用的单模光纤和多模光纤之间存在着本质区别。单模光纤是一种在光纤通信中应用广泛的光纤类型,几乎所有的光纤入户和主干线通信都采用单模光纤。从通信的角度来看,单模光纤就好比一条单行道的高速铁路,而多模光纤则类似于…

Linux字节对齐小程序

#include <stdio.h> // 默认对齐 struct DefaultAligned { char c; int i; }; // 按1字节对齐 #pragma pack(push, 1) struct OneByteAligned { char c; int i; }; #pragma pack(pop) // 恢复之前的对齐设置 int mai…

HTML静态网页成品作业(HTML+CSS+JS)——家乡莆田介绍网页(5个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现图片轮播&#xff0c;共有5个页面。 二、作品…

Web APIs--Dom获取属性操作

目录 1.DOM&#xff08;操作网页内容、用户交互&#xff09; 2.DOM对象获取&#xff08;querySelect(‘’)、querySelectAll(‘’)&#xff09; 总结&#xff1a; 3.操作元素内容&#xff08;修改元素的文本更换内容&#xff09; 1. 元素innerText 属性 2.元素.innerHTML…

代码随想录算法训练营第四十一天| 416. 分割等和子集

416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; class Solution {public boolean canPartition(int[] nums) {int sum 0;for (int i0;i<nums.length;i){sum nums[i];}if(sum%2!0){return false;}int weight sum /2;// int[][] dp new int[nums.length][weig…

VirtualBox虚拟机下安装Ubuntu24.04操作系统

目录 0 背景1 虚拟机的安装1.1 下载安装包1.2 走安装向导 2 操作系统的安装2.1 下载光盘镜像文件2.2 安装操作系统到虚拟机上 3 基本配置3.1 网络连接方式3.2 共享文件夹3.3 设置显存大小 0 背景 首先说说Ubuntu系统&#xff0c;或者更普遍一点&#xff0c;Linux系统究竟有什么…

自定义模板DIY专属CSDN个人主页!HTML+CSS个性化全攻略

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 &#x1f4af;如何通过HTMLCSS自定义模板diy出自己的个性化csdn主页&#x…

手机usb共享网络电脑没反应的方法

适用于win10电脑&#xff0c;安卓手机上可以 开启usb网络共享选择&#xff0c;如果选择后一直跳&#xff0c;让重复选择usb选项的话&#xff0c;就开启 开发者模式&#xff0c;进到 开发者模式 里设置 默认usb 共享网络 选项 &#xff0c;就不会一直跳让你选。 1.先用数据线 连…

Redis—String数据类型及其常用命令详解

文章目录 Redis概述1.Redis-String数据类型概述2.常用命令2.1 SET&#xff1a;添加或者修改已经存在的一个String类型的键值对2.2 GET&#xff1a;根据key获取String类型的value2.3 MSET&#xff1a;批量添加多个String类型的键值对2.4 MGET&#xff1a;根据多个key获取多个Str…