三十七个常见Vue面试题,背就完事了三

十七、谈谈对组件的理解

  • 组件化开发能大幅提高应用开发效率、测试性、复用性
  • 常用的组件化技术:属性、自定义事件、插槽
  • 降低更新范围,值重新渲染变化的组件
  • 高内聚、低耦合、单向数据流

十八、请描述组件的渲染流程
产生组件虚拟节点 -> 创建组件的真实节点 -> 插入到页面


十九、请描述组件的更新流程
属性更新会触发patchVnode方法,组件的虚拟节点会调用prepatch钩子,然后更新属性,更新组件。


二十、异步组件原理
先渲染异步占位符节点 -> 组件加载完毕后调用forceUpdate强制更新。
二十一、函数组件的优势和原理

  • 函数式组件的特性:无状态、无生命周期、无this。因此性能会高一点。

正常的一个组件是一个类继承了Vue。
函数式组件,就是一个普通的函数。
二十二、组件的传值方式有哪些?

  1. props和emit:父组件向子组件传递数据,通过prop传递。子组件传递数据给父组件是通过emit: 父组件向子组件传递数据,通过prop传递。子组件传递数据给父组件是通过emit:父组件向子组件传递数据,通过prop传递。子组件传递数据给父组件是通过emit事件
  2. parent,parent,parent,children获取当前组件的父组件和当前组件的子组件
  3. attrs和attrs和attrs和listeners 。
  4. 父组件通过provide提供,子组件通过inject注入变量
  5. $ref获取实例
  6. eventBus平级组件数据传递
  7. Vuex

二十三、$attrs是为了解决什么问题出现的?
主要作用是为了实现批量传递数据。
provide/inject更适合应用在插件中,主要实现跨级数据传递。
二十四、v-for和v-if哪个优先级更高?
首先,v-for和v-if 不能在同一个标签中使用。
先处理v-for,再处理v-if。
如果同时遇到的时候,应该考虑先用计算属性处理数据,在进行v-for,可以减少循环次数。
二十五、v-mode是如何实现的?
在组件上用的v-model,是model和callback


在普通元素上用v-model,会生成指令,还可能因为不同的元素:

  • 生成value和input
  • 生成change和radio
  • 生成change和checked


指令在什么时候会调用?

源码:

二十六、Vue的普通Slot以及作用域Slot的区别
普通插槽
普通插槽是渲染后做替换的工作。父组件渲染完毕后,替换子组件的内容。


在模板编译的时候,处理组件中的子节点和slot标签


在创建元素的时候,用_t()方法方法来替换_v()的内容。


作用域插槽
作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。


作用域插槽的编译结果:

 双向数据绑定的原理

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数 据变动时发布消息给订阅者,触发相应的监听回调。主要分为以下几 个步骤:

1.需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter 这样的话,给这个对象的某个值赋值,就会 触发 setter,那么就能监听到了数据变化

2.compile 解析模板指令,将模板中的变量替换成数据,然后初始化 渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数 据的订阅者,一旦数据有变动,收到通知,更新视图

3.Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做 的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ② 自身必须有一个 update()方法 ③待属性变动 dep.notice()通知时,能调用自身的 update()方法,并触发 Compile 中绑定的回调,则成功 成身退。

4.MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通过 Observer 来监听自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input)-> 数据 model 变更的双向绑定效果。


http://www.niftyadmin.cn/n/4990002.html

相关文章

华为Mate60低调发布,你所不知道的高调真相?

华为Mate60 pro 这两天的劲爆新闻想必各位早已知晓,那就是华为Mate60真的来了!!!并且此款手机搭载了最新国产麒麟9000s芯片,该芯片重新定义了手机性能的巅峰。不仅在Geekbench测试中表现出色,还在实际应用…

word中标题及公式自动编号

word中公式自动编号 1. 实现目标2. 详细步骤2.1 添加自动编号功能2.2 输入标题并编号2.3 新建公式2.3.1 编辑公式2.3.4 公式编号的交叉引用2.3.5 公式位置变动以及更新正文中的编号 在word中自动编号公式一直是一个老大难问题,现在通过总结网友们提供的方法&#xf…

从代码设计看 Glide 之生命周期(上)

欢迎关注我的其他平台账号: 掘金:0xforee 个人博客:0xforee’s blog 微信公众号: 上期我们探索了一个具备核心功能的图片加载库该怎么设计。这一期我们来看看如何给这个图片加载库关联生命周期管理。 欢迎关注本系列其他文章&…

微信小程序校园生活小助手+后台管理系统|前后分离VUE

《微信小程序校园生活小助手后台管理系统|前后分离VUE》该项目含有源码、文档等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&#…

【计算机组成 课程笔记】3.1 算数运算和逻辑运算

课程链接: 计算机组成_北京大学_中国大学MOOC(慕课) 3 - 1 - 301-算术运算和逻辑运算(13-7--)_哔哩哔哩_bilibili 计算机的核心功能就是运算,运算的基本类型包括算数运算和逻辑运算。想要了解计算机是如何实现运算的,我…

【Java 基础篇】Java 运算符宝典:Java编程的关键

在Java编程中,运算符是用于执行各种操作的特殊符号。它们可以用于操作各种数据类型,执行算术、逻辑和比较等操作。本篇博客将详细介绍Java中常见的运算符,以及它们的使用和示例。 算术运算符 算术运算符用于执行基本的数学运算,…

Collections和CollectionUtils集合操作

0.引入依赖 <dependency><groupId>org.apache.commons</groupId><artifactId>commons-collections4</artifactId><version>4.4</version> </dependency> 一.Collections用法&#xff1a; 01、排序操作 reverse(List list)…

无涯教程-Flutter - 简介

Flutter是一个由谷歌开发的开源移动应用软件开发工具包&#xff0c;用于为Android、iOS、 Windows、Mac、Linux、Google Fuchsia开发应用。 通常&#xff0c;创建移动应用程序是一个非常复杂和具有挑战性的任务。有许多框架可用&#xff0c;它提供了开发移动应用程序的出色函数…