vue---基本原理(二)

1、slot的基础理解

slot又名插槽,是vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发的出口。是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示,是由父元素控制的。slot又分为默认插槽、具名插槽、作用域插槽。

默认插槽:即匿名插槽,slot没有指明name属性值,就是一个默认插槽。一个组件中只能有一个默认插槽。

具名插槽:带有name属性值的插槽,一个组件中可以有多个具名插槽。

作用域插槽:既可以是匿名插槽,又可以是具名插槽,该插槽的不同点在于是在子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件传递过来的数据,决定如何渲染该插槽。实现:当子组件实例化时,获取到父组件传入的slot内容,存放在vm.slot中,默认插槽为vm.slot.default,具名插槽为vm.slot.name,当组件执行渲染函数时,遇到slot标签,使用slot的内容进行替换,此时可为插槽传递数据。

2、常见的事件修饰符

  • .stop:等同于 JavaScript 中的event.stopPropagation(),防止事件冒泡;
  • .prevent:等同于 JavaScript 中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
  • .capture:与事件冒泡的方向相反,事件捕获由外到内;
  • .self:只会触发自己范围内的事件,不包含子元素;
  • .once:只会触发一次

3、v-if、v-show、v-html的原理,即v-if、v-show的区别

  • v-if会调用addIfCondition方法,生成vnode的时候,会忽略对应节点,render的时候就不会渲染
  • v-show会生成vnode,render的时候会渲染成真是的节点,只是在render的过程中,会修改节点的display属性
  • v-html会先移除节点下的所有节点,调用html方法,通过addProp添加innerHTML属性,并设置值

v-if与v-show的区别:

  • 手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;
  • 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
  • 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下,无论首次条件是否为真,都被编译,然后被缓存,而且DOM元素保留;
  • 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
  • 使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。

4、data为什么是一个函数而不是一个对象

js中的对象是引用数据类型,当多个实例引用一个对象的时候,只要一个实例操作这个对象,其他实例中的数据也会发生变化。vue中,数据以函数返回值的形式定义,当复用组件时,会返回一个新的data,即每个组件有自己的私有数据空间,不会感染其他组件的操作。

5、vue单页面与多页面的区别

  • SPA单页面应用:指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面中,对每一个模块功能组件化。单页面应用跳转,就是切换相关组件,仅刷新局部资源。
  • MPA多页面应用:指有多个独立页面的应用,每个页面要重复加载js、css等相关资源。多页面跳转,需要整页刷新资源。
相关推荐
M ? A13 分钟前
你的 Vue 3 响应式状态,VuReact 如何生成 React Hooks 依赖数组?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
FlyWIHTSKY17 分钟前
HTML 中 `<span>` 和 `<div>` 详细对比
前端·html
competes27 分钟前
React.js JavaScript前端技术脚本运行框架。程序员进行研发组项目现场工作落地的一瞬之间适应性恒强说明可塑性强度达到应用架构师的考核标准
前端·javascript·人工智能·react.js·java-ee·ecmascript
2401_8326355829 分钟前
踩坑分享IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署 + 常见问题解决)
前端·tomcat·intellij-idea
Evavava啊32 分钟前
Android WebView 中 React useState 更新失效问题
android·前端·react.js·渲染
恋恋风尘hhh37 分钟前
Web 端请求签名机制分析:以小红书(XiaoHongShu)x-s 参数为例
前端
包子源38 分钟前
React-PDF 与 Web 预览「像素级」对齐实践
前端·react.js·pdf
jiayong2344 分钟前
第 25 课:给学习笔记页加上搜索、标签筛选和 URL 同步
开发语言·前端·javascript·vue.js·学习
UXbot1 小时前
如何用 AI 快速生成完整的移动端 UI 界面:从描述到交付的实操教程
前端·ui·交互·ai编程·原型模式
南囝coding1 小时前
零成本打造专业域名邮箱:Cloudflare + Gmail 终极配置保姆级全攻略
前端·后端