vue高频八股

一、基础知识1.二、指令概念带有v-前缀的特殊html属性用于在模板中表达逻辑用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。1.v-if和v-show有什么区别1v - if功能条件渲染。当表达式的值为 true 时该元素及其包含的所有子元素会被渲染到 DOM 中当表达式的值为 false 时该元素将不会被渲染到 DOM 中template中对应的DOM会被转化为注释。性能具有惰性渲染的特性在初始渲染时如果条件为假则不会执行任何渲染操作直到条件变为真才会开始渲染。切换时涉及创建或销毁 DOM 元素因此有较高的切换开销但对初次渲染有优化效果。使用场景适合那些需要根据条件决定是否生成 DOM 的情况或者在不需要渲染大量未使用的 DOM 时2v-show功能条件显示。不论条件真假元素总是会被渲染到 DOM 中只是通过CSS 的 display属性来控制元素的可见性display: none/block/flex/gird等。性能在初始渲染时会一次性编译并添加所有元素到 DOM 树中之后只通过修改样式来切换元素的显示状态所以其初始渲染开销可能较大但在切换显示隐藏状态时由于仅涉及 CSS 属性的改变性能消耗相对较小。使用场景适用于频繁切换显示/隐藏状态且 DOM 结构较为复杂的情况因为避免了反复创建和销毁 DOM 元素带来的性能损耗。2.v - if 和 v - else - if / v - elsev - if根据表达式的值决定是否渲染元素。v - else - if在 v - if 之后使用提供额外的条件判断。v - else与 v - if 或者 v - else - if 配合使用当前面的条件不满足时渲染内容。template div !-- 输入分数 -- input typenumber v-modelscore placeholder输入分数(0-100) / !-- 根据分数显示等级 -- p v-ifscore 90优秀 /p p v-else-ifscore 60及格 /p p v-else不及格 /p /div /template script setup import { ref } from vue const score ref(0) /script3.v - show类似于 v - if但不同之处在于它通过 CSS 的 display 属性控制元素显示/隐藏DOM 元素始终会被渲染只是切换可见性。template div !-- 切换按钮 -- button clicktoggle切换显示/隐藏/button !-- v-show 控制显示隐藏 -- p v-showisVisible我会显示和隐藏/p /div /template script setup import { ref } from vue const isVisible ref(true) const toggle () { isVisible.value !isVisible.value } /script4.v - for用于循环渲染列表或数组数据可以遍历数组、对象或生成迭代器的任何可迭代对象。template div !-- 最简单的遍历数组 -- ul li v-forfruit in fruits{{ fruit }}/li /ul /div /template script setup import { ref } from vue const fruits ref([苹果, 香蕉, 橙子, 葡萄]) /script5.v - bind简写 :绑定元素属性到实例数据例如 v - bind:href url 可以动态绑定链接地址简写为 :href url。1动态绑定链接template div !-- 最基础的用法动态绑定属性 -- img v-bind:srcimageUrl alt图片 / !-- 简写最常用 -- img :srcimageUrl alt图片 / /div /template script setup import { ref } from vue const imageUrl ref(https://picsum.photos/200/100) /script2动态绑定 classtemplate !-- 根据 isActive 决定是否高亮 -- div :class{ active: isActive }我是内容/div button clickisActive !isActive切换高亮/button /template script setup import { ref } from vue const isActive ref(false) /script style .active { background-color: yellow; font-weight: bold; } /style注意div :class{ active: isActive }我是内容/div{ active: isActive } 一个对象active是 CSS 类名就是 style 里那个 .activeisActive是一个变量true 或 false所以当isActivetrue时说明active有效所以classactive则下面的style的.active才会作用到div上。效果:class 动态开关 CSS 类样式写在style里而:style 动态写 CSS 属性值样式直接写在行内3动态绑定 styletemplate !-- 动态改变文字颜色 -- p :style{ color: textColor }我会变颜色/p button clicktextColor red变红/button button clicktextColor blue变蓝/button /template script setup import { ref } from vue const textColor ref(black) /script4批量绑定多个属性template !-- 用对象一次性绑定多个属性 -- div v-bindattrs批量绑定/div /template script setup const attrs { id: myDiv, class: box highlight, data-id: 123, title: 鼠标悬停提示 } /script6.v - on简写 绑定事件例如 v - on:click method 可以绑定点击事件简写为 click method。1点击事件 传参数template button clicksayName(小明)点我/button /template script setup const sayName (name) { alert(我叫 name) } /script2直接写简单逻辑不用单独定义函数template button clickcount点击次数{{ count }}/button /template script setup import { ref } from vue const count ref(0) /script3鼠标移入/移出事件template div mouseenterisHover true mouseleaveisHover false :style{ background: isHover ? yellow : gray } 鼠标移进来变黄 /div /template script setup import { ref } from vue const isHover ref(false) /script4获取事件对象template input inputhandleInput / /template script setup const handleInput (event) { console.log(event.target.value) // 打印输入框的内容 } /script5 阻止默认行为比如阻止表单提交刷新页面template form submit.preventsubmitForm button typesubmit提交/button /form /template script setup const submitForm () { console.log(表单提交了但页面没刷新) } /script6常用事件修饰符很实用template !-- 阻止冒泡 -- div clickparentClick button click.stopchildClick点我/button /div !-- 只触发一次 -- button click.oncedoOnce只生效一次/button !-- 回车键触发 -- input keyup.entersearch / !-- 阻止默认行为简写 -- a hrefhttps://baidu.com click.preventgo链接/a /template7.v - model用于表单元素的双向数据绑定。template div !-- v-model 绑定输入框 -- input v-modelmessage placeholder输入点什么... / p你输入的是{{ message }}/p /div /template script setup import { ref } from vue const message ref() /script注用input写template input :valuemessage inputmessage $event.target.value / p{{ message }}/p /templatev-model 就是上面那两行代码的语法糖三、渐进式框架的理解1.模块化渐进式框架通常将功能划分为多个独立的模块或组件每个模块可以单独引入和使用这样开发者可以根据项目需求选择性地集成所需的部分。2.低侵入性它不会强制要求开发者遵循严格的规则集或重构整个应用才能使用框架而是尽可能地与现有代码库和第三方库无缝融合。例子你有个老项目里面全是 jQuery 写的没问题你在某个角落里用 Vue 写一个点赞按钮其他 jQuery 代码照跑不误Vue 不会说你那个 jQuery 必须删掉听我的。3.灵活性开发者能够轻松地从小规模开始仅使用框架的基本功能并随着项目的复杂度增加逐步添加更高级的功能。4.可扩展性框架的设计支持自定义扩展这意味着开发者可以在需要时构建自己的插件或模块来满足特定业务需求。5.易于上手四、vue的生命周期beforeCreate是new Vue() 之后触发的第一个钩子在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。created在实例创建完成后发生当前阶段已经完成了数据观测也就是可以使用数据更改数据在这里更改数据不会触发 updated 函数。可以做一些初始数据的获取在当前阶段无法与 Dom 进行交互如果非要想可以通过 vm.$nextTick 来访问 Dom。beforeMount发生在挂载之前在这之前 template 模板已导入渲染函数编译。而当前阶段虚拟 Dom 已经创建完成即将开始渲染。在此时也可以对数据进行更改不会触发 updated。mounted在挂载完成后发生在当前阶段真实的 Dom 挂载完毕数据完成双向绑定可以访问到 Dom 节点使用 $refs 属性对 Dom 进行操作。beforeUpdate发生在更新之前也就是响应式数据发生更新虚拟 dom 重新渲染之前被触发你可以在当前阶段进行更改数据不会造成重渲染。updated发生在更新完成之后当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据因为这可能会导致无限循环的更新。beforeDestroyVue2/beforeUnmountVue3发生在实例销毁之前在当前阶段实例完全可以被使用我们可以在这时进行善后收尾工作比如清除计时器。destroyedVue2/unmountedVue3发生在实例销毁之后这个时候只剩下了 dom 空壳。组件已被拆解数据绑定被卸除监听被移出子实例也统统被销毁。activatedkeep - alive 专属组件被激活时调用。deactivatedkeep - alive 专属组件被移除时调用。errorCaptured错误被捕获时调用。五、双向数据绑定原理什么是双向数据绑定 数据变 → 页面变页面变输入框打字→ 数据变。input v-modelname / p{{ name }}/p你在输入框打张name自动变张页面也跟着显示张。核心原理怎么知道数据变了答案监控数据的变化数据一变化就去更新页面。Vue 2 和 Vue 3 监控数据变化的方式不一样。1.vue2:Object.defineProperty2.vue3:Proxy代理六、虚拟 DOM 实现原理七、computed 的实现原理computed 和 watch 有什么区别及运用场景八、为什么在 Vue3.0 采用了 Proxy抛弃了 Object.defineProperty九、Vue 组件间通信有哪些方式1.父子组件通信1props:父传子父组件把数据通过props递给子组件子组件只能用不能改。在子组件定义const props defineProps([属性名1属性名2......])在父组件中v-bind:属性1父组件要传递的数据!-- 父组件 Parent.vue -- template div Child :money1000 :task写代码 / /div /template script setup import Child from ./Child.vue /script!-- 子组件 Child.vue -- template div p老板给了{{ props.money }}块钱/p p任务{{ props.task }}/p /div /template script setup // 定义要接收什么 const props defineProps([money, task]) // 可以用但不能改 props.money 2000 ❌ 会报错 /script注意!-- 父组件 Parent.vue -- template div Child :moneydollar :taskobj / /div /template script setup import Child from ./Child.vue import {ref} from vue const dollarref(0); const objref({ work1 }) /script那么在子组件的template中就应该是props.money props.obj.work2$emit发出子传父子组件向父组件传递数据通过触发自定义事件。子组件触发一个事件父组件监听这个事件。就像员工喊老板我干完了老板听到后给奖励。子组件中定义const emit defineEmits([done]),done也可以是其他自定义的值和定义const propsdefineProps([属性名])一样const finishWork () {emit(done,xxx)}父组件中v-on:done父组件中要除非的函数例子子组件emit(done)触发 → 父组件done监听到 → 执行handleDone!-- 子组件 Child.vue -- template div button clickfinishWork任务完成/button /div /template script setup 1. 声明我这个组件会发出一个叫 done 的事件 const emit defineEmits([done]) 2. 函数执行会触发发出 done 事件并可以带数据 const finishWork () { emit(done, 任务已完成请验收) // 触发事件可以带数据 } /script!-- 父组件 Parent.vue -- template div 3. 监听父组件监听到这个事件就执行handleDone函数 Child donehandleDone / p{{ message }}/p /div /template script setup import { ref } from vue import Child from ./Child.vue const message ref() const handleDone (data) { message.value data // 收到子组件的汇报任务已完成请验收 alert(奖励100块) } /script3ref:略2.隔代组件通信爷孙组件1$attrs / $listeners透传爸爸组件里要props辅助特点爷爷组件要向孙子组件传递属性或者方法要经过爸爸组件。$attrs 包含了父作用域中不被 props 所识别且获取的特性绑定class 和 style 除外。当一个组件没有声明任何 props 时这里会包含所有父作用域的绑定class 和 style 除外并且可以通过 v - bind $attrs 传入内部组件。通常配合 inheritAttrs 选项一起使用。$listeners 包含了父作用域中的不含.native 修饰器的v - on 事件监听器。它可以通过 v - on $listeners 传入内部组件。这里爷爷组件传了三个属性/函数给爸爸组件!-- 爷爷组件 -- template Parent :money1000 :task写代码 successhandleSuccess / /template script setup import Parent from ./Parent.vue const handleSuccess (msg) { console.log(收到, msg) } /script!-- 爸爸组件中间人 -- template p爸爸自己用了{{ money }}元/p !-- 爸爸自己只用了 money其他没有的属性原样传给孙子 -- Child v-bind$attrs v-on$listeners / v-bind$attrs透传属性 v-on$listeners透传事件(在vue3中这个被合并到$attrs了所以其实不 用写v-on$listenersv-bind$attrs把属性和事件全透传了) /template script setup import Child from ./Child.vue 爸爸只声明了 money所以 task 和 success 事件就变成了 $attrs defineProps([money]) 如果爸爸组件什么都没声明defineProps([])则爷爷传给爸爸的数据会全部传给孙子 /script!-- 孙子组件 -- template div !-- 孙子直接收到爷爷的 task 和事件 -- p任务{{ $attrs.task }}/p button click$attrs.onSuccess(干完了)汇报/button /div /template2provide / inject依赖注入特点爷爷组件要向孙子组件传递属性或者方法不用经过爸爸组件处理同意。祖先组件中通过 provider 来提供变量然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题不过它的使用场景主要是子组件获取上级组件的状态跨级组件间建立了一种主动提供与依赖注入的关系。使用场景a祖宗组件和后代组件b状态提示当有多个组件需要使用到同一个状态(state)(数据)时。可以将state提升到这些组件共同的祖先组件中声明所有这些组件便都可以通过祖先元素来访问到这个state。例子 eg: 在共同祖宗组件中 import {provide, ref} from vue const count ref(0); const increment function(){ count.value; } 设置依赖注入 provide(count, { count, increment }); // ↑ ↑ // 数据 方法 在组件想要用祖宗组件数据的各个后代组件中 import { ref , inject} from vue 依赖注入从count中拿 const { count, increment } inject(count);3.兄弟组件通信1EventBus$emit / $on通过一个空的 Vue 实例作为中央事件总线事件中心用它来触发事件和监听事件从而实现任何组件间的通信包括父子、隔代、兄弟组件。2Vuex / Pinia用于状态管理适用于复杂的应用场景。