devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端面试题_array.from(new set()) 数组对象不生效

作者：寸_铁 | 2024-08-15 13:25:15

赞

踩

array.from(new set()) 数组对象不生效

HTML

简述src和href的区别

src用于替换当前的元素，href用于在当前文档和引用资源之间建立联系。

  • src
    src是souce的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。请求时，会将该资源下载并应用到文档内，例如js脚本，img图片和iframe等元素。
  • href
    href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 <link href='common.css' rel='stylesheet'/>
    那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式。

px、rem和em的区别

  • px像素，绝对单位，一旦设置了就无法因为适应页面大小而改变
  • em和rem(root em css3新特性)都是相对长度单位，意思是长度不是定死了的，更适用于响应式布局
  • em是相对于父元素的fontsize大小来进行换算，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小
  • rem则是相对于根元素<html>的fontsize大小来进行换算，这样就意味着，我们只需要在根元素确定一个参考值

什么是css hack

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的

列举html5，css3的新特性

  • html5
    • 语义化标签

      • <header> 头部标签

      • <nav> 导航标签

      • <article> 内容标签

      • <section> 定义文档某个区域

      • <aside> 侧边栏标签

      • <footer> 尾部标签

    • 多媒体标签
      • <video>视频标签
      • <audio>音频标签
    • 表单属性
      • required：required 表单拥有该属性表示其内容不能为空，必填
        placeholder 提示文本 表单的提示信息，存在默认值将不显示（重点）
        autofocus：autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
        autocomplete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete=“off”需要放在表单内，同时加上name属性，同时成功提交。
        multiple：multiple 可以多选文件提交（重点）
   邮箱: <input type="email" />
   网址: <input type="url" />
   日期: <input type="date" />
   时间: <input type="time" />
   数量: <input type="number" />
   手机号码: <input type="tel" />
   搜索: <input type="search" />
   颜色: <input type="color" />

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

可以通过哪些方法优化css3 animation渲染

列举几个前端性能方面的优化

  • 降低请求量
    • 合并资源，减少http请求数量
    • lazyLoad 如图片懒加载或者图片滑动到可视区再加载
    • 使用字体图标或CSS绘制，来代替部分图片
  • 加快请求速度
    • webP，对图片进行压缩，减少图片体积。
    • minify/gzip 压缩，对css、js等文件进行压缩（去除空格、回车等），减少文件体积
    • CDN 分发
    • 并行加载
  • 缓存
    • HTTP协议缓存请求
    • 离线缓存 manifest
    • 本地缓存 localStorage
  • 渲染
    • JS优化，如防抖、节流、事件委托、减少重排重绘等
    • CSS优化，如提取公共样式减少代码量、减少选择器嵌套层数、精灵图等
    • 服务器端渲染
    • 使用Web Workers
    • CSS写在文件头部，JS写在文件底部

响应式布局的原理

可以自动识别屏幕宽度，并做出相应调整的网页设计，布局和展示的内容可能会有所改变

  • 媒体查询
    • css3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面
  • 百分比布局
  • rem响应式布局
  • 视口单位

响应式和自适应的区别

  • 响应式：只需要开发一套代码，响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容
  • 自适应：需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

清除浮动的方法

  • 直接设置父元素高度
    • 优势：简单
    • 弊端：必须要知道父元素高度是多少
  • 额外标签法，给最后一个元素设置clear:both
    • 优点： 通俗易懂，书写方便。（不推荐使用）
    • 缺点： 添加许多无意义的标签，结构化比较差
  • 父级添加overflow： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
    • 优点： 简单、代码少、浏览器支持好
    • 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
  • 使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题
    • 优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
    • 缺点： 由于IE6-7不支持：after，使用zoom：1
  • 使用before和after双伪元素清除浮动

如何让Chrome浏览器显示小于12px的文字

  • Zoom：可以改变页面上元素的尺寸，属于真实尺寸
  • transform:scale()：只对可以定义宽高的元素生效，如果是行内元素的话，应该先转为行内块元素。

哪些操作会引起页面的回流（reflow）

  • 改变窗口大小
  • font-size大小改变
  • 增加或者移除样式表
  • 内容变化（input中输入文字会导致）
  • 激活CSS伪类（:hover）
  • 操作class属性，新增或者减少
  • js操作dom
  • offset相关属性计算
  • 设置style的值

怎么减少重绘和回流

  • 尽量不用内联样式style属性，操作元素样式的时候用添加去掉class类的方式，实现合并多次改变样式属性的操作:
  • 给元素加动画的时候，可以把该元素的定位设置成absolute或者fixed（动画元素脱离文档流），这样不会影响其他元素，减少回流的Render Tree的规模。
  • 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。
  • 尽可能在DOM树的最末端改变class。
  • 避免设置多层内联样式。
  • 动画效果应用到position属性为absolute或fixed的元素上。
  • 牺牲平滑度换取速度。
  • 免使用table布局。
  • 避免使用CSS的JavaScript表达式。
  • 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
  • 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
  • 可以在一个display:none的元素上进行操作，最终把它显示出来。因为display:none上的DOM操作不会引发回流和重绘。
  • 避免循环读取offsetLeft等属性，在循环之前把它们存起来。

伪元素和伪类的区别

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素

  • 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
  • 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类

http的状态码有哪些

2xx （3种）

  • 200 OK：表示从客户端发送给服务器的请求被正常处理并返回；

  • 204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；

  • 206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。

3xx （5种）

  • 301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；

  • 302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；

     301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）

    • 1

  • 303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；

    302与303的区别：后者明确表示客户端应当采用GET方式获取资源

    • 1

  • 304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；

  • 307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；

4xx （4种）

  • 400 Bad Request：表示请求报文中存在语法错误；

  • 401 Unauthorized：未经许可，需要通过HTTP认证；

  • 403 Forbidden：服务器拒绝该次访问（访问权限出现问题）

  • 404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；

5xx （2种）

  • 500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；

  • 503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

http和https的区别

  • HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

  • HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

  • HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

  • HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。

http协议和tcp协议的区别

  • 性质不同：http是一个简单的请求-响应协议。TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议
  • 连接不同：TCP连接到不同但互连的计算机通信网络的主计算机中的成对进程之间依靠TCP提供可靠的通信服务。http通常运行在TCP之上。指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。
  • 功能不同：当应用层向TCP层发送用于网间传输的、用8位字节表示的数据流，TCP则把数据流分割成适当长度的报文段，最大传输段大小（MSS）通常受该计算机连接的网络的数据链路层的最大传送单元（MTU）限制。HTTP协议是基于请求/响应范式的
  • HTTP：超文本传输协议，是应用层的协议，以TCP为基础
  • TCP：传输控制协议，是传输层的协议，以IP协议为基础
  • Http是无转态的连接，TCP是有状态的长连接
  • Http协议是建立在TCP协议基础之上的。当浏览器需要从服务器 获取网页数据的时候，会发出一次http请求。Http通过TCP建立起一个到服务器的通道。
  • 当一个网页完成之后，客户端和服务器端之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个页面时，会继续使用这一条已经建立的连接Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件中设定这个时间

JavaScript

浅谈一下前端有哪些存储技术并说一下他们之间的区别

  • cookie，localStorage，sessionStorage，indexDB
  • cookie一般由服务器生成，数据始终在同源的http请求header 中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下
  • 存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
  • 作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
  • IndexedDB是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 Storage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库(不支持 SQL 查询语句)，更接近 NoSQL 数据库

js有哪些数据类型

  • 基本类型：String，Number，Boolean，Null，Undefined，Symbol
  • 引用数据类型：Object，Array，Function

怎么判断一个数组

  • Array.prototype.isPrototypeOf()
  • instanceof
  • Object.prototype.toString.call()
  • Array.isArray()

let const var的区别

  • var是ES5提出的，let和const是ES6提出的
  • const声明的是常量，一旦声明必须赋值,不能使用null占位，声明后不能再修改，如果声明的是引用数据类型，可以修改其属性
  • let和var声明的是变量，声明之后可以更改，声明时可以不赋值
  • var允许重复声明变量，后一个变量会覆盖前一个变量。let和const在同一作用域不允许重复声明变量，会报错
  • var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined
  • let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错
  • var不存在块级作用域，var是函数作用域。let和const存在块级作用域
  • ES5中作用域有：全局作用域、函数作用域。没有块作用域的概念

es6的新特性

  • 新增let和const关键字
  • 新增基本数据类型symbol，用于表示一个独一无二的值，不能与其他数据类型进行运算
  • 模板字符串
  • 字符串新方法
    • includes()判断字符串是否包含参数字符串，返回boolean值
    • startsWith() / endsWith()，判断字符串是否以参数字符串开头或结尾。返回boolean值。这两个方法可以有第二个参数，一个数字，表示开始查找的位置
    • repeat()方法按指定次数返回一个新的字符串
    • padStart()/padEnd()，用参数字符串按给定长度从前面或后面补全字符串，返回新字符串
  • 解构表达式：解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。字符串、以及ES6新增的Map和Set 都可以使用解构表达式
  • 对象方面
    • Map：Map对象用于保存键值对，任何值JavaScript支持的值都可以作为一个键（key）或者一个值（value），与对象不同的是
      • object的键只能是字符串或ES6的symbol值，而Map可以是任何值
      • Map对象有一个size属性，存储了键值对的个数，而object对象没有类似属性
    • Set：Set对象和Map对象类似，但它存储不是键值对。类似数组，但它的每个元素都是唯一的
  • 数组的新方法
    • Array.from()是内置对象Array的方法，实例数组不能调用
    • ncludes() 参数：数值，返回boolean值
    • map()、filter() 参数：函数，返回值：数组
    • forEach() 参数：函数，返回值：undefined
    • find() 参数：函数，返回值：数值
    • some()、every() 参数：函数， 返回值：boolean
  • object的新方法
    • Object.is()方法用来判断两个值是否为同一个值，返回boolean
    • Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象，并返回目标对象，对象合并
    • Object.keys() 返回对象所有属性（数组）
    • Object.values() 返回对象所有属性值（数组）
    • Object.entries() 返回多个数组，每个数组是 key–value（数组）
  • 箭头函数：箭头函数内部没有arguments，也没有prototype属性，所以不能用new关键字调用箭头函数
  • class（类）：class 作为对象的模板被引入ES6，你可以通过 class 关键字定义类。class 的本质依然是一个函数，类的继承通过extends关键字实现。，子类必须在constructor中调用super()
  • promise和proxy

箭头函数和普通函数的区别

  • 箭头函数相对于普通函数更为简洁
  • 箭头函数没有自己的this，内部this永远指向其父级对象的this
  • 箭头函数不能绑定arguments，取而代之使用的是rest参数解决
  • 箭头函数结合call(),apply()方法调用一个函数时，只传入一个参数对this没有影响
  • 箭头函数都是匿名函数
  • 箭头函数不能用于构造函数，不能使用new
  • 箭头函数没有prototype

map和object的区别

  • 键的类型
    • Object 的键类型必须是String或者Symbol，如果是非String类型，会进行数据类型转换
    • Map的键可以是任意类型，包括对象，数组，函数等，不会进行类型转换。在添加键值对时，会通过严格相等（===）来判断键的属性是否已存在
  • 键的顺序
    • Object中key是无序的，不会按照添加的顺序返回
    • Map的可以是有序的，按照插入的顺序进行返回
  • 键值对的size
    • Object 只能通过Object.keys()方法或者通过for…in循环统计
    • Map 直接通过size属性访问
  • 键值对的访问
    • Object：添加或修改、访问属性，通过点或者中括号的形式，删除属性通过delete关键字
    • Map有相对应api
  • 迭代器
    • Object 本身不具备Iterator特性，默认情况下不能使用for…of进行遍历
    • Map结构的keys(),values(),entries()方法返回值都具有Iterator特性
  • Object类型是可以通过JSON.stringify()进行序列化操作的，Map结构可以转化为JSON,但是无法通过parse解析回去

什么是跨域，怎么解决

  • 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制
  • 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域
  1. 通过jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域资源共享（CORS）
  7. nginx代理跨域
  8. nodejs中间件代理跨域
  9. WebSocket协议跨域

什么是跨域资源共享（CORS）

  • CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）
  • 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制
  • 普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置
    目前，所有浏览器都支持该功能，CORS也已经成为主流的跨域解决方案

JSONP 和 CORS 比较

JSONP 只能实现 GET 请求，而 CORS 支持所有类型的 HTTP 请求。使用 CORS ，开发者可以是使用普通的 XMLHttpRequest 发起请求和获取数据，比起 JSONP 有更好的错误处理。虽然绝大多数现代的浏览器都已经支持 CORS，但是 CORS 的兼容性比不上 JSONP，一些比较老的浏览器只支持 JSONP

什么是虚拟节点

虚拟dom是一个普通对象，它是描述真实dom的js对象，它至少会包含tag属性(描述当前节点是一个什么元素)，VNodeData属性(描述当前节点有哪些属性)，VNodeChildren属性(描述当前节点有哪些子节点，特殊子节点为innerTest)
虚拟dom可以使用render方法的形参createElement方法来创建得到

获取dom的几种方式

  • 通过id获取： document.getElementById(“”) （返回对象本身）
  • 通过class获取：document.getElementsByClassName(“”)
  • 通过标签名获取：document.getElementsByTagName(“”)
  • 通过name属性获取：document.getElementsByName(“”)
  • 通过querySelector获取：document.querySelector(“”)（返回对象本身）
  • 通过querySelectorAll获取：document.querySelectorAll(“”)

什么是闭包？有什么作用

闭包就是能够读取其他函数内部变量的函数

  • 优点：
    • 保证函数不受外界干扰，实现封装，避免命名冲突
    • 可以在内存中保存函数变量，充当缓存
  • 缺点
    • 内存消耗很大，容易造成内存泄漏

作用

  1. 可以从外部读取函数内部的变量
  2. 让这些变量始终保持在内存中
  3. 封装对象的私有属性和私有方法
    如：节流函数

什么是原型链？

原型链，简单理解就是原型组成的链。当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链

浅谈一下深浅拷贝，说一说怎么实现

  • 浅拷贝和深拷贝都只针对于引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存
let obj1 = {
    name: "ding"
}

let obj2 = obj1;
 
obj2.name = "bai";
 
console.log(obj1.name); // bai

let a = {
  age: 1,
  name: { asd: "123" }
};
let b = Object.assign({}, a); //第一级为深拷贝
b.age = 2;
b.name.asd = "456";
console.log(a.age, a.name.asd); //1 ‘456’

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 深拷贝实现的是真正意义上的对象的拷贝。深拷贝会创造一个一模一样的对象，其内容地址是自助分配的，拷贝结束之后，内存中的值完全相同，但是内存地址是不一样的，目标对象跟源对象不共享内存，修改任何一方的值，不会对另外一方造成影响
    • 可以通过JSON.parse(JSON.stringify(object))实现深拷贝：
var arr = {
  name: "aaa",
  other: {
    name: "bbb"
  }
};
var arr2 = JSON.parse(JSON.stringify(arr));
arr2.name = "AAA";
arr2.other.name = "BBB";
console.log(arr);   // { name: 'aaa', other: { name: 'bbb' } }
console.log(arr2);  // { name: 'AAA', other: { name: 'BBB' } }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

VUE2/3

vue-loader是什么，使用它的用途有哪些

解析和转换.vue文件。提取出其中的 script,style,HTML 以及template，再分别把他们交给对应的loader去处理，转换成js模块

vue为什么使用key

  • 为了优化性能因为vue使用的是虚拟DOM，更新DOM时用diff算法对节点进行一 一对比，因此加上key来作为唯一标识
  • 没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项的改变，而是简单复用原来位置的每个元素。如果删除第一个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉
  • 尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的

vue中watch和watchEffect的区别

  • watch
    • watch显式指定依赖数据，依赖数据更新时执行回调函数
    • 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行）
    • 监视ref定义的响应式数据时可以获取到原值
    • 既要指明监视的属性，也要指明监视的回调
  • watchEffect
    • watchEffect自动收集依赖数据，依赖数据更新时重新执行自身
    • 立即执行，没有惰性，页面的首次加载就会执行
    • 无法获取到原值，只能得到变化后的值
    • 不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性

Watch 和 Computed 的区别

  • computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。（多对一，多个数据影响一个）

  • watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。（一对多，一个数据发生变化，执行相应操作会影响多个数据）

vue2和vue3的双向绑定原理

vue2

  • vue2的双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过object.defineProperty来劫持各个属性的setter，getter，在数据变化时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图变化，视图变化，数据也随之发生变化。
  • 缺点：深度监听需要一次性递归（性能消耗大），无法监听对象新增和删除的属性

vue3

  • VUE3通过 Proxy 来劫持数据，当数据发⽣变化时发出通知
  • 优点：
    • 直接监听对象⽽⾮属性
    • 直接监听数组的变化
    • 拦截⽅式较多（有 13 种⽅式）
    • Proxy 返回⼀个新对象，可以只操作新对象达到⽬的，⽽ Object.defineProperty 只能遍历对象属性
      直接修改（需要⽤深拷⻉进⾏修改）
    • Proxy 作为新标准将受到浏览器⼚商重点持续的性能优化
  • 缺点：兼容性的问题，ES6 的新语法兼容性不好，最主要就是 proxy 不能⽤ polyfill 来兼容（polyfill 主要抚平不同浏览器之间对 js 实现的差异）

vue中路由的原理

实现方式：利用 URL中的 location.hash或者HTML5新增的window.history
hash 可以改变 url ，但是不会触发页面重新加载（hash的改变是记录在 window.history 中），即不会刷新页面。也就是说，所有页面的跳转都是在客户端进行操作
hash 通过 window.onhashchange 的方式，来监听 hash 的改变，来进行组件渲染
history 通过 onpopstate 事件，监听 history 的变化，然后渲染自己要渲染的组件，达到路由的效果

vue中路由的模式有几种

三种，hash模式、history模式和abstract 路由模式
hash模式
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号，有一点点丑。这是最安全的模式，因为他兼容所有的浏览器和服务器
history模式
美化后的hash模式，会去掉路径中的 “#”。依赖于Html5 的history，pushState API,所以要担心IE9以及一下的版本，感觉不用担心。并且还包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作
abstract 模式
abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式

vue中组件通讯的方式

vue2/vue3中v-model的实现方式

  • vue2
    • v-model 默认绑定的属性名 value， 默认绑定的事件名为 input 事件
    • 如果想要更改 prop属性或事件名称，则需要在 子组件中添加 model 选项
    • 使用.sync修饰符实现v-model，变量名.sync 子组件通过update:变量名来更新
  • vue3
    • Vue3移除了model选项和sync修饰符实现v-model
    • 默认绑定的属性名为：modelValue， 默认绑定的事件名为：update:modelValue
    • 支持使用多个v-model实现方式：v-model:变量名 子组件更新使用update关键字进行更新
本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/983778
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号