腾虎广州网站建设,秦皇岛做网站公司汉狮价格,网站制作模板网站,做推广网站需要商标吗4. slot 是什么#xff1f;有什么作用#xff1f;原理是什么#xff1f;
slot 又名插槽#xff0c;是 Vue 的内容分发机制#xff0c;组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。插槽 slot 是子组件的一个模板 标签元素#xff0c;而这一个标签元素是否显…4. slot 是什么有什么作用原理是什么
slot 又名插槽是 Vue 的内容分发机制组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。插槽 slot 是子组件的一个模板 标签元素而这一个标签元素是否显示以及怎么显示是由父组件决 定的。slot 又分三类默认插槽具名插槽和作用域插槽。
默认插槽又名匿名插槽当 slot 没有指定 name 属性值的时候一个 默认显示插槽一个组件内只有有一个匿名插槽。具名插槽带有具体名字的插槽也就是带有 name 属性的 slot一 个组件可以出现多个具名插槽。
作用域插槽默认插槽、具名插槽的一个变体可以是匿名插槽也 可以是具名插槽该插槽的不同点是在子组件渲染作用域插槽时可 以将子组件内部的数据传递给父组件让父组件根据子组件的传递过 来的数据决定如何渲染该插槽。
实现原理当子组件 vm 实例化时获取到父组件传入的 slot 标签的 内容存放在 vm.$slot 中默认插槽为 vm.$slot.default具名插 槽为 vm.$http://slot.xxxxxx 为插槽名当组件执行渲染函数时候遇 到 slot 标签使用$slot 中的内容进行替换此时可以为插槽传递 数据若存在数据则可称该插槽为作用域插槽。
5. $nextTick 原理及作用
Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的 一种应用。
nextTick 的 核 心 是 利 用 了 如 Promise 、 MutationObserver 、setImmediate、setTimeout 的原生 JavaScript 方法来模拟对应的 微/宏任务的实现本质是为了利用 JavaScript 的这些异步回调任 务队列来实现 Vue 框架中自己的异步回调队列。
nextTick 不仅是 Vue 内部的异步队列的调用方法同时也允许开发 者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时 机的后续逻辑处理
nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中 的示例引入异步更新队列机制的原因∶如果是同步更新则多次对一个或多个属性赋值会频繁触发 UI/DOM 的渲染可以减少一些无用渲染
同时由于 VirtualDOM 的引入每一次状态发生变化后状态变化的 信号会发送给组件组件内部使用 VirtualDOM 进行计算得出需要更 新的具体的 DOM 节点然后对 DOM 进行更新操作每次更新状态后 的渲染过程需要更多的计算而这种无用功也将浪费更多的性能所 以异步渲染变得更加至关重要
Vue 采用了数据驱动视图的思想但是在一些情况下仍然需要操作 DOM。有时候可能遇到这样的情况DOM1 的数据发生了变化而 DOM2 需要从 DOM1 中获取数据那这时就会发现 DOM2 的视图并没有更新这时就需要用到了 nextTick 了。
由于 Vue 的 DOM 操作是异步的所以在上面的情况中就要将 DOM2 获取数据的操作写在$nextTick 中。 所以在以下情况下会用到 nextTick
在数据变化后执行的某个操作而这个操作需要使用随数据变化而变 化的 DOM 结构的时候这个操作就需要方法在 nextTick()的回调函 数中。
在 vue 生命周期中如果在 created()钩子进行 DOM 操作也一定要 放在 nextTick()的回调函数中。
因为在 created()钩子函数中页面的 DOM 还未渲染这时候也没办 法操作 DOM所以此时如果想要操作 DOM必须将操作的代码放在 nextTick()的回调函数中。
6. Vue 单页应用与多页应用的区别
概念
SPA 单页面应用SinglePage Web Application指只有一个主页 面的应用一开始只需要加载一次 js、css 等相关资源。所有内容都 包含在主页面对每一个功能模块组件化。单页应用跳转就是切换 相关组件仅仅刷新局部资源。
MPA 多页面应用 MultiPage Application指有多个独立页面的 应用每个页面必须重复加载 js、css 等相关资源。多页应用跳转需要整页资源刷新。
区别
