mz929的博客

如果你需要在本地存储数据的同时实现响应式行为,你可以考虑使用一些支持响应式绑定的前端框架或库,比如,vue.js中提供了vue响应式数据和watch记住,可以与localStorage结合使用,实现数据的自动更新,同样的,在react中,你可以使用状态管理工具等来实现类似的效果。总的来说,本地存储本身并不具备响应式原理,但你可以通过使用支持响应式绑定的前端框架或库,将本地存储的数据与界面关联起来,实现自动更新的效果。

每个部分采用一个线程进行上传或下载,如果碰到网络故障,可以从已经上传或下载的部分开始继续上传下载未完成的部分,而没有必要从头开始上传下载,用户可以节省时间,提高速度。如果中途上传中断过,下次上传的时候根据当前临时文件大小,作为客户端读取文件的偏移量,从此位置继续读取文件数据块,上传到服务器从此偏移量继续写入文件即可。整体思路比较简单,拿到文件,保存文件唯一性标识,切割文件,分段上传,每次上传一段,根据唯一性标识判断文件上传进度,知道文件的全部片段上传完毕。文件上传简单,文件变大就复杂。

先装包,再jest-init初始化配置文件,初始化完了之后会产生一个jest.config.js配置文件,它里面有几乎所有的配置,但是都注释掉了,我们新建一个text文件夹专门用来放单元测试的文件,比如我们要测试某个函数,就要新建一个xxx,text.js文件,然后引入jest对象和需要测试的函数,我们调用jest对象中的text方法,传入一个回调函数,在expect函数中调用需要测试的函数.然后.tobe方法,传入预期的结果,最后调用完就会输出测试结果。jest用起来很简单,也不需要很麻烦的配置,

对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址 根据这个 IP，找到对应的服务器，发起 TCP 的三次握手 建立 TCP 连接后, 发起 HTTP 请求 服务器响应 HTTP 请求，浏览器得到 html 代码 浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等）（先得到 html 代码，才能去找这些资源） 服务器响应对应的资源 响应数据完毕, 四次挥手，关闭 TCP 连接 浏览器对页面进行渲染呈现给用户

旧的选项型API在代码里分割了不同的属性,data,computed属性,methods等等,而vue3组合式api能让我们用方法来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。vue2的双向数据绑定利用es6的一个apiobjectdefinepropert()对数据进行劫持,结合发布订阅者的方式来实现的。3.使用setup()方法来返回我们的响应式数据,从而我们的template可以获取这些响应式数据。2.使用reactive()方法来声明我们的数据为响应式数据。

相比于 MVC，MVVM 强调数据绑定和 ViewModel 的角色，使得视图的更新和数据的处理更加简化和自动化。MVVM 的核心概念是数据绑定，通过建立 ViewModel 与 View 之间的双向数据绑定关系，使得数据的变化能够自动反映在视图上，而不需要显式的 DOM 操作。这种方式可以降低代码的耦合性，提高开发效率。MVVM（Model-View-ViewModel）和 MVC（Model-View-Controller）是两种常见的软件架构模式，用于设计和组织应用程序的结构。

【怎么用】：可以通过 Vue.directive 全局注册一个指令，或者组件内部通过 directives 进行局部注册，它常用的钩子有 inserted，表示被绑定元素插入父节点时调用，还有 update，它表示指令所在组件的 VNode 更新时调用。【场景】：我在实际项目中，用自定义指令处理过图片懒加载，原理就是当图片进入可视区的时候把图片的地址给图片的 src 属性就好啦。【注意】：自定义指令相关的钩子在 Vue3 中发生了变化，主要体现在和组件的生命周期钩子保持了一致，更加容易记忆和理解了。

上：v-bind:一个自定义属性与data中定义的一个变量，然后v-on:一个名为“update:自定义属性”的自定义事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于子组件使用$emit传递过来的值。v-model用在标签上,v-bindLvalue与data中定义的一个变量,然后v-on:input事件,事件处理函数修改属性绑定的data中的变量,是这个变量的值等于当前变迁的value的值。v-model是vue.js提供的一个语法糖,用于在表单元素上创建双向数据绑定。

因此，如果需要在组件创建时进行一些数据初始化的操作，可以使用created钩子函数；如果需要在组件挂载到页面上后进行一些DOM操作或与后端交互的操作，可以使用mounted钩子函数。created是在实例创建完成后立即执行的钩子函数，此时组件的DOM节点还未生成，数据也还未渲染到页面上。mounted是在组件挂载到页面上后执行的钩子函数，此时组件的DOM节点已经生成，数据也已经渲染到页面上。created和mounted都是Vue生命周期钩子函数，但它们的执行时机不同。

Vue中的EventBus是一种事件总线，用于在组件之间进行通信。它的原理是通过创建一个全局的Vue实例作为中央事件总线，其他组件可以通过该实例来订阅和发布事件。这种机制可以实现不同组件之间的解耦，使得组件之间可以方便地进行通信和数据传递。但同时也需要注意避免滥用EventBus，因为过多的全局事件会导致代码维护和调试困难。2.在传递数据的组件中通过。3.在接收数据组件中通过。EventBus的使用。

3.当多个组件引入方法时,其中一个组价里面改变了混入中的某个属性值或者方法内部的操作时,其他组件不会受影响。该组件在使用的时候,混入了mixin里面的方法,在自动执行create生命钩子,执行hello方法。混入是用来分发 Vue 组件中的可复用功能,混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项。1.组件调用了混入的对象,孤儿混入的选项会合并到当前组件中去。2.当混入的对象和组件含有同名选项时,以组件数据优先。对象的选项都将被混入该组件本身的选项中来。

实现原理:nextTick 的核心是利用了如Promise,setTimeout的原生js方法来模拟对应的微/宏任务的实现,本质是为了利用js的这些异步回调任务队列来实现vue框架中自己的异步回调队列。1.在数据变化后执行的某个操作,而这个操作需要使用随数据变化而变化的dom结构的时候,这个操作就需要方法在回调函数中。页面的DOM还未渲染,这个时候也没有办法操作dom,如果想操作dom,需要使用nextTick 来解决这个问题。3.事件循环到了微任务或者宏任务,执行函数一执行,callbacks中的回调。

watch侦听某一数据的变化从而会触发函数,当汇聚为对象类型时,对象中的属性值变化时需要使用深度侦听deep属性,也可在页面第一次加载时使用立即侦听immdiate属性,computed计算属性是触发函数内部任意依赖的变化都会重新执行该函数,计算属性有缓存,多次重复使用计算属性时会从缓存中获取返回值,计算属性必须要有return关键词。watch和computed都是以函数为基础的,它们都是通过监听吱声依赖的数据在变化时触发相关的函数去实现自身数据的变化。

Vue中为v-for提供了一个属性,key,在写v-for的时候,都需要给元素加上一个key属性这个key属性必须是唯一的标识,并且给key赋值的内容不能是可变的。若对数据进行:逆序添加,逆序删除等破坏顺序操作,会产生没有必要的真是dom更新,芮然界面效果没问题,但效率低。2.如果不存在对数据的逆序添加,逆序删除等破坏顺序的操作,知识简单的展示数据,用index也是可以的。3.如果对数据的逆序添加,逆序删除等破坏顺序草错,用index作为key值,效率低。1.提升v-for渲染的效率。

箭头函数是定义函数一种新的方式,他比传统函数function定义更加方便和简单,他没有绑定自己的this指向和伪数组arguments,无法调用super方法生成实例化对象,因为他不是后早函数,一般用来取代匿名函数的写法,最主要的是箭头函数的this指向它的上一级作用域中的this也可以理解为它的this是固定的,而普通函数的this是可变的。箭头函数自身没有this,它的this是父级普通函数的this,在普通函数中,this总是指向调用它的对象,如果用作构造函数,它指向创建的对象实例。

共同点:他们的共同点是都可以修改函数this的指向第一个参数都是this要指向的对象都可以利用后续参数传参他们的区别一个是传参方式不同:call和bind是列表传参,apply是数组或伪数组传参第二个是执行机制不同:call和apply是立即执行,bind不会立即执行而是生成一个修改this之后的新函数apply接收连个参数,第一个参数是this的指向,第二个参数是函数接收的参数,以数组的形式传入改变this指向后原函数会立即执行,且此方法只是临时改变this指向1次当第一个参数为null。

在实际开发中，可以根据项目需求和浏览器兼容性考虑选择使用 Hash 路由还是 History 路由。如果需要兼容性较好且对 SEO 较为重要，可以选择 Hash 路由。如果目标浏览器支持 HTML5 History API，并且希望 URL 更加美观且对 SEO 友好，可以选择 History 路由。同时，也可以使用前端框架（如 Vue Router 或 React Router）来抽象和简化路由的管理和切换过程。Hash 路由和 History 路由是前端路由的两种常见实现方式。

一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。2、父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中。1、以最简单插槽为例：在子组件中放一个占位符。props:父向子传值。

事件循环先执行宏任务,其中同步任务立即执行,一步任务加载到对应的EvenQueue中,微任务也加载到对应的微任务EvenQueue中,所有的同步微任务执行完之后,如果发现微任务的EvenQueue中有未执行完的任务,先执行他们这样算是完成了一轮事件循环,接下来查看宏任务的队列中是否有异步代码,有的话执行第二轮的事件循环。从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。Object.observe（已废弃；

几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了回流。Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）解析HTML，生成DOM树，解析CSS，生成CSSOM树。