面试题有的没答案,会的补一下

于 2021-08-20 14:46:09 发布
阅读量219 收藏
点赞数 1
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxn_zyl/article/details/119822107
版权

数组迭代方法map、filter、forEach，有哪些相同点和不同点?

map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

map():也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果；

forEach()：对数组中的每一项运行给定函数，这个方法并没有返回值 ;

Filter():方法是对原数组进行过滤筛选，返回一个新的数组

filter():不会对空数组进行检测（如果对空数组进行筛选，返回值位undefined）

 如何实现对象合并？

扩展运算符，Object.assign

对象解构和数组解构的不同点？

对象通过属性名，数组通过位置。

箭头函数和function函数区别？

箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

不可以使用yield命令，因此箭头函数不能用作Generator函数。

不能改变this  不能使用new,arguments,yield

 jq事件中的on有哪些作用？

答：绑定事件，事件委托，传递数据，注册自定义事件，绑定多个事件

 跨域方式有哪些？

1.使用cors ,  2.使用ajax的jsonp ,  3.使用jQuery的jsonp插件

 Jsonp原理是什么？

就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址,并提供一个回调函数来接收数据

 Ajax步骤？

　　(1) 创建一个XMLHttpRequest异步对象

　　(2) 设置请求方式和请求地址

　　(3)用send发送请求

　　(4)监听状态变化

　　(5)接收返回的数据

        创->设->发->监->接

instanceof作用是什么？

测试一个对象是否为一个类的实例

call、apply、bind的区别？

都可以改变this执行，call和apply立即执行，call传序列参数，apply传递数组或类数组；bind需要调用才能执行，传序列参数

什么是异步？

js从上到下执行主进程的语句，遇到事件、setTimeout、setInterval、ajax等语句时，将其执行的内容分支到任务进程，当主进程执行完毕之后，将任务进程纳入主进程继续执行，这些任务进程中的语句就是异步。

客户端不需要等待服务器的响应，在服务器处理请求的过程中，客户端可以进行其他操作。

如何把异步变成同步？

async await        promise.all

手写一个防抖函数？

// 非立即执行版
function debounce(func, wait) {
    let timer;
    return function() {
      let context = this; // 注意 this 指向
      let args = arguments; // arguments中存着e
         
      if (timer) clearTimeout(timer);
 
      timer = setTimeout(() => {
        func.apply(this, args)
      }, wait)
    }
}

content.onmousemove = debounce(count,1000);

Redux工作流程？

  • View在redux中会派发action方法
  • action通过store的dispatch方法会派发给store
  • store接收action，连同之前的state，一起传递给reducer
  • reducer返回新的数据给store
  • store去改变自己的state

React组件通信方式？

  • 组件向子组件通信
  • 子组件向父组件通信
  • 中间组件层层传递 props
  • 使用 context 对象

React路由传参方式？

1.params;        2.query;        3.state

DOM的鼠标事件:

onload :页面加载时触发

onclick :鼠标点击时触发

onmouseover :鼠标滑过时触发

onmouseout :鼠标离开时触发

onfocus :获得焦点时触发 ,事件用于：
input标签type为text、password; textarea;

onblur :失去焦点时触发

onchange：域的内容改变时发生，一般作用于select或checkbox或radio

onsubmit:表单中的确认按钮被点击时发生：不是加在按钮上，而是在表单上（from）。

onmousedown : 鼠标按钮在元素上按下时触发.

onmousemove :在鼠标指针移动时发生

onmouseup :在元素上松开鼠标按钮时触发

键盘事件:

onkeydown(键盘按下)

onkeyup(键盘抬起)

onkeypress(按键事件)

表单事件:

onfocus(获得焦点)

onblur（失去焦点）

浏览器事件
window事件 ：

onload（加载完成事件）
onerror（报错事件）
onresize :当调整浏览器窗口的大小时触发
onscroll :(滑动事件)拖动滚动条滚动时触发

元素的横坐标：e.pageX || e.clientX;
元素的纵坐标：e.pageY || e.clientY;

获取鼠标移动是Body的坐标:

document.body.onmousemove = function (e) {
   var pageX = e.pageX || e.clientX;
   var pageY = e.pageY || e.clientY;
   console.log(pageX,pageY);
}

js里面的this:

  1. this–可以指代当前事件的执行对象
  2. .this–函数里面的this对象指代当前的window对象

Js事件的冒泡：

给子元素和父元素添加同样的事件，会发生事件冒泡
处理方法：给子元素添加（开发中常用）
法1：e.stopPropagation ();//阻止事件冒泡；用于JS
法2：e.preventDefault ();//阻止默认事件；
法3： return false;//阻止冒泡，用于JQ;

# 2.  列举出获取页面元素的方式，写明其含义，参数，返回值


    document.getElementsByTagName

    document.getElementsByName

    document.getElementsByClassName

    document.getElementById

    document.querySelectAll('')

    document.querySelect('')

# 3.  如何获取body元素和html元素？

    //获取body元素

    var bodyEle= document.body;

    //获取html标签

    var htmlEle=document.documentElement;

# 4.  事件三要素是什么？

1.事件源         2.事件类型         3.事件处理程序

# 5.  执行事件的步骤

1. 获取 事件源         2.注册 事件         3.添加 事件 处理程序

# 7.  js中如何利用 DOM 操作元素来改变元素里面的内容？二者区别是？

   dom.innerText = '内容'

   dom.innerHTML = '内容'

   text只能改变文本,html还能改变标签

# 8.  通过js修改元素属性的两种方式是什么？

    dom.setAttribute('type','值')

    dom.removeAttribute('type')

# 9.  js如何设置属性？（内置属性和自定义属性）

设置属性 .setAttribute("属性","值")

<img src="a.jpg">
var img = ...
img.src = 'b.png';

# 10.  js如何获取属性？（内置属性和自定义属性）

获取属性 .getAttribute("属性")

<img src="a.jpg">
var img = ...
console.log(img.src)

# 11.  如何移除属性？

 dom.removeAttribute(name)

# 12.  H5提供的自定义属性如何设置和获取？

    

# 13.  如何获取父级节点？

 dom.parentNode

# 14.  如何获取父级元素？

   dom.parentElement

# 15.  如何获取子级节点？

    dom.childNodes

# 16.  如何获取子级元素？

    dom.children

# 17.  如何获取第一个子级节点？

    Element.firstChild

# 18.  如何获取最后一个子级节点？

    dom..lastChild

# 19.  如何获取第一个子级元素？

    dom.firstElementChild;

# 20.  如何获取最后一个子级元素？

    dom.lastElementChild

# 1. Vuex的工作流程（说明修改store中的数据分别为同步和异步的情况）

Vue组件（action里面的dispatch )--> actions(commit方法） -->mutations（Mutate）--> state（getter） -->store更新所有调用vuex的组件（Vue Component组件）

# 2. 闭包是什么？有什么特性？

## 什么是闭包:

闭包是指有权访问另一个函数作用域中的变量的函数

## 闭包的特性：

①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；

②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在 

# 3. 什么是事件轮询？

  事件轮询 (eventloop) 是"一个解决和处理外部事件时将它们转换为回调函数的调用的实体(entity)" 

# 4. Js延迟加载的方式？

   1.defer属性  <script src="file.js" defer> </script>

   2.async属性  <script src="file.js" async> </script>

   3.动态创建DOM方式

   4.使用Jquery的getScript()方法

   5.使用setTimeout延迟方法的加载时间

# 5. 重绘和重排的区别？

1>重排(Reflow)：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

2>重绘(Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等

# 7. new 操作符具体干了什么？

1.生成一个空的对象并将其作为 this；

2.将空对象的 proto 指向构造函数的 prototype；

3.运行该构造函数；

4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型，则返回this；如果 return 一个引用类型，则返回这个引用类型。

# 8. v-for中的key作用是？

1. 用v-for，需要给元素加上一个key属性

2. key用来提高渲染性能

3. key可以避免数据混乱的情况出现 

# 10. 谈谈vue-Router的原理

原理核心就是 更新视图但不重新请求页面。

vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪一种方式。

# 11. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载

a. 图片懒加载，滚动到相应位置才加载图片。

b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。

d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

# 12. display:none与visibility:hidden的区别是什么？

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。    

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

# 13. CSS中link和@import的区别是?

link元素 

HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另 外形式的信息（RSS）、联系信息等等。  

@import 

指定导入的外部样式表及目标设备类型。 

其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签,  link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。

# 14. 组件间的通信方式有哪些？越多越好

1. props和$emit

2.$attrs和$listeners

3.中央事件总线

4. provide和inject

5. v-model

6. $parent和$children

7.vuex处理组件之间的数据交互

# 15. 路由钩子函数 (组件内的守卫) 导航钩子有哪些？作用分别是？

全局守卫
router.beforeEach：全局前置守卫，进入路由之前
router.beforeResolve：全局解析守卫，在beforeRouteEnter调用之后调用
router.afterEach：全局后置钩子，进入路由之后
路由组件内的守卫
beforeRouteEnter()：进入路由前
beforeRouteUpdate()：路由复用同一个组件时
beforeRouteLeave()：离开当前路由时

# 17. keep-alive的作用是什么？

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

# 18. 小程序中如何修改数据？（同步和异步方式）

Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

# 19. 小程序向事件对象传参的方式？

//wxml:
<view bindtap="passQuery" data-index="1">点击事件传参</view>

//js中：
 passQuery: function(e){
      // 传递的参数
      let query = e.currentTarget.dataset['index'];
 }

# 20. 小程序中自定义组件的使用方式？

1、打开项目文件目录，新建一个compoments目录

2、在compoments目录里，新建一个组件名

3、右键单击选择新建compoment

4、在自定义组件（prolist）里完成逻辑代码


5、在要引用组件的页面中的json文件中，注册组件

6、在页面的wxml中就可以使用prolist组件

7、在组件（prolist）中接收传过来的值

8、接收的值可以在组件的wxml文件中直接使用

# 21. 小程序的生命周期有哪些？分别是什么时候执行？

1.onload 监听页面加载
2.onReady 监听页面初始化完成
3.onShow 监听页面显示
4.onHide 监听页面的隐藏
5.onunload 监听页面的卸载
6.onpullDownRefresh 监听用户下拉动作
7.onReachBottom 页面上拉触发的事件

# 22. 小程序中路由跳转的方式有哪些？ 区别是？

wx.navigateTo({})

wx.switchTab({})

<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

# 23. 小程序本地存储的方式有哪些？

同步:
wx.setStorageSync();  //存储值
wx.removeStorageSync();   // 移除指定的值
wx.getStorageSync();  // 获取值
wx.getStorageInfoSync();  // 获取当前 storage 中所有的 key
wx.clearStorageSync();  // 清除所有的key
异步:
wx.setStorage();  //存储值
wx.removeStorage();   // 移除指定的值
wx.getStorage();  // 获取值
wx.getStorageInfo();  // 获取当前 storage 中所有的 key
wx.clearStorage();  // 清除所有的key

请说出三种减低页面加载时间的方法

1.尽量减少页面中重复的HTTP请求数量

2.服务器开启gzip压缩

3. css样式的定义放置在文件头部

4. Javascript脚本放在文件末尾

5.压缩合并Javascript、CSS代码

6.使用多域名负载网页内的多个文件、图片

如何让一个div不设置宽高，水平垂直居中？写4种

1、利用弹性布局，这是我认为最简单的且容易理解的方法

2、利用css3和定位的方法

3，利用css

描述下拉加载的开发思路？

        1.只要上拉, 触发 上拉加载的方法,就让page页+1;  然后调用接口 将页码传过去,拿到数据 追加到 数组中,刷新数据

      2.只要下拉刷新,就让 让 page=1, 请求接口将page传递到后台,拿到数据后,首先将之前存储数据的数组清空,清空,清空,然后再把数据添加带该数组中,刷新数据.   

2>"11"与"2">"11"的结果相同吗

不同

其他数据类型转换成布尔值是false的值都有哪些？

undefined        ull        0        NaN        ""

localStorage的方法有哪些（要求写方法的参数），localStorage一个域下最多存储多少数据？

localStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，如果不是人为清除，那么即使是关闭浏览器也会一直存在。

sessionStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，会话级存储，也就是说如果关闭当前页面或者浏览器那么就会清除

cookie:客户端存储，参与服务器通信，存储大小为4k,可设置生命周期，在设置的生命周期内有效

如何解决循环绑定事件中不能获取索引的问题？

第一种方法【闭包】:

    var lis=document.getElementsByTagName('li');
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(i){
            return function(){
                console.log(i)
            }
        }(i)
    }


第二种方法【赋值】:

    var lis=document.getElementsByTagName('li');
    console.log(lis);
    for(var i=0;i<lis.length;i++){
        let n = i;
        lis[i].onclick=function(){
            console.log(n)
        }
    }
    var lis=document.getElementsByTagName('li');
    console.log(lis);
    for(var i=0;i<lis.length;i++){
        lis[i].n = i
        lis[i].onclick=function(){
            console.log(this.n)
        }
    }

为什么consol.log(0.1+0.2==0.3);//false

在JavaScript中的二进制的浮点数0.1和0.2并不是十分精确，在他们相加的结果并非正好等于0.3，而是一个比较接近的数字 0.30000000000000004 ，所以条件判断结果为false。

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：

　　 ①当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器 都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地 址。

　　②浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同 步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后 服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

　　③一旦TCP/IP连接建立，浏览器会 通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP 响应状态表示一个正确的响应。

　　④此时，Web服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块，简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成 CSS Rule Tree，而javascript又可以根据DOM API操作DOM。

前端性能优化方式？分别从页面方面和服务器方面描述

网络优化

  1. 减少 http 请求数，css，js, image 等文件压缩合并，合理设置 http 请求缓存。
  2. 样式放头部，脚本放底部。
  3. 使用 CDN。
  4. 按需加载，显示进度条或者 loading

css优化

  1. 避免使用 CSS 表达式
  2. 尽可能减少CSS选择器的层级
  3. 减少 TABLE 布局
  4. 移除空的样式
  5. 图片在加载前提前指定宽高或者脱离文档流，可避免加载后的重新计算导致的页面回流；

JS优化

  1. 减少闭包的使用。过多使用闭包会产生很多不销毁的内存，内存过多会导致内存溢出。
  2. 避免使用iframe, iframe 会嵌入其它页面，父页面渲染的时候，同时渲染子页面，渲染进度会变慢。
  3. 减少 dom 操作，减少页面重绘和重排。使用 css3 动画
  4. 尽可能使用事件委托。事件委托可以给动态元素绑定事件，而且基于事件委托实现，整体性能会比一个一个绑定事件高50%。
  5. 注意防抖和节流

图片优化：

  1. 不用图片，尽量用 css3 代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用 CSS 达成。
  2. 使用矢量图 SVG 替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持 SVG 了，所以可放心使用！
  3. 使用恰当的图片格式。我们常见的图片格式有 JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于 JPEG。而修饰图片通常更适合用无损压缩的 PNG。GIF 基本上除了 GIF 动画外不要使用。且动画的话，也更建议用 video 元素和视频格式，或用 SVG 动画取代。
  4. 按照 HTTP 协议设置合理的缓存。
  5. 使用字体图标 webfont、CSS Sprites 等。
  6. 用 CSS 或 JavaScript 实现预加载。WebP 图片格式能给前端带来的优化。
  7. WebP 支持无损、有损压缩，动态、静态图片，压缩比率优于 GIF、JPEG、JPEG2000、PG 等格式，非常适合用于网络等图片传输。

图片懒加载与预加载:

图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 data-src 里面，等某些事件触发的时候(比如滚动到底部，点击加载图片)再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载

图片预加载，是指在一些需要展示大量图片的网站，实现图片的提前加载。从而提升用户体验。常用的方式有两种，一种是隐藏在 css 的 background 的 url 属性里面，一种是通过 javascript 的 Image 对象设置实例对象的 src 属性实现图片的预加载。相关代码如下：

图片转为base64格式:

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址;

  1. 提升性能: 网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少https请求。

  2. 加密: 让用户一眼看不出图片内容 , 只能看到编码。

  3. 方便引用: 在多个文件同时使用某些图片时, 可以把图片转为base64格式的文件, 把样式放在全局中, 比如common.css, 以后在用的时候就可以直接加类名, 二不需要多层找文件路径, 会提升效率

computed 和 watch 的差异？

计算属性computed : 

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

1. 不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4. 当一个属性发生变化时，需要执行对应的操作；一对多；

5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

　　immediate：组件加载立即触发回调函数执行，

　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

React 组件的几种写法？分别是什么，并说出他们的区别？类组件中的state与setState如何在函数组件中使用hooks如何表现？

函数定义与类定义组件 Function & Class

const [count, setCount ] = useState(0)；

数组降维的方式写两种

1、数组字符串化   arr.split(',')

2、递归

3、Array​​.flat()

本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

cookies：服务器和客户端都可以访问：大小只有4kb左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可以访问数据，服务器不能访问本地存储直到故意通过post或get的通道发送到服务器；每个域5MB；没有过期数据，它将保留直到用户从浏览器清除或者使用JavaScript代码移除。

原型、构造函数、实例三者关系:

实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。 

 npm下载vue:

//先检查
vue -V
//有
vue create name
//无
npm i vue

  1. 描述箭头函数的特点。

没有自己的this

不存在arguments对象

没有prototype属性

不可以使用yield命令

  1. 列举数组的迭代方法。

列举数组的迭代方法。

filter()方法

some()方法

map()方法 

reduce()方法

如何将‘100px’转换为100的number值？

let str = '100px'

let px = str.slice(0,str.length-2)

Number(px)

jq对象转DOM对象？

//方法一
var $cr=$("#cr");  //jq对象
var cr = $cr[0];  //jq 转dom
//方法二
var cr=$("#cr");  //jq对象
var cr=$cr.get(0); //jq转dom

 什么是同源策略？

协议+域名+端口"三者相同

如何阻止事件冒泡和默认事件？

e.stopPropagation();
e.preventDefault();

什么是jsx？

 jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力

什么是虚拟dom？ 

用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。

Diff算法的计算过程~~

Vue中计算属性和监听器的不同点？

computed可以观察多个数据，watch只能是一个数据
computed生成一个新的数据，直接渲染至视图中，watch是修改本身已经存在的数据
computed不可以执行异步的，因为需要返回值，返回值是由js主线程控制，watch可以执行异步的，因为不需要返回数据，定时器是属于异步的线程

React中的类组件与函数组件不同点？

类组件内部拥有状态 state，函数组件无法拥有状态 state，现在在 react16.8 的版本可以用 react hook 解决

类组件通过继承成新的类，函数组件通过高阶组件返回新组件

React里的hook有哪些？分别做什么用的？

useState,useEffect,useContext,useRef,useMemo,useCallback,useReducer 

React里的上下文对象语法？ 

```js

//context.js创建共享的上下文对象

const context = React.createContext()

```

```js

//根组件:数据提供者

<Context.Provider value={data}> 

    <MySub />

</Context.Provider>

```

```js

// 数据的使用者:后代组件MySub.jsx

// *Consumer里面必须是一个带返回值的函数

<Context.Consumer>

    {
        (data)=>{
            return <div>

                {...data}

            </div> 

        }

    }

</Context.Consumer>

```

## useContext

使用它可以省略掉Consumer组件,直接获取到Provider提供的数据,但是会配怀性能优化的memo和shouldComponentUpdate

小程序的组成部分？

page.js     //功能类似javascript，为页面添加各种监听事件
page.json   //页面配置，设置tab栏，导航条等东西，是一个json文件
page.wxml   //前端页面，就是html，但语法不太一样
page.wxss   //页面样式，就是css，但语法不太一样

react总结:

react面试题_lxn_zyl的博客-CSDN博客

vue总结：

面试题vue_lxn_zyl的博客-CSDN博客

 

 

lxn_zyl
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值