/components/MyComponent.vue'))回答范例在大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们。...我们不仅可以在路由切换时懒加载组件，还可以在页面组件中继续使用异步组件，从而实现更细的分割粒度。...如果要在组件上使用原生事件，需要加.native 修饰符，这样就相当于在父组件中把子组件当做普通 html 标签，然后加上原生事件。...diff，手动优化的价值有限，因此目前Vue并没有考虑引入shouldComponentUpdate这种手动优化的生命周期Vue中的过滤器了解吗？...$options.filters中找出注册的过滤器并返回// 变为this.
Vue的API命名nextTick Vue官方对nextTick这个API的描述： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。...的环境中，则返回一个 Promise。...0 可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。...这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。...例如，当你设置 vm.someData = 'new value' ，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。
它使用slice方法来从输入数组中提取每个子数组，并使用循环来遍历整个数组并构建输出二维数组。最后，它返回生成的二维数组。 3. 输出结果，为什么？...在 Vue.js 中，Vue 实例可以充当 EventBus 的角色。...项目中我会把用户的一些需要持久化的信息存入本地存储。 4、异步请求使用Promise.all：异步请求可以在后台加载资源，从而避免阻塞页面加载。...在请求数据时，我会使用Promise.all一次性并行的请求类似的数据，而不需要一个一个的请求，较少了请求时间。...最后在学习了并在项目中使用axios进行请求和响应后，就在响应的时候设置一个拦截器，对响应进行一番处理之后就可以直接拿到后端接口返回的值，而不会导致接口返回的值不会有太多的嵌套了。 11.
'', '/vue') 当用户手动点击浏览器上的前进后退按钮时，会触发 popstate 事件，所以需要对这个事件进行监听。...*/ loadApp: () => Promise } 一个完整的示例 现在我们来看一个比较完整的示例（代码在 V1 分支的 examples 目录）： let vueApp registerApplication...所以我们要把这些事件记录起来，在卸载子应用时清除这些事件。同理，各种定时器也一样，卸载时需要清除未执行的定时器。...mount() 方法，由于每个 js 文件只会执行一次，所以在执行 mount() 方法之前的代码在下一次重新加载时不会再次执行。...为了解决这个问题，我们可以在子应用初始化时（拉取了所有入口 js 文件并执行后）将当前的子应用 window 代理对象的属性、事件缓存起来，生成快照。下一次子应用重新加载时，将快照恢复回子应用上。
'即可，vue.config.js中的8081改成8082` 启动应用，作为独立应用访问 基座应用 layout 在/micro-frontend目录下新建基座应用，为了简洁明了，新建项目时选择的配置项和子应用一样...single-spa 源码阅读思维导图 这是我在阅读时整理的一个思维导图，源码中也写了大量的注释，大家可以参照着进行阅读。Ok ！！.../lifecycle.helpers.js /** * 返回一个接受props作为参数的函数，这个函数负责执行子应用中的生命周期函数， * 并确保生命周期函数返回的结果为promise * @param...app，移除生命周期函数，更改app.status // 但应用不是真的被移除，后面再激活时不需要重新去下载资源,，只是做一些状态上的变更，当然load的那个过程还是需要的，这点可能需要再确认一下 function...这里就是了，果然和之前的猜想是一样的 // 是在执行生命周期函数时像子应用传递的props，所以之前执行loadApp传递props不会到子应用， // 那么设计估计是给用户自己处理props
它使用slice方法来从输入数组中提取每个子数组，并使用循环来遍历整个数组并构建输出二维数组。最后，它返回生成的二维数组。 3. 输出结果，为什么？...在 Vue.js 中，Vue 实例可以充当 EventBus 的角色。...项目中我会把用户的一些需要持久化的信息存入本地存储。 异步请求使用Promise.all：异步请求可以在后台加载资源，从而避免阻塞页面加载。...在请求数据时，我会使用Promise.all一次性并行的请求类似的数据，而不需要一个一个的请求，较少了请求时间。...最后在学习了并在项目中使用axios进行请求和响应后，就在响应的时候设置一个拦截器，对响应进行一番处理之后就可以直接拿到后端接口返回的值，而不会导致接口返回的值不会有太多的嵌套了。 11.
这种语法行为，在不设置参数默认值时，是不会出现的。...[...arr1] 深拷贝 深拷贝是将一个对象从内存中完整的拷贝一份出来，对象与对象间不会共享内存，而是在堆内存中新开辟一个空间去存储，所以修改新对象不会影响原对象。...宏任务 在一次新的事件循环的过程中，遇到宏任务时，宏任务将被加入任务队列，但需要等到下一次事件循环才会执行。...若资源未修改过，则返回 304 状态码，并且不返回内容，浏览器使用缓存；否则返回资源内容，并更新 Last-Modified 的值； ETag 和 If-None-Match ETag 和 If-None-Match...若资源内容没有变化，则返回 304 状态码，并且不返回内容，浏览器使用缓存；否则返回资源内容，并计算哈希值放到 ETag； TCP 和 UDP 的区别 TCP 面向连接 一对一通信 面向字节流 可靠传输
pinia 核心源码 记录pinia核心源码阅读笔记，这里跳过hmr(热更新), mapHelpers(class 工具)等工具源码。 剔除的部分vue2.0兼容代码。...state缓存空间, 生成的store将缓存到该队列中 // 当使用useState是，将通过注册的id，从stateTrue // 中查询对应的store，保证不同组件使用相同的store...// 防止重复触发 // 保证$subscribe在完整合并后再执行 isListening = isSyncListening = false if (__...state更新后被执行一次 $subscribe 更新监听 $subscribe(callback, options = {}) { // 向任务队列中添加任务, 并返回移除函数 const...return removeSubscription } wrapAction action 包装函数，主要为了提供 $onAction 监听钩子, 该函数在setupStore生成时被调用 function
vue 通过使用双向数据绑定，来实现了 View 和 Model 的同步更新。vue 的双向数据绑定主要是通过使用数据劫持和发布订阅者模式来实现的。...在 Vue3.0 中已经不使用这种方式了，而是通过使用 Proxy 对对象进行代理，从而实现数据劫持。...（5）beforeUpdate 钩子函数，在响应式数据更新时触发，发生在虚拟 DOM 重新渲染和打补丁之前，这个时候我们可以对可能会被移除的元素做一些操作，比如移除事件监听器。...用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。...用 v-for 更新已渲染过的元素列表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处的每个元素。
手写 Promise.thenthen 方法返回一个新的 promise 实例，为了在 promise 状态发生变化时（resolve / reject 被调用时）再执行 then 里的函数，我们使用一个...，但注册到了不同的 callbacks 数组中，因为每次 then 都返回新的 promise 实例（参考上面的例子和图）注册完成后开始执行构造函数中的异步事件，异步完成之后依次调用 callbacks...在Vue中使用Event Bus来实现组件间的通讯Event Bus/Event Emitter 作为全局事件总线，它起到的是一个沟通桥梁的作用。...创建一个 Event Bus（本质上也是 Vue 实例）并导出：const EventBus = new Vue()export default EventBus在主文件里引入EventBus，并挂载到全局...，resolve 当前 promise，并依然使用递归进行。
你可以使用 .then() 方法来处理已完成的 Promise，并使用 .catch() 方法来处理被拒绝的 Promise。...它不会阻止后续代码的执行，而是在背后计时，一旦时间到达，就将回调函数加入到事件队列中，等待执行。...; } 在这个例子中，useEffect钩子的返回函数负责清除定时器，这个函数会在组件卸载时被调用，从而确保定时器被适当销毁。...框架拓展：Vue 中有用到 process.nextTick 吗？ Vue.js 中也使用了 process.nextTick，或者更具体地说，它使用了与之类似的异步延迟功能。...Vue中 nextTick 的应用 确保 DOM 更新完成：Vue 的数据绑定和 DOM 更新是异步的。当你更改数据后，DOM 不会立刻更新。
Vue 内部会用它来处理 data 函数返回的对象返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。...变更，它和被返回的对象是同一个对象在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的二、使用场景在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂...$options.filters中找出注册的过滤器并返回// 变为this....主要原因在于对象属于引用类型，单个属性的更新并不会触发对象 setter，因此引入 deep 能够很好地解决监听对象的问题。同时也会引入判断机制，确保在多个属性更新时回调函数仅触发一次，避免性能浪费。...slot使用场景有哪些一、slot是什么在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符该占位符可以在后期使用自己的标记语言填充举个栗子<
，在第一个promise状态改变后，也就是在then方法中，返回第二个promise并执行，同理。...find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。...findIndex() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。...因为在事件冒泡中，子元素的事件触发会冒泡到父元素中，触发父元素相同的事件。所以我们只需给父元素添加事件监听即可。 如果我们不使用事件代理，那需要遍历父元素下的子元素，挨个进行事件监听。...find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回 18...$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM 23.v-on可以监听多个方法吗？ 可以。...当Vue用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。...Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html...1.将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度； 2.在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel
页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面...服务器会有更大的负载需求 在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境...如果要在组件上使用原生事件，需要加.native 修饰符，这样就相当于在父组件中把子组件当做普通 html 标签，然后加上原生事件。...(官方不推荐在实际业务中使用，但是写组件库时很常用) $refs 获取组件实例 envetBus 兄弟组件数据传递 这种情况下可以使用事件总线的方式 vuex 状态管理 如何保存页面的当前的状态 既然是要保持页面的状态...我们不仅可以在路由切换时懒加载组件，还可以在页面组件中继续使用异步组件，从而实现更细的分割粒度。
多页应用跳转，需要整页资源刷新。Vue模版编译原理知道吗，能简单说一下吗？简单说，Vue的编译过程就是将template转化为render函数的过程。...Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。...Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。...这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际（已去重的）工作。你有对 Vue 项目进行哪些优化？...nextTick 不仅是 Vue 内部的异步队列的调用方法，同时也允许开发者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时机的后续逻辑处理nextTick 是典型的将底层 JavaScript
8.2 Promise关于这一块儿没什么好说的，最好是实现一遍 Promise A+ 规范，多少有点印象，当然面试官也不会叫你默写一个完整的出来，但是你起码要知道实现原理。...一致则返回 304，否则返回 200 和最新的资源。资源标识：在 Response Headers 中，有两种。Last-Modified：资源的最后修改时间。...Last-Modified：服务端拿到 if-Modified-Since 之后拿这个时间去和服务端资源最后修改时间做比较，如果一致则返回 304 ，不一致（也就是资源已经更新了）就返回 200 和新的资源及新的...如果 setState 在原生 JavaScript 控制的范围被调用，它就是同步的。比如原生事件处理函数，定时器回调函数，Ajax 回调函数中，此时 setState 被调用后会立即更新 DOM 。...常用的第三方库使用 CDN 服务，在 webpack 中我们要配置 externals，将比如 React， Vue 这种包不打倒最终生成的文件中。而是采用 CDN 服务。其它：使用 http2。
Proxy 可以劫持整个对象,并返回一个新的对象。Proxy 不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。 5. Vue 中的 key 到底有什么用？...和 Promise.then 异步更新队列 可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。...这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。 然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。...用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行 microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕 考虑兼容问题,vue 做了...如果存在,直接取出缓存值并更新该 key 在 this.keys 中的位置(更新 key 的位置是实现 LRU 置换策略的关键) 在 this.cache 对象中存储该组件实例并保存 key 值
例如，在日常开发中，我们将@click=***用得飞起，但是我们是否思考，Vue如何在后面为我们的模板做事件相关的处理，并且我们经常利用组件的自定义事件去实现父子间的通信，那这个事件和和原生dom事件又有不同的地方吗...对于事件而言，我们经常使用v-on或者@在模板上绑定事件。因此对事件的第一步处理，就是在编译阶段对事件指令做收集处理。...Vue在实例上用一个_events属性存贮管理事件的派发和更新，暴露出$on, $once, $off, $emit方法给外部管理事件和派发执行事件。...$emit在组件实例中派发了事件，而在这之前，组件已经将需要监听的事件以及回调添加到实例的_events属性中，触发事件时便可以直接执行监听事件的回调。...9.5 小结事件是我们日常开发中必不可少的功能点，Vue在应用层暴露了@,v-on的指令供开发者在模板中绑定事件。
Vue组件渲染和更新过程渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，并进行实例化。最终手动调用$mount() 进行挂载。...Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？...不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。...这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际（已去重的）工作。...图片资源的压缩图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素对于所有的图片资源，我们可以进行适当的压缩对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
