vue中的生命周期钩子有哪些
beforeCreate:
在实例初始化之后,数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。
在此阶段,实例的属性和方法还未初始化。
created:
在实例创建完成后被立即调用。
可以访问实例的属性和方法,但无法访问到 DOM 元素。
beforeMount:
在挂载开始之前被调用。
在此阶段,模板编译完成,但尚未将编译结果挂载到 DOM 中。
mounted:
在挂载完成后被调用。
可以访问到挂载的 DOM 元素,可以进行 DOM 操作。
beforeUpdate:
在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。
在此阶段,可以对更新前的状态进行修改。
updated:
在数据更新之后被调用,发生在虚拟 DOM 重新渲染和打补丁之后。
可以进行 DOM 操作,但要避免无限循环的更新。
beforeDestroy:
在实例销毁之前调用。
在此阶段,实例仍然完全可用。
destroyed:
在实例销毁之后调用。
所有的事件监听器会被移除,所有的子实例也会被销毁。
面试题:react、vue中的key有什么作用?(key的内部原理)
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!
②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM,随后渲染到到页面。
3. 用index作为key可能会引发的问题:
1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM:
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,
使用index作为key是没有问题的。
模块化发展历程
可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、
模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。
IIFE:使用自执行函数来编写模块化,特点:在一个单独的函数作用域中执行代码,避免变量冲突。
AMD:使用 requireJS 来编写模块化,特点:依赖必须提前声明好。
CMD:使用 seaJS 来编写模块化,特点:支持动态引入依赖文件。
CommonJS:nodejs 中自带的模块化。
UMD:兼容 AMD,CommonJS 模块化语法。
webpack(require.ensure):webpack 2.x 版本中的代码分割。
ES Modules:ES6 引入的模块化,支持 import 来引入另一个 js 。
Cookie、sessionStorage、localStorage 的区别
共同点:都是保存在浏览器端,并且是同源的
Cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。(key:可以在浏览器和服务器端来回传递,存储容量小,只有大约4K左右)
sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持,localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。(key:本身就是一个回话过程,关闭浏览器后消失,session为一个回话,当页面不同即使是同一页面打开两次,也被视为同一次回话)
localStorage:localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。(key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效)
link 与 @import 的区别
link是 HTML 方式, @import是 CSS 方式
link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前,可以在 css 文件中引用其他文件
总体来说:link 优于@import
router和route有什么区别
Router(路由器):路由器是一种网络设备,用于在计算机网络中转发数据包。它连接多个网络,并根据目标地址来确定数据包的最佳路径,以便将其从源网络发送到目标网络。路由器通常用于在互联网中转发数据。
Route(路由):路由是指在网络中定义的路径,用于将数据包从源地址发送到目标地址。路由是由网络管理员配置的,它指定了数据包在网络中的传输路径。路由可以基于不同的因素进行选择,例如最短路径、最快路径或特定的网络策略。
Vue 的双向数据绑定的原理
Vue 的双向数据绑定是通过使用 Object.defineProperty() 方法来实现的。
当 Vue 实例化时,Vue 会遍历 data 对象中的属性,并使用 Object.defineProperty() 将每个属性转换为 getter 和 setter。这样,当数据属性被读取或修改时,Vue 就能够捕获到,并触发相应的更新。
具体的实现步骤如下:
Vue 遍历 data 对象中的属性。
对于每个属性,Vue 使用 Object.defineProperty() 将其转换为 getter 和 setter。
在 getter 中,Vue 将属性的值返回给调用者,并进行依赖收集。这意味着 Vue 会追踪每个属性的依赖关系,以便在属性发生变化时,能够通知相关的组件进行更新。
在 setter 中,Vue 接收到属性的新值,并将其存储起来。然后,Vue 会触发相应的更新,通知相关的组件进行重新渲染。
通过这种方式,Vue 实现了双向数据绑定。当数据发生变化时,视图会自动更新;当用户与视图进行交互时,数据也会自动更新。
css定位有哪几种
静态定位(Static Positioning):
默认的定位方式。
元素按照文档流正常排列,不受其他定位方式的影响。
使用 position: static; 来指定静态定位。
相对定位(Relative Positioning):
相对于元素自身在文档流中的位置进行定位。
元素仍然占据原来的空间,不会影响其他元素的位置。
使用 position: relative; 来指定相对定位,并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。
绝对定位(Absolute Positioning):
相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的初始包含块(通常是 元素)进行定位。
元素脱离文档流,不占据空间,可以覆盖其他元素。
使用 position: absolute; 来指定绝对定位,并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。
固定定位(Fixed Positioning):
相对于浏览器窗口进行定位,固定在屏幕上的位置不变。
元素脱离文档流,不占据空间,始终可见。
使用 position: fixed; 来指定固定定位,并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。
js 中 BOM和DOM的区别
BOM是浏览器对象模型,它提供了一组对象和方法,用于操作浏览器窗口和浏览器本身的属性。BOM包括了window对象,它代表浏览器窗口,提供了许多方法和属性,如alert()、setTimeout()、location等。
DOM是文档对象模型,它提供了一组对象和方法,用于操作HTML或XML文档的内容和结构。DOM可以将HTML或XML文档表示为一个树状结构,每个节点都是一个对象,可以通过DOM API来访问和修改这些节点。DOM提供了一系列的方法和属性,如getElementById()、appendChild()、innerHTML等。
BOM是用来操作浏览器窗口和浏览器本身的属性,而DOM是用来操作文档结构和内容的。
BOM提供了一些与浏览器交互的方法和属性,如弹窗、重定向等,而DOM提供了一些用于操作HTML或XML文档的方法和属性,如获取元素、修改内容等。
BOM是浏览器厂商根据W3C标准之外的补充,不同浏览器实现可能有差异,而DOM是W3C标准定义的,不同浏览器实现应该保持一致性。
总的来说,BOM是操作浏览器窗口和浏览器本身的属性,而DOM是操作HTML或XML文档的内容和结构。
什么是防抖 什么是节流
防抖:
防抖是指在事件触发后,等待一段时间后再执行回调函数。如果在等待时间内又发生了相同的事件,那么就会重新计时。防抖的主要目的是减少函数的执行次数,尤其是在频繁触发事件的情况下,可以避免函数多次执行。常见的应用场景包括输入框的搜索建议、窗口大小改变的回调等。
例如,当用户在输入框中输入关键字时,可以使用防抖来减少发送请求的次数,只有在用户停止输入一段时间后才发送请求。
节流:
节流是指在一段时间内只执行一次回调函数。即使在这段时间内发生了多次事件,也只会执行一次回调函数。节流的主要目的是控制函数的执行频率,尤其是在高频率触发事件的情况下,可以限制函数的执行次数。常见的应用场景包括滚动事件、鼠标移动事件等。
例如,当用户滚动页面时,可以使用节流来限制触发回调函数的次数,避免频繁执行导致性能问题
vue中事件的修饰符有哪些
.stop:阻止事件冒泡。
.prevent:阻止事件的默认行为。
.capture:使用事件捕获模式,即在父组件上监听事件,而不是在子组件上。
.self:只有当事件是由当前元素本身触发时才触发事件处理函数,不包括子元素。
.once:事件只触发一次,之后自动移除事件监听器。
.passive:指示浏览器在滚动事件上不需要执行preventDefault(),可以提升滚动性能。
.native:监听组件根元素的原生事件,而不是组件自身触发的事件。
.keyCode:只当事件是从特定键触发时才触发事件处理函数。
.exact:要求精确匹配修饰符。
.left:只当点击鼠标左键时才触发事件处理函数。
.right:只当点击鼠标右键时才触发事件处理函数。
.middle:只当点击鼠标中键时才触发事件处理函数。
GET POST请求方式什么区别?
数据传输位置:GET请求将数据附加在URL的查询参数中,而POST请求将数据包含在请求体中。
数据传输安全性:GET请求的数据暴露在URL中,因此不适合传输敏感信息。POST请求的数据在请求体中,相对更安全。
数据传输长度限制:GET请求的URL长度有限制,不同浏览器限制不同,通常为2048个字符。POST请求的数据没有长度限制。
数据传输语义:GET请求用于获取资源,不应该有副作用,即对服务器数据没有修改的操作。POST请求用于提交数据,可能对服务器数据进行修改。
请求可缓存性:GET请求默认可以被缓存,而POST请求默认不会被缓存。
请求使用场景:GET请求适合获取数据,如获取网页内容、查询数据等。POST请求适合提交数据,如提交表单、上传文件等。