前端科举八股文-VUE篇

前端科举八股文-VUE篇

  • Vue响应式的基本原理?
  • computed和watch的区别
  • computed和methods的区别
  • Slot是什么 ? 作用域插槽是什么?
  • 组件缓冲keep-alive是什么? 讲讲原理
  • v-if,v-show的区别
  • v-modal如何实现双向绑定
  • 组件中的data属性为什么是一个函数而不是对象?
  • $nextTick的用法?
  • vue是如何实现数组的响应式的?追问:为什么不重写全部方法?
  • 单页面应用和多页面应用?
  • 追问为什么SPA应用不利于SEO
  • vue如何解析template的。
  • vue的自定义指令
  • vue的单项数据流为什么不推荐子组件直接改变父组件数据?
  • Vue的依赖收集过程
  • vue react的异同
  • 父子组件的生命周期执行顺序
  • Vue之间的组件通信
  • Vue路由懒加载原理
  • 常见的路由守卫钩子
  • Vue的基本概念
  • 为什么不能在mutations里面进行异步操作?
  • 什么是虚拟dom?
  • 虚拟dom一定比真实dom性能更好吗?
  • vue3.0和vue2.0的区别?
  • v-for中key的作用?

Vue响应式的基本原理?

在vue2的版本中,是使用defineProperty的get和set方法来实现数据的响应式,具体实现是遍历data里面的每一个key,在get里面实现依赖收集,收集当前key关联的所有组件.在set方法里面调用key对应的更新方法来实现响应式更新.但是由于defineProperty的局限性.vue3的版本中使用proxy来取代definepropperty来实现响应式.局限性是vue2无法监听未初始化的key的响应式以及通过下标或者length直接操作的数组.

computed和watch的区别

Computed是计算属性,具有缓存性,computed依赖的响应式值不更新computed就不会更新会一直使用缓存值.
对于watch,它接受一个值,一个回调函数,不支持缓存,在响应式值改变时就会立即触发回调函数.
它们的适用场景不同
当一个复杂数据依赖其他数据计算的时候,为了避免每次渲染时候重复计算浪费性能应该使用computed计算属性
当需要在响应式数据改变时执行某些逻辑应该使用watch监听函数

computed和methods的区别

当一个值需要其他响应式对象配合来计算时可以同时使用computed计算属性或methods方法来实现,区别是computed具有缓存性,而methods每次都会重新计算.

Slot是什么 ? 作用域插槽是什么?

插槽,官方说明是一个内容分发机制,当需要在同一个组件内部展示不同的内容时可以使用slot插槽讲需要差异化显示的内容填充进去.
因为插槽默认的作用域是指向父组件,作用域插槽是指讲子组件的数据分发到外层供父组件使用的一个api.

组件缓冲keep-alive是什么? 讲讲原理

keep-alive是可以保存组件状态的一个api,缓存组件在显示和隐藏时不是走created和destroy生命周期,而是使用actived和deactive生命周期,它的作用是缓存组件的状态,比如输入框的值,响应式data等。
原理:keep-alive组件在使用的时候有3个props,includes,excludes,includes来过滤掉需要缓存和不需要缓存的组件,需要传入的是组件的name值,在底层会根据过滤之后来判断当前组件是否需要缓存,如果需要缓存就将name对应的组件写入缓存,等到使用的时候直接从缓存中拿出对应的vdom进行渲染,第三个参数是max,表示最大缓存实例。底层采用的是LRU算法,如果超过最大缓存实例,vue会将最不常用的组件踢出缓存同时将新组件写入缓存。

v-if,v-show的区别

两者都是条件渲染页面元素的api,区别是v-if是移除整个dom节点,v-show通过display来控制元素的渲染。所以v-show有更高的初始化开销,v-if 有更高的切换开销

v-modal如何实现双向绑定

v-modal实际上是v-bind:value和v-on:input的语法糖,v-modal实现原理实际上是通过v-on:input来监听输入事件,然后通过input的回调拿到最新的值复制给v-bind的value从而实现双向绑定

组件中的data属性为什么是一个函数而不是对象?

因为在js中,只有函数才能生成局部作用域,才能把每个组件的data相互隔离,如果直接使用对象的话,所有组件都会共享一个data属性从而造成污染。

$nextTick的用法?

在vue中数据更新引发的视图更新是异步的,所以在数据更新后立马操作dom是无法直接拿到最新的值的,所以如果有需要立马拿到更新之后的值的需求,可以通过$nextTick api。它的实现原理是通过H5的oberveMutation api,这是一个监听dom元素是否变化的api,然后根据兼容性依次取promise.then、 setTimeout来实现。它的本质是对js执行机制eventloop的一种应用

vue是如何实现数组的响应式的?追问:为什么不重写全部方法?

是通过重写数组的七个方法来实现数组的响应式。pop,shift,unshift,push,splice,sort,reverse。因为只有这七个方法改变了原数组

单页面应用和多页面应用?

单页面应用(SPA,SINGLE PAGE APPLICATION)顾名思义,整个应用只有一个页面,路由切换时根据url来切换到页面的不同锚点从而实现不同页面的渲染。多页面应该的实现是切换页面的时候再去加载页面所需要的资源,再去进行渲染。总体来说各有优劣,单页面应用由于首屏渲染需要加载页面全部的资源,所以spa的首屏加载是比较慢的。单页面应用页面切换会比多页面更加丝滑流畅,因为不需要再加载页面对应的资源。缺陷是SPA应用是不利于SEO的。

追问为什么SPA应用不利于SEO

这和SEO的工作方式有关,搜索引擎首先会用爬虫去爬取静态页面的内容,然后将网页存储到数据库,在用户搜索时在根据算法筛选出相关内容进行推送。但是由于SPA应用的网页内容是由JS生成的,比如Vue,所以在爬虫爬取网页的时候是爬不到具体内容的,现代的浏览器虽然也可以执行JS去生成动态内容,但是这个速度是比较慢的,所以说SPA是不利于SEO的。

vue如何解析template的。

vue官方有个webpack插件vue-loader,专门用来解析.vue后缀的文件,首先vue会将template模版转译成AST,也就是抽象语法书,再将ast作为参数传入render函数中,最终生成生成vdom进行渲染。

vue的自定义指令

就是一种让开发者自定义Vue-api的官方接口,可以让我们自己生成类似于v-bind,v-on之类的指令。他的语法是Vue.derective(),接收两个参数,第一个参数是指令名,第二个参数是生命周期hook,按顺序依次是bind,指令首次被绑定时,insert 组件插入父节点,update,组件更新时,unbind 组件卸载时

vue的单项数据流为什么不推荐子组件直接改变父组件数据?

因为在vue中是一个单向下行的数据流向,一个父组件的数组可能被多个自组件所引用,如果在子组件中改变数据引发父组件数据的变化可能会同时影响到其他子组件的数据渲染异常。为了避免这种不可控的情况,vue在子组件中改变props会爆出警告,正确的方法应该是emit一个事件,让父组件自己去执行。

Vue的依赖收集过程

在初始化组件的时候,会递归的遍历组件的data属性,通过defineproperty来实现数据的响应式,然后在渲染模版数据的时候会触发数据的get方法,从而完成依赖收集,所谓依赖收集就是把响应式数据以及相关的组件绑定,然后在更新数据触发set方法的时候触发绑定的更新函数完成视图的更新

vue react的异同

相同点
都把主要的功能放在核心库中 其他的路由或者状态管理放在第三方库中
都有自己的构建工具可以快速生成一个最佳项目模版
都使用了virtualdom提高渲染性能
都推荐将应用组件化编程,并且都实现了组件之间传参
不同
Vue有双向绑定的api,但是react实现双向绑定需要开发者手动实现
Virtualdom的实现方式不同,vue通过依赖收集可以在更新时更精确的更新对应的组件,而react会递归的更新组件以及所有子组件
编写模版的方式不同 vue使用更贴近于html语法的template模版语法,react通过jsx来编写组件结构.
由于react组件本质就是函数,所以可以轻易的实现高阶组件,而vue需要通过mixin来实现.

父子组件的生命周期执行顺序

创建
父beforeCreated
父created
父beforeMounted
子beforeCreated
子created
子beforeMounted
子mounted

更新
父beforeUpdate
子beforeUpdate
子updated
父updated

销毁
父beforeDestroyed
子beforeDestroyed
子destroyed
父destroyed

Vue之间的组件通信

父子之间的props通信
跨多层级的可以用attrs和$listener
跨层级还可以用inject和provider依赖注入
中央事件总线eventBus
vuex

Vue路由懒加载原理

利用webpack的代码分割 codeSplite和es6的动态加载实现

hash模式和history模式区别
Hash模式url上有#号符号, 它是利用路由的hash值去进行匹配显示页面.
History是利用h5的history Api来实现的,具体是利用pushState来实现页面跳转显示,会有兼容性的问题,如果服务端没有做兼容的话,刷新会造成404.

常见的路由守卫钩子

全局路由的有beforeEach afterEach
单个路由内的有beforeEnter
组件内的有beforeRouterEnter beforeRouteLeave

Vue的基本概念

States 状态库
mutations 同步改变状态
actions 异步改变状态
getters 状态的get方法
modules 模块化组件

为什么不能在mutations里面进行异步操作?

Vue中所有异步操作的唯一途径都是通过mutations,即使是action,也是在执行完异步任务之后通过mutation去改变状态,因为这样是能被devtool开发工具捕获到状态改变的流程,可以方便改变每一个状态的改变.

什么是虚拟dom?

本质上是一个描述真实dom节点的一个js对象,由于真实dom节点往往参杂了很多内置属性,导致节点比较“重”,用虚拟dom来描述真实dom就会显得比较轻量化,而且在dom更新的时候使用虚拟dom结合diff算法来动态化的计算出需要更新的节点会使dom更新更加高效.

虚拟dom一定比真实dom性能更好吗?

不一定,只是说在绝大部分的业务场景下提供更好的性能,因为虚拟dom的会结合diff算法来计算页面的变更部分,有一个比较的过程,但是如果直接操作dom的话,innerHtml无疑会比diff算法更加高效,比如在首次渲染页面时,直接操作dom的渲染流程是浏览器接受到渲染任务-〉开始渲染,而接入了虚拟dom之后的流程之后变成了浏览器接受到了渲染任务-〉构建虚拟dom-〉开始渲染.

vue3.0和vue2.0的区别?

1、Vue3.使用proxy取代了defineproperty来实现了数据的响应式,原因是definproperty响应式对象有缺陷,而且vue2响应式数组需要通过重写数组方法,但是使用proxy可以不用对对象和数组响应式分开处理
2、vue3对diff算法进行了优化,vue2会同级的比较每一个vdom节点,vue3会把不存在动态更新的vdom打上静态标记,以便在diff算法比较的过程中跳过这些节点提高性能
Vue3使用了ES6的模块系统实现了模块的按需导入,不需要的部分被tree Shaking掉了,体积比Vue2更小了
Vue2只支持选项式新增组件,Vue3提供了组合式新增组件的api

v-for中key的作用?

Vue在执行diff算法比较vdom时,会执行patch方法,patch方法会接受两个参数,分别是更新前后的vdom.首先会比较两个vdom是否相同,相同的vdom就会走复用流程提高效率,而比较vdom是否相同仅仅就比较两者的type以及key,算法就会默认两者的key相同从而误判定复用导致页面渲染异常.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/21840.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python SciPy 和 NumPy 版本冲突

UserWarning: A NumPy version >1.19.5 and <1.23.0 is required for this version of SciPy (detected version 1.17.2) warnings.warn(f"A NumPy version >{np_minversion} and <{np_maxversion}"在使用 Python 的科学计算库时&#xff0c;经常会遇到各…

CSAPP Lab04——Cache Lab大师手笔,匠心制作

浮沉浪似人潮 哪会没有思念 你我伤心到 讲不出再见 ——讲不出再见 完整代码见&#xff1a;CSAPP/cachelab-handout at main SnowLegend-star/CSAPP (github.com) Part A: Cache Simulator 这个lab描述背大锅&#xff0c;开始我是真有点没看懂题目的描述。特别是“M 20,1”“…

基于Nodejs的简易邮件SMTP服务器

仅用于内部开发环境无法访问邮件服务器的情况下&#xff0c;测试SMTP邮件发送有没有成功。收到邮件发送请求后仅打印内容和保存附件用于测试验证。 安装库 实验环境使用了Nodejs版本16。 npm install smtp-server mailparser JS版SMTP服务器代码 没有使用TSL/SSL&#xff0c…

构建大型语言模型(LLM)产品的实战指南

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

双击bat文件查看ip地址

echo off echo Running batch file as administrator...:: 下面这行是以管理员身份运行 ipconfig 命令&#xff0c;并将结果输出到控制台 cmd /c "ipconfig"echo Batch file execution completed. pause注意文件名不能为 ipconfig.bat 可以是 ipconfigs.bat 另一种…

【JavaScript】JS 的 btoa 和 atob 全局函数

在 JavaScript 中&#xff0c;btoa 和 atob 是两个处理 Base64 编码的全局函数&#xff0c;它们通常用于在浏览器环境中对二进制数据进行编码和解码。 不过&#xff0c;需要注意的是&#xff0c;这两个函数并非 JavaScript 标准规范&#xff08;ECMAScript&#xff09;的一部分…

MATLAB .m文件的命名规则

matlab的.m文件的命名规则&#xff1a; 文件名命名要用英文字符&#xff0c;首字符不能是数字或下划线。 文件名不能与matlab的内部函数名相同。 .m文件名的命名尽量不要是简单的英文单词&#xff0c;最好是由大小写英文/数字/下划线等组成。 原因是简单的单词命名容易与mat…

基于多尺度相关小波分解的单幅图像去雾和去噪方法(MATLAB)

小波变换具有优美的数学背景和强大的多分辨率分析能力。它集成和发展了短时傅里叶变换的思想并克服了其时间窗口不可变的缺点。小波变换通过使用具有局部感受野和多尺度的基函数。形成了同时具有局部和全局性质的信号表征。与DCT等全局变换相比&#xff0c;小波变换可以防止局部…

58、试除法求约数

试除法求约数 题目描述 给定n个正整数ai&#xff0c;对于每个整数ai,请你按照从小到大的顺序输出它的所有约数。 输入格式 第一行包含整数n。 接下来n行&#xff0c;每行包含一个整数ai。 输出格式 输出共n行&#xff0c;其中第 i 行输出第 i 个整数ai的所有约数。 数据…

oracle查看序列

在Oracle数据库中&#xff0c;查看序列的方式主要有以下几种&#xff1a; 查看当前用户下的所有序列名称&#xff1a; sql复制代码 SELECT sequence_name FROM user_sequences; 查看所有用户的序列&#xff1a; sql复制代码 SELECT sequence_name FROM all_sequences; 查看…

Java面试八股之Executors可以创建哪几种类型的线程池

Executors可以创建哪几种类型的线程池 newSingleThreadExecutor&#xff1a; 创建一个单线程的线程池&#xff0c;此线程池确保所有的任务都在同一个线程中按顺序执行。适用于需要保证任务顺序执行&#xff0c;或者在单线程中运行的任务。 newFixedThreadPool&#xff1a; …

知识蒸馏——讨论区

更多内容请了解&#xff1a; 知识蒸馏——基础知识 知识蒸馏——学生模型 知识蒸馏——代码实现 知识蒸馏——讨论区 知识蒸馏——讨论区 一、教师模型的预测结果&#xff08;软标签&#xff09;与传统标签的区别&#xff1f;二、教师模型的软标签与真实标签的关系三、为什么学…

YOLOv5改进 | Conv篇 | 利用YOLOv10提出的UIB模块二次创新C3(附代码 + 完整修改教程)

一、本文介绍 本文给大家带来的改进机制是利用利用YOLOv10提出的UIB模块二次创新C3助力YOLOv5进行有效涨点,其中C2fUIB模块所用到的CIB模块是一种紧凑的倒置块结构,它采用廉价的深度卷积进行空间混合,并采用成本效益高的点卷积进行通道混合。本文针对该方法给出多种使用方法…

每日两题 / 34. 在排序数组中查找元素的第一个和最后一个位置 33. 搜索旋转排序数组(LeetCode热题100)

34. 在排序数组中查找元素的第一个和最后一个位置 - 力扣&#xff08;LeetCode&#xff09; 根据二分函数&#xff0c;得到>target和<target的两个&#xff0c;分别是答案的l和r class Solution { public:vector<int> searchRange(vector<int>& nums,…

Python | Leetcode Python题解之第130题被围绕的区域

题目&#xff1a; 题解&#xff1a; class Solution:def solve(self, board: List[List[str]]) -> None:if not board:returnn, m len(board), len(board[0])que collections.deque()for i in range(n):if board[i][0] "O":que.append((i, 0))board[i][0] &q…

github有趣项目:Verilog在线仿真( DigitalJS+edaplayground)

DigitalJS https://github.com/tilk/digitaljs这个项目是一个用Javascript实现的数字电路模拟器。 它旨在模拟由硬件设计工具合成的电路 像 Yosys&#xff08;这里是 Github 存储库&#xff09;&#xff0c;它有一个配套项目 yosys2digitaljs&#xff0c;它可以转换 Yosys 将文…

前端学习日记Vue3---Day1

声明式渲染 使用简洁的模板语法&#xff0c;将数据与 DOM&#xff08;文档对象模型&#xff09;关联起来。通过这种方式&#xff0c;可以实现数据驱动的界面更新&#xff0c;简化开发流程。 示例 <!DOCTYPE html> <html lang"en"> <head><me…

awk的应用

步骤一&#xff1a;awk的基本用法 1&#xff09;基本操作方法 格式1&#xff1a;awk [选项] [条件]{指令} 文件 格式2&#xff1a;前置指令 | awk [选项] [条件]{指令} 其中&#xff0c;print 是最常用的编辑指令&#xff1b;若有多条编辑指令&#xff0c;可用分号分隔。 …

【多视图聚类】COMPLETER:Incomplete Multi-view Clustering via Contrastive Prediction

CVPR 2021 0.摘要 在本文中&#xff0c;我们研究了不完全多视图聚类分析中的两个具有挑战性的问题&#xff0c;即i&#xff09;如何在没有标签的帮助下学习不同视图之间的信息性和一致性表示&#xff0c;以及ii&#xff09;如何从数据中恢复缺失的视图。为此&#xff0c;我们…

PHP发票真假API在线文档、票据ocr识别、医疗票据查验

翔云人工智能开放平台提供详细的发票查验API在线开发文档&#xff0c;不仅包含了PHP语言&#xff0c;还包含Java、python、go、C#、C等众多的主流开发语言&#xff0c;便于有需要的用户快速的将发票查验功能集成到自己的系统或者应用中&#xff0c;极大的缩短了企业的开发时间和…