admin 管理员组文章数量: 1086019
2024年3月22日发(作者：二进制10110001转十进制)
nextjs面试题
1.1. 的特点
1.2. 双向绑定的原理
1.3. 3.0 放弃defineProperty, 使用Proxy的原因
1.4. Vue 2 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解
决？
1.5. Computed和Watch的区别
1.6. Computed 和 Methods 的区别
1.7. 虚拟DOM，diff算法
1.8. 为何需要Virtual DOM？
1.9. 过滤器 (Filter)
1.10. 常见的事件修饰符及其作用
1.11. v-show指令和v-if指令的区别是什么？
1.12. v-model 是如何实现的，语法糖实际是什么
1.13. data为什么是一个函数而不是对象
1.14. Vue template 到 render 的过程
1.15. Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲
染吗？
1.16. axios是什么
1.17. sass是什么？如何在vue中安装和使用？
1.18. 页面闪烁
1.19. 如何解决数据层级结构太深的问题
1.20. 在 Vue. js开发环境下调用API接口，如何避免跨域
1.21. 批量异步更新策略
1.22. vue 的 nextTick 方法的实现原理
1.23. Vue 组件 data 为什么必须是函数 ?
1.24. v-if和v-for一起使用的弊端及解决办法
1.25. vue常用指令
1.26. 组件传值方式有哪些
1.27. vue-loader是什么？使用它的用途有哪些？
2. 组件 Component
2.1. vue中如何编写可复用的组件 （编写组件的原则）
2.2. 如何让CSS只在当前组件中起作用？
2.3. keep-alive是什么？
2.4. 如何在 Vue. js动态插入图片
2.5. 父子组件的生命周期顺序
3. Vuex
3.1. vuex的核心概念
3.2. vuex是什么？怎么使用？哪种功能场景使用它？
3.3. 多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们
之间还有一些公共的状态需要维护，如何思考这块
4. Router
4.1. vue-router路由的两种模式
4.2. vue-router如何定义嵌套路由
4.3. vue-router有哪几种导航钩子？
4.4. $route和$router的区别
4.5. 路由之间跳转的方式
4.6. active-class是哪个组件的属性
易用： 简单，易学，上手快
灵活： （渐进式）不断繁荣的生态系统，可以在一个库和一套完整框架之间
自如伸缩。
高效： 20kB min+gzip 运行大小；超快虚拟 DOM；最省心的优化
双向绑定：开发效率高
基于组件的代码共享
Web项目工程化，增加可读性、可维护性
2.0 采用数据劫持（Proxy 模式）结合发布者-订阅者模式（PubSub
模式）的方式，通过 Property()来劫持各个属性的 setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。
每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属
性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从
而致使它关联的组件得以更新。
3.0, 放弃了Property ，使用更快的ES6原生 Proxy (访
问对象拦截器, 也称代理器)
步骤：
需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上
setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就
能监听到了数据变化
compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面
视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据
有变动，收到通知，更新视图
Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()
方法 ③待属性变动()通知时，能调用自身的update()方法，并触发
Compile中绑定的回调，则功成身退。
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，
通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指
令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变
化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
Property缺陷
监控到数组下标的变化时，开销很大。所以放弃了下标变化的检测；
Property只能劫持对象的属性，而Proxy是直接代理对象。
Property需要遍历对象的每个属性，如果属性值也是对象，则需要
深度遍历。而 Proxy 直接代理对象，不需要遍历操作。
Property对新增属性需要手动进行Observe。vue2时需要使
用 vm.$set 才能保证新增的属性也是响应式
Proxy支持13种拦截操作，这是defineProperty所不具有的
Proxy 作为新标准，长远来看，JS引擎会继续优化 Proxy，但 getter 和
setter 基本不会再有针对性优化
视图并未刷新。这是因为在Vue实例创建时，新属性并未声明，因此就没有
被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue
的全局 api $set()：
computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它
依赖的 属性值发生改变,下一次获取 computed 的值时才会重新计算 computed
的值。
watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每
当监听的数据变化时都会执行回调进行后续操作。
运用场景：
当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可
以利用 computed 的缓存特性,避免每次获取值时,都要重新计算。
当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用
watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,
并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
多个因素影响一个显示，用Computed；一个因素的变化影响多个其他因素、
显示，用Watch;
computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生
改变时才会重新求值对于 method ，只要发生重新渲染，
method 调用总会执行该函数
（1）让我们不用直接操作DOM元素，只操作数据便可以重新渲染页面
（2）虚拟dom是为了解决浏览器性能问题而被设计出来的
当操作数据时，将改变的dom元素缓存起来，都计算完后再通过比较映射到
真实的dom树上
（3）diff算法比较新旧虚拟dom。如果节点类型相同，则比较数据，修改数
据；如果节点不同，直接干掉节点及所有子节点，插入新的节点；如果给每个节点
都设置了唯一的key，就可以准确的找到需要改变的内容，否则就会出现修改一个
地方导致其他地方都改变的情况。比如A-B-C-D, 我要插入新节点A-B-M-C-D,实
际上改变的了C和D。但是设置了key，就可以准确的找到B C并插入
具备跨平台的优势
操作 DOM 慢，js运行效率高。我们可以将DOM对比操作放在JS层，提高
效率。
提升渲染性能
在Vue中使用filters来过滤(格式化)数据，filters不会修改数据，而是过滤
(格式化)数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是
通过修改数据来处理数据格式的输出显示。
使用场景： 比如需要处理时间、数字等的的显示格式；
：等同于 JavaScript 中的 opagation() ，防止事件冒泡；
：等同于 JavaScript 中的 tDefault() ，防止执行预设的行为
（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
：当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则
由外而内触发。如 div1中嵌套div2中嵌套e中嵌套div4，那么执行
顺序为：div3=》div4=》div2=》div1
：只会触发自己范围内的事件，不包含子元素；
：只会触发一次。
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切
换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的
显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏
时，使用v-if更加合理。
作用在表单元素上等同于
作用在组件上, 本质是一个父子组件通信的语法糖，通过prop和$.emit实现,
等同于
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只
要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。
而在Vue中，我们更多的是想要复用组件，那就需要每个组件都有自己的数
据，这样组件之间才不会相互干扰。
所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返
回值的形式定义，这样当我们每次复用组件的时候，就会返回一个新的data，也
就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其
他组件的正常运行。
调用parse方法将template转化为ast（抽象语法树, abstract syntax tree）
对静态节点做优化。如果为静态节点，他们生成的DOM永远不会改变，这
对运行时模板更新起到了极大的优化作用。
版权声明：本文标题：nextjs面试题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1711082128a587483.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论