• Vue——Vue简介、MVC与MVVM之间的区别（面试题）、条件渲染 (面试）、循环渲染(面试)、面试题/笔试题

    目录

    一、Vue简介

    二、面试题：MVC与MVVM之间的区别

    （1）MVC

    （2）MVVM

    三、条件渲染 (面试)

    v-if /v-else 或者 v-show

    4. v-if 和v-show 这个两个谁好? (面试)

    四、循环渲染(面试)

    1、v-for

    2.for和if放在了同一个标签中  

    解决方案：

    3.key的意义(面试)

    五、面试题/笔试题

    1、三大主流框架的区别？设计思想和使用场景 

    1）React

    2）Vue

    3）Angular

    2、vue.js 渐进式框架(分层的设计模式)是什么意思？五层设计

    3、vue.js 的核心是什么？数据驱动和组件化开发

    4、渐进增强、优雅降级是什么？

    5、你知道的常用的框架？至少四个

    6、谈谈对Vue框架的理解

    7、谈谈对React的理解

    8、谈谈你对MVVM原理的理解

    一、Vue简介

    是阿里的尤雨溪出的框架

    • Vue.js（读音 /vjuː/, 类似于 view）是目前最流行的一个框架，React是最流行的一个框架。

    • Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。 数据驱动 vue.js 数据驱动和组件化开发，轻量级一些，分层渐进式框架；spa React.js 数据驱动和组件化开发，灵活性很高，需要什么都得自己构建逻辑自己写;app Angular.js 数据驱动 1.0 ，加上了组件化开发2.0，重量级框架;大型企业OA办公

    • Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

    • Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

    • Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    二、面试题：MVC与MVVM之间的区别

    （1）MVC

    在实际应用开发场景中，开发者常用的一种设计模式是MVC（eg：node（后端）中的MVC设计模式）：

    - M（Model）：数据模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据。  
    - V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的。 
    - C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

    （2）MVVM

    - M（Model）：模型层。就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。 
    - V（View）：视图层。就是展现出来的用户界面。 
    - VM（ViewModel）：视图模型层。就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

    三、条件渲染 (面试)

    v-if /v-else 或者 v-show

    1.         
      "app">
    2. 			<div v-if="flag">666div>
    3. 			<div v-show="flag">777div>
    4.
  • <script type="text/javascript">
  • new Vue({
  • el: "#app",
  • data: {
  • flag:false
  • }
  • })

    • 1.使用的变量为true就显示,false就隐藏（false就是将节点解绑了）            
    2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果
    3.v-if的做法是删除节点,v-show做法是操作css的display:none

    visibility: hidden; 不脱离文档流的                   v-if                删除节点
    display:none        脱离文档流                         v-show         display:none    

    4. v-if 和v-show 这个两个谁好? (面试)

    根据它们底层的设计不一样有各自的使用场景
     v-if：采用的是移除元素来切换模块，具有较高的 切换消耗,常常用在用户不常切换的模块
     v-show：采用css的隐藏元素（display:none）来切换模式，具有较高的性能消耗,常常用在频繁切换的模块中    

    1. 	
      "app">
    2. 		<button @click="change1">开关button>
    3. 		<div v-if="flag">hellodiv>
    4. 		<div v-show="flag">hello2div>
    5. 		<div v-show="'flag'+100">hello2div>
    6.
  • <script>
  • new Vue({
  • el: "#app",
  • data: {
  • n: 0,
  • n2: true,
  • flag: true
  • },
  • methods: {
  • change1() {
  • this.flag = !this.flag
  • }
  • }
  • })
  • script>

    • 四、循环渲染(面试)

    1、v-for

    v-for是JSX语言（JSX是一种JavaScript的语法扩展）

    1. "app">
    2. 		<div v-for="(el,index) in arr">
    3. 			<p>{{el}}--testp>
    4. 			<p>hello----bottomp>
    5. 			<p v-text="el">p>
    6. 			<p>----{{index}}p>
    7. 		div>
    8. 		<div v-for="el in arr2">
    9. 			<b>{{el.name}}b>
    10. 			<p>{{el.age}}p>
    11. 		div>
    12. 		<div v-for="el in arr3">
    13. 			<h1>{{el.name}}h1>
    14. 			<div v-for="el2 in el.titles">
    15. 				{{el2}}
    16. 			div>
    17. 		div>
    18.
  • <script>
  • new Vue({
  • el: "#app",
  • data: {
  • arr: ["hello", "vue", "js"],
  • arr2: [{
  • age: 23,
  • name: "karen"
  • }, {
  • age: 24,
  • name: "jack"
  • }, {
  • age: 29,
  • name: "marry"
  • }],
  • arr3: [{
  • name: "css",
  • titles: ["宽度", "高度", "原角度", "颜色"]
  • }, {
  • name: "js",
  • titles: ["变量"]
  • }, {
  • name: "html",
  • titles: []
  • }]
  • }
  • })
  • script>

    • 2.for和if放在了同一个标签中  

    没有先后顺序的要求,但是先执行for

    渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染

    这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

    vue2.0中v-if v-for写到一个元素中，v-for优先级更高

    （vue3.0不能写在一起，不然会报错）

    1.         
      "app">
    2. 			<div v-for="el in arr3">
    3. 				<h1>{{el.name}}h1>
    4. 				<div v-for="el in el.titles"  v-if="el.age>10">{{el}}div>
    5. 			div>
    6.

    解决方案：

    1）把for弄到最外层(面试)

    如果if和for套在一层,数据容器发生变化时,if会重新判断一遍
    嵌套的写法 数据容器变化时 if只判断新增的数据
    这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率

    这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中
    2）解决方案:wx采用的是block元素 vue呢?     template     其实就是dom操作中的fragment

    1. "app">
    2. 		<div v-for="el in arr3">
    3. 			<h1>{{el.name}}h1>
    4. 			<template v-if="el.age>10">
    5. 				<div v-for="el in el.titles">{{el}}div>
    6. 			template>
    7. 		div>
    8. 	
    9. 	<script>
    10. 		var vm = new Vue({
    11. 			el: "#app",
    12. 			data: {
    13. 				arr3: [{
    14. 					name: "css",
    15. 					age: 37,
    16. 					titles: ["宽度", "高度", "原角度", "颜色"]
    17. 				}, {
    18. 					name: "js",
    19. 					age: 20,
    20. 					titles: ["变量"]
    21. 				}, {
    22. 					name: "html",
    23. 					age: 90,
    24. 					titles: ["标签"]
    25. 				}]
    26. 			}
    27. 		})
    28. 	script>

    3.key的意义(面试)

    data中for循环的容器数据个数发生变化时,会跟for中的vm节点个数作比较

    如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM

    然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来)

    解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值

    简答:因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用

    这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来

     key==>让数据跟真实的DOM 一 一 关联，

    使之不发生渲染混乱的情况，提高绘制渲染效率

    ==> key 的作用主要是为了高效地更新虚拟 DOM

    1. 	
      "app">
    2. 		<h1>请选择你最喜欢的5件商品(免费赠送给你)h1>
    3. 		<div v-for="el in arr" :key="el.id">   
    4. 			
    5. 			<input type="checkbox" name="goods" :value="el.id">
    6. 			<b>{{el.title}}b>
    7. 		div>
    8. 		<button @click="addmore">加载更多button>
    9. 	div>
    10. 	<script type="text/javascript">
    11. 		new Vue({
    12. 			el: "#app",
    13. 			data: {
    14. 				id: 5,
    15. 				arr: [{ id: 1, title: "包包1", price: 123 },
    16. 				{ id: 2, title: "鞋子1", price: 123 },
    17. 				{ id: 3, title: "衣服1", price: 123 },
    18. 				{ id: 4, title: "商品1", price: 123 }]
    19. 			},
    20. 			methods: {
    21. 				addmore() {  //当点击加载更多的时候，页面就会在头部插入商品
    22. 					let obj = { id: this.id++, title: "商品" + this.id, price: 123 }
    23. 					this.arr.unshift(obj)
    24.                     //this.arr.push(obj)   //这样写不管有没有key，都不会错
    25. 				}
    26. 			}
    27. 		})
    28. 	script>

    一般说：把数据源渲染到页面上，其实是不对的，正确的是将this，那个劫持的渲染到页面上

    五、面试题/笔试题

    1、三大主流框架的区别？设计思想和使用场景 

    1）React

    1、子组件重复渲染问题需要手动优化

    2、可以使用redux进行状态管理，函数式、不可变、模式化，时间旅行

    3、可使用JSX，完全的javascript能力

    优点：

    引入了一个叫做虚拟DOM的概念，运行速度快；提供了标准化的API，解决了跨浏览器问题、兼容性更好；代码更加模块化，重用代码更容易，可维护性高。

    缺点：

    React是目标是UI组件，通常可以和其它框架组合使用，并不适合单独做一个完整的框架

    2）Vue

    1、可使用JSX，但推荐使用模版语言而不是JSX

    2、学习曲线平缓 优点：渐进式构建能力是Vue.js最大的优势，Vue有一个简洁而且合理的架构，使得它易于理解和构建。Vue有一个强大的充满激情人群的社区，这为Vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。

    缺点：

    在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑；它类似于Web组件的模式，而不是真正的Web组件。

    3）Angular

    特点

    1、完善的MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能

    2、Typescript 脏检查，对脏数据的检查就是脏检查，比较UI和后台的数据是否一致

    优点：

    模板功能强大丰富并且是声明式的，是一个比较完善的前端MVC框架，自带了丰富的Angular指令；ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮

    缺点：

    验证功能错误信息显示比较薄弱，需要写很多模板标签；ngView只能有一个，不能嵌套多个视图；比较笨重，没有让用户选择一个轻量级的版本。

    2、vue.js 渐进式框架(分层的设计模式)是什么意思？五层设计

    3、vue.js 的核心是什么？数据驱动和组件化开发

    1）、数据驱动页面（响应式数据）

    2）、组件化开发

    4、渐进增强、优雅降级是什么？

    优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不
    支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级
    浏览器 只 保证最基本的功能。关键的区别 是他们所侧重的内容，以及这种不同造成
    的工作流程的差异
    优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
    渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高
    级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    5、你知道的常用的框架？至少四个

    1、jQuery
    jquery是基于JavaScript类库的框架，其中提供了许多JavaScript类库，和一些css样式表的封装，使用起来比较方便，简化了用户与浏览器的交互，提高了系统的性能和开发效率。其封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTMl文档操作，事件处理，动画设计和Ajax交互.
    具有独特的链式语法和短小清晰的多功能接口具有高效灵活的css选择器，并且可以对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

    优点：（1）快速获取文档元素 （2）提供漂亮的页面动态效果 （3）创建Ajax无刷新页面  https://jquery.com/download/  推荐插件库

     2、vue
    vue是一套用于构建用户界面的渐进式JavaScript框架，其可以自底向上逐层应用，其核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目进行整合。而且当与现代化的工具链以及各种支持类库结合使用时，Vue也可以为复杂的单页应用提供驱动。

    优点：轻量级框架，简单易学，双向数据绑定，组件化，数据结构分离，虚拟Dom，运行速度快。vue 是单页面应用，是页面局部刷新，不用每次跳转都要请求所有数据和dom，其大大加快了访问速度，提升了用户体验，

    缺点：不支持IE8，其生态环境不如react和anguler

     3、react
    ReactJS是一套JavaScript Web库，由Facebook打造而成且主要用于构建高性能及响应式用户界面。React负责解决其它javascript框架所面对的一大常见难题，即对大规模数据集的处理。能够使用虚拟DOM并在发生变更时利用补丁安装机制只对DOM中的dirty部分进行重新渲染，React得以实现远超其它框架的速度表现。

    优点：（1）不直接对DOM进行操作，引入了一个叫做“虚拟DOM”的概念，安插在javascript逻辑和实际的DOM之间，性能好

    (2)虚拟DOM解决了跨浏览器问题，提供了标准化的API，甚至在IE8中都是没问题的。

    (3)代码更加模块化，重用代码更容易，可维护性高。

    (4) Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。

    (5)兼容性好

     4、angular
    Angular最显著的特征就是其整合性。它是由单一项目组常年开发维护的一体化框架，涵盖了M、V、C/VM等各个层面，不需要组合、评估其它技术就能完成大部分前端开发任务。这样可以有效降低决策成本，提高决策速度，对需要快速起步的团队是非常有帮助的。

    优点：1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；

    是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；

    自定义Directive(指令)，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；

    ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

    5、Flutter

    最初的设计目标就是跨端, 通过隐藏设备差异、平台UI差异、一次编写，多端运行。开发者只需要掌握Flutter，就可以同时在Android及iOS平台上面发布自己的App。非常适合原型搭建或者小规模的开发团队。

    为了尽可能不依赖平台特性， Flutter在Dart虚拟机之上实现了全套的UI组件、手势管理、资源管理、并采用GPU直接渲染的方式。随之而来的结果就是高效的渲染性能及比源生UI更加灵活的表现力。在大大减少了适配工作的同时，很好的保障了低端设备的流畅度。

    6、谈谈对Vue框架的理解

    简单来说，vue就是一个用于创建用户界面的渐进式的Javascript框架。
    它有3个优点：

    第一个是采用组件化模式，把html、css、js等组合封装成一个vue组件，这个vue组件是可以重复使用的，这样的话就大大提高了代码的利用率，以及代码维护起来会更加方便。
    第二个是声明式编码，程序员可以直接在页面上用vue指令循环遍历数据源，不用手动操作DOM节点，提高软件开发效率。
    第三个是采用虚拟DOM和利用Diff算法，把后台的数据传到虚拟DOM中，利用Diff算法比较前后数据更新的变化，这样就可以尽量地复用DOM节点，优化性能。

    （思路：1、一句话定位 2、详细面概述每一个知识点 3、自己的见解）

    7、谈谈对React的理解

    8、谈谈你对MVVM原理的理解

    M就是Model模型，对应Vue实例中的data函数，V就是View视图，对应Vue中的模拟，VM就是ViewModel视图模型，对应Vue实例。
    传统的前端需要手动地操作DOM节点来渲染页面，而MVVM模式就直接把后台的数据挂载到Vue实例中。
    ViewModel会自动把Model中的数据渲染到View视图中，而当View视图发生变化时，ViewModel也会更新Model层的数据，所以ViewModel是View和Model之间的桥梁，这是一个双向的过程，也就是MVVM是一个数据双向绑定的过程。
    这样的好处，就是可以把前后端独立分离开来，提高软件开发效率。

  • 相关阅读:
    leetcode543--二叉树的直径
    FastAPI+Pydantic使用自定义参数校验+自定义异常+全局异常捕获
    软件开发行业的乱象——低价引流中途收费？299？399？
    Hadoop分布式模式配置
    【堆】数据结构-堆的实现【超详细的数据结构教学】
    shell脚本字典创建遍历打印
    Docker从认识到实践再到底层原理（九）｜Docker Compose 容器编排
    C\C++刷题ADY3
    来看看单阶段目标检测算法趴
    Vue入门教学——编写第一个页面
  • 原文地址：https://blog.csdn.net/qq_52301431/article/details/126602020