首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue面试常见考察点总结

,不同则删除重新创建如果双方都是文本则更新文本内容如果双方都是元素节点则递归更新子元素,同时更新元素属性更新子节点时又分了几种情况新的子节点是文本,老的子节点是数组则清空,并设置文本;新的子节点是文本,...回答范例如果某个组件通过组件名称引用它自己,这种情况就是递归组件。实际开发中类似Tree、Menu这类组件,它们的节点往往包含子节点,子节点结构和父节点往往是相同的。...两者都支持字符串或正则表达式,include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高对应两个钩子函数...,相同则调用patchVnode方法patchVnode做了以下操作:找到对应的真实dom,称为el如果都有都有文本节点且不相等,将el文本节点设置为Vnode的文本节点如果oldVnode有子节点而VNode...没有,则删除el子节点如果oldVnode没有子节点而VNode有,则将VNode的子节点真实化后添加到el如果两者都有子节点,则执行updateChildren函数比较子节点updateChildren

85030

探讨:围绕 props 阐述 React 通信

如果要转换,过滤,或者统计子节点,你应该使用 Children 方法。 实际操作过程中,children 在底层常常被表示为数组。...但是如果这里只有一个子节点,那么 React 将不会创建数组,因为这将导致不必要的内存开销。...它不会更改在该函数调用前就已存在的对象或变量。 输入相同,则输出相同。给定相同的输入,纯函数应总是返回相同的结果。 不更改在该函数调用前就已存在的对象或变量 => 对于 props 同样至关重要!...这段代码的问题在于,如果父组件稍后传递不同的 message 值(例如,将其从 'world' 更改为 'ligang'),则 msg state 变量将不会更新!...如果你想给它起一个更短的名称,请使用常量: export default ({message}: {message: string}) => { const msg = message; 这种写法就不会与从父组件传递的属性失去同步

8600
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue面试考察知识点全梳理

    ;调用方法将总会再次执行函数;延时计算: 计算属性主要对响应式属性的依赖,没有响应式依赖不会自动更新:如这样只会计算一次computed: {now: ()=>Date.now()}值得注意的是计算属性可以通过返回一个函数形成闭包来实现传参...答:undefined新旧节点不同:创建新节点 ➜ 更新父占位符节点 ➜ 删除旧节点;undefined新旧节点相同且没有子节点:不变;undefined新旧节点相同且都有子节点:遍历子节点同级比较,做移动...;如果是普通元素非静态节点,则遍历它的所有 children,递归执行静态节点的标记,子节点有不是静态的情况,则它的父节点也为非静态。...:undefined message = e"/> 组件可以配置子组件接收的 prop 名称和派发的事件名称{ props: [...如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。

    80220

    vue面试考察知识点全梳理

    ;调用方法将总会再次执行函数;延时计算: 计算属性主要对响应式属性的依赖,没有响应式依赖不会自动更新:如这样只会计算一次computed: {now: ()=>Date.now()}值得注意的是计算属性可以通过返回一个函数形成闭包来实现传参...答:undefined新旧节点不同:创建新节点 ➜ 更新父占位符节点 ➜ 删除旧节点;undefined新旧节点相同且没有子节点:不变;undefined新旧节点相同且都有子节点:遍历子节点同级比较,做移动...;如果是普通元素非静态节点,则遍历它的所有 children,递归执行静态节点的标记,子节点有不是静态的情况,则它的父节点也为非静态。...:undefined message = e"/> 组件可以配置子组件接收的 prop 名称和派发的事件名称{ props: [...如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。

    85520

    再次入门 react ,不一样的收获

    HTML 属性名称的命名约定(例如,JSX 里的 class 变成了 className,而 tabindex 则变为 tabIndex。)...React 应用只会调用一次 ReactDOM.render(),页面渲染之后,如果我们想要修改 ui,就需要把代码封装到有状态组件中 条件处理 和 javascript 上面的差不多 // 三目运算...这个就像 vue 里面的插槽一样,父组件给子组件传递一段 JSX 或者 DOM 标签 // 子组件 function FancyBorder(props) { return ( 组件也可有有生命周期,使用起来更加方便。 函数式组件的首字母要大写,小写的函数,不会被当作组件渲染的。...函数组件是都决不能修改自身的 props,是一个“纯函数”,相同的输入一定是相同的输出 function Avatar(props) { return ( <img className="Avatar

    1.7K10

    vue面试考察知识点全梳理3

    ;调用方法将总会再次执行函数;延时计算: 计算属性主要对响应式属性的依赖,没有响应式依赖不会自动更新:如这样只会计算一次computed: {now: ()=>Date.now()}值得注意的是计算属性可以通过返回一个函数形成闭包来实现传参...答:undefined新旧节点不同:创建新节点 ➜ 更新父占位符节点 ➜ 删除旧节点;undefined新旧节点相同且没有子节点:不变;undefined新旧节点相同且都有子节点:遍历子节点同级比较,做移动...;如果是普通元素非静态节点,则遍历它的所有 children,递归执行静态节点的标记,子节点有不是静态的情况,则它的父节点也为非静态。...:undefined message = e"/> 组件可以配置子组件接收的 prop 名称和派发的事件名称{ props: [...如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。

    84230

    Unity基础教程系列(新)(六)——Jobs(Animating a Fractal)

    不同之处在于Start不会立即被调用,而是在组件有或没有第一次在组件上调用Update方法之前立即调用。此时创建的新组件将在下一帧进行首次更新。这意味着实例化每个帧只会发生一次。 ?...我们再次从第二个级别开始循环,因为根部分不会移动并且始终位于原点。 ? 要相对于其父级放置部件,我们还需要访问父级的Transform组件。为此,还要追踪父部件数组。...除此之外,如果我们通过检查器禁用组件,也会调用OnValidate。这将触发分形的重置,然后再次被禁用。我们还可以通过检查Fractal组件的enabled属性来避免这种情况的发生。...如果多个进程并行修改同一数据,那么它将首先执行任意操作。如果两个进程设置相同的数组元素,则最后一个赢。如果一个进程获得与另一个进程相同的元素,则它将获得旧值或新值。...但是,当尝试对float4x4和四元数类型调用某些方法时,这将导致冲突,因为数学中的方法与这些类型具有完全相同的名称。这将使编译器抱怨我们试图在方法上调用方法,这是不可以的。

    3.6K31

    浅谈 React 生命周期

    render() 函数应该为纯函数,这意味着在不修改组件 state 的情况下,每次调用时都返回相同的结果,并且它不会直接与浏览器交互。...「父子组件生命周期执行顺序总结」: 当子组件自身状态改变时,不会对父组件产生副作用的情况下,父组件不会进行更新,即不会触发父组件的生命周期 当父组件中状态发生变化(包括子组件的挂载以及卸载)时,会触发自身对应的生命周期以及子组件的更新...当子组件进行卸载时,只会执行自身的 componentWillUnmount 生命周期,不会再触发别的生命周期 render 以及 render 之前的生命周期,则 父组件先执行 render 以及...Child 组件:componentDidUpdate 三、修改父组件中传入子组件的 props 点击父组件中的 [改变传给子组件的属性 count] 按钮,则界面上 [父组件传过来的属性 count...五、重新挂载子组件 再次点击父组件中的 [卸载 / 挂载子组件] 按钮,则界面上子组件会重新渲染出来,控制台的打印顺序为: Parent 组件:getDerivedStateFromProps Parent

    2.3K20

    vue源码分析-keep-alive原理(上)

    data = {}; if (slot) { data.slot = slot; } }}13.3 初次渲染keep-alive之所以特别,是因为它不会重复渲染相同的组件...13.3.1 流程和渲染普通组件相同的是,Vue会拿到前面生成的Vnode对象执行真实节点创建的过程,也就是熟悉的patch过程,patch执行阶段会调用createElm创建真实dom,在创建节点途中...include规定了只有名称匹配的组件才会被缓存,exclude规定了任何名称匹配的组件都不会被缓存。...如果忽略步骤的分析,只对初次渲染流程做一个总结:内置的keep-alive组件,让子组件在第一次渲染的时候将vnode和真实的elm进行了缓存。...,并为其$children属性添加该子组件vnode,如果在反向找父组件的过程中,父组件拥有abstract属性,即可判定该组件为抽象组件,此时利用parent的链条往上寻找,直到组件不是抽象组件为止。

    55720

    微信小程序文档学习笔记

    42.wx:if 如果为false 则不渲染 hidden 先渲染,如果为false 则隐藏 如果频繁切换,则使用hidden 如果不过多改变,则使用wx:if ---- 模板 43.模板拥有自己的作用域...(导入外部的UI库) ---- 组件模板 53.在组件模板中可以提供一个 节点,用于承载组件引用时提供的子节点。...3)子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。 4)继承样式,如 font 、 color ,会从组件外继承到组件内。...(如果第一次打开,就是直接下载新版本。 如果以前打开过,就先用老包,然后后台异步下载新包,再次冷启动后时替换) 73....GZIP 对基于文本资源的压缩效果最好,在压缩较大文件时往往可高达 70%-80% 的压缩率,而如果对已经压缩的资源(例如大多数的图片格式)则效果甚微。

    1.2K10

    滴滴前端高频vue面试题(边面边更)_2023-03-13

    ,不同则删除重新创建如果双方都是文本则更新文本内容如果双方都是元素节点则递归更新子元素,同时更新元素属性更新子节点时又分了几种情况新的子节点是文本,老的子节点是数组则清空,并设置文本;新的子节点是文本,...老的子节点是文本则直接更新文本;新的子节点是数组,老的子节点是文本则清空文本,并创建新子节点数组中的子元素;新的子节点是数组,老的子节点也是数组,那么比较两组子节点,更新细节blablavue3中引入的更新策略...两者都支持字符串或正则表达式,include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高对应两个钩子函数...name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值),匿名组件不能被匹配设置了 keep-alive 缓存的组件,会多出两个生命周期钩子(activated...,则表示在新的缓存规则下该组件已经不需要被缓存,则调用pruneCacheEntry函数将其从this.cache对象剔除即可关于keep-alive的最强大缓存功能是在render函数中实现首先获取组件的

    68620

    优化 React APP 的 10 种方法

    如果键入3,则expFunc将运行3分钟,如果3再次键入,将再次花费3分钟。...如果连续按下按钮,则状态始终保持不变,但是尽管传递给其道具的状态相同,但My组件仍将重新渲染。如果App和My下有成千上万个组件,这将是一个巨大的性能瓶颈。...React.memo通过将其当前/下一个道具与上一个道具进行比较来记住一个组件,如果它们相同,则不会重新渲染该组件。...当要重新渲染组件时,React会将其先前的数据(属性和上下文)与当前数据(属性和上下文)进行比较,如果它们相同,则不会进行重新渲染,但是如果存在差异,则该组件并重新渲染其子级。...只要重新渲染组件,就会调用shouldComponentUpdate,如果返回true,则重新渲染组件;如果为false,则取消重新渲染。

    33.9K20

    android service详解(1)

    * 如果服务已在运行,则不会调用此方法。...如果其中一个是“false”,则服务被禁用 exported 设置其他应用程序的组件是否可以调用本服务或与其交互,如果可以,则为“true”。...如果startService(),bindService()或stopService()的调用者没有被授予此权限,则该方法将不会工作,并且Intent对象不会传递到服务中 process 用来运行服务的进程的名称...通常,应用程序的所有组件都运行在应用程序创建的默认进程中,它与应用程序包名具有相同的名称。...然后,如果在您能够调用 stopSelf(int) 之前服务收到了新的启动请求,ID 就不匹配,服务也就不会停止。 注意:为了避免浪费系统资源和消耗电池电量,应用必须在工作完成之后停止其服务。

    1.4K20

    美团前端常见vue面试题(必备)_2023-02-28

    ,可以通过 v-model属性来配置子组件接收的prop名称,以及派发的事件名称。...) { // 并且子节点不完全一致,则调用updateChildren if (oldCh !...,则直接更新dom的文本内容为新节点的文本内容 新节点和旧节点如果都有子节点,则处理比较更新子节点 只有新节点有子节点,旧节点没有,那么不用比较了,所有节点都是全新的,所以直接全部新建就好了,新建是指创建出所有新...,相同则调用patchVnode方法 patchVnode做了以下操作: 找到对应的真实dom,称为el 如果都有都有文本节点且不相等,将el文本节点设置为Vnode的文本节点 如果oldVnode有子节点而...VNode没有,则删除el子节点 如果oldVnode没有子节点而VNode有,则将VNode的子节点真实化后添加到el 如果两者都有子节点,则执行updateChildren函数比较子节点 updateChildren

    71120

    实战 React 18 中的 Suspense

    如果你在应用程序中启用StrictMode,在开发模式下,你将发现使用useEffect会被调用两次,因为现在React会mount 组件、卸载它,然后再次 mount 它,以检查代码是否运行正常。...(因为它仍处于加载状态或者由于加载失败),则显示fallback;如果成功解析,则显示子组件。...在组件中读取数据 当获取方面的所有内容都准备好后,我们来在组件中使用它。假设有一个简单的组件,只需从某个接口读取名称列表并打印。...不同于习惯中在组件中通过useEffect钩子调用 fetch 的做法,这一次我们要直接在组件开始时(放在任何 hooks 之外),使用我们在包装器中导出的read方法来调用请求,因此我们的Names组件大概是这个样子的...或其他什么你需要的自定义组件。 结论 长时间使用useEffect以实现相同的结果后,当我第一次看到 Suspanse 这种用法时,我对这种新方法有些怀疑。包装获取库的整个过程有点让人生疑。

    40910

    Inno Setup 3 :语法解析(二

    带有两个子组件的"help"组件仅在用户选择"full"类型时安装。 下列是所支持的参数列表: Name(必须的) 组件的内部名称。 在组件名称中的 \ 或 / 字符符合计数是调用组件的层次。...任何在层次 1 或更高层次的组件是子组件。在子组件前列出的小于子组件层次的组件是上级组件。其他有相同上级组件的组件之间称为同级组件。 如果上级组件未选定,则不能选定它的子组件。...如果所有的子组件均未选定,则上级组件也不能选定,除非Components参数引用上级组件或上级组件包含checkablealone标记。...在组件名称中的 \ 或 / 字符符合计数是调用组件的层次。任何在层次 1 或更高层次的组件是子组件。在子组件前列出的小于子组件层次的组件是上级组件。其他有相同上级组件的组件之间称为同级组件。   ...如果上级组件未选定,则不能选定它的子组件。如果所有的子组件均未选定,则上级组件也不能选定,除非Components参数引用上级组件或上级组件包含checkablealone标记。

    2.5K10

    前端面经(2)

    vue组件的通信方式父子组件通信父->子props,子->父 $on、$emit` 获取父子组件实例 parent、parent、children Ref 获取实例的方式调用组件的属性或者方法 Provide...任何名称匹配的组件都不会被缓存max 数字、最多可以缓存多少组件实例vuex、vue-router实现原理vuex是一个专门为vue.js应用程序开发的状态管理库。...新老节点均有子节点,则对子节点进行diff操作,调用updatechidren 如果老节点没有子节点而新节点有子节点,先清空老节点的文本内容,然后为其新增子节点 如果新节点没有子节点,而老节点有子节点的时候...`HTTP`无需证书,而HTTPS 需要CA的SSL证书GET和POST区别(高频)1.GET在浏览器回退不会再次请求,POST会再次提交请求2.GET请求会被浏览器主动缓存,POST不会,要手动设置3...通常判断跨域的依据是协议、域名、端口号是否相同,不同则跨域。同源策略是对js脚本的一种限制,并不是对浏览器的限制,像img,script脚本请求不会有跨域限制。

    1.3K60

    Vue前端面试2021-017

    在组件的嵌套关系中,父组件一般通过自定义属性的形式将数据传递给子组件 Vue中规范了父组件传递数据给子组件,建议单向数据绑定;如果子组件中需要使用父组件的数据作为初始值,可以通过data()中的自定义变量进行数据接受...;如果子组件中需要父组件的数据作为运算数据,可以通过computed计算属性进行数据的获取!...子组件是通过自定义事件将数据传递给父组件,父组件需要监听子组件的自定义事件,然后通过事件处理函数获取子组件传递的数据 自定义事件的名称必须全部匹配的情况下才能触发和正确监听,包括大小写字符不存在自动转换的操作...;如果数据没有发生变化,调用执行时会直接使用上次缓存的计算结果,不会再次执行运算 7、计算属性和普通函数的区别是什么?...计算属性是Vue实例中声明在computed上的配置对象,普通函数主要声明在Vue实例的methods配置选项上; 普通函数必须通过函数名称进行调用才能执行,每次调用都会重复执行函数内部的所有代码;计算属性可以当成普通属性一样使用

    1.1K20

    常考vue面试题(附答案)

    ,不同则删除重新创建如果双方都是文本则更新文本内容如果双方都是元素节点则递归更新子元素,同时更新元素属性更新子节点时又分了几种情况新的子节点是文本,老的子节点是数组则清空,并设置文本;新的子节点是文本,...老的子节点是文本则直接更新文本;新的子节点是数组,老的子节点是文本则清空文本,并创建新子节点数组中的子元素;新的子节点是数组,老的子节点也是数组,那么比较两组子节点,更新细节blablavue3中引入的更新策略...回答范例如果某个组件通过组件名称引用它自己,这种情况就是递归组件。实际开发中类似Tree、Menu这类组件,它们的节点往往包含子节点,子节点结构和父节点往往是相同的。...(1)keep-alivekeep-alive有以下三个属性:include 字符串或正则表达式,只有名称匹配的组件会被匹配;exclude 字符串或正则表达式,任何名称匹配的组件都不会被缓存;max...如果缓存对象内存在,则直接从缓存对象中获取组件实例给 vnode ,不存在则添加到缓存对象中。 5.最大缓存数量,当缓存组件数量超过 max 值时,清除 keys 数组内第一个组件。

    67720

    vue高频面试题合集(四)附答案

    ,则删除该节点重新创建节点进行替换如果为相同节点,进行patchVnode,判断如何对该节点的子节点进行处理,先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点,将旧的子节点移除...)比较如果都有子节点,则进行updateChildren,判断如何对这些新老节点的子节点进行操作(diff核心)。...(1)keep-alivekeep-alive有以下三个属性:include 字符串或正则表达式,只有名称匹配的组件会被匹配;exclude 字符串或正则表达式,任何名称匹配的组件都不会被缓存;max...获取组件实例 key ,如果有获取实例的 key,否则重新生成。key生成规则,cid +"∶∶"+ tag ,仅靠cid是不够的,因为相同的构造函数可以注册为不同的本地组件。...如果缓存对象内存在,则直接从缓存对象中获取组件实例给 vnode ,不存在则添加到缓存对象中。 5.最大缓存数量,当缓存组件数量超过 max 值时,清除 keys 数组内第一个组件。

    72440

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券