vue相关问题总结

综述：红色部分是需要去加深理解的，要重点关注。对于vue基础知识的认识，要知道其作用？哪种场景下使用？怎样使用？实现的原理和细节？目前存在的局限？未来发展方向？去理解。对于vue的基础知识，可以参考我的另一篇博客：vue基础知识汇总

1.如何理解MVVM？

2.响应式数据的原理？

3.vue中如何检测数组的变化？如何修改数组和对象后，实现视图的自动响应？

4.vue为何采用异步渲染？

5.vue.nextTick的应用场景是？实现原理？这里涉及的四个浏览器api具体的作用是什么？

6.vue的生命周期？我们一般在各个周期做什么事情？

7.ajax放到哪个生命周期中?

8.什么时候需要使用beforeDestory?

9.vue父子组件生命周期调用顺序？为啥是这样子执行呢？想一下？

通过上边一步步的debugger，我们可以发现父子组件在加载的时候，执行的先后顺序为父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。

10.vue中computed的特点是？和watch之间的区别？

11.watch中deep:true如何实现？immetated:true具体的作用？在什么场景下会使用？

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

12.vue中事件绑定的原理？这个问题可深可浅？如何将其本质用通俗语言说明？让别人听懂且不啰嗦？

Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符，基本流程是进行模板编译生成AST，生成render函数后并执行得到VNode，VNode生成真实DOM节点或者组件时候使用addEventListener方法进行事件绑定。

13.vue中v-html会导致的问题？

容易造成xss攻击，这样什么内容都容易插入到页面中去了,容易将危害代码注入到页面中。

14.v-if和v-show的区别是？

15.v-if和v-for为何不能连用？
v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。
原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

  <ul>
<li
  v-for="user in users"
  v-if="user.isActive"
  :key="user.id"
>
  {{ user.name }}
</li>
  </ul>

如上情况，即使100个user中之需要使用一个数据，也会循环整个数组。
正确：

16.v-model实现原理以及如何自定义v-model?

17.data为啥是个函数？

18.vue组件的通信方法？有哪几种方式呢？说下深层次的实现？

19.什么是作用域插槽？slot和scope-slot的主要作用是？两者的区别是？

个人理解
插槽就是在子组件里做定制化内容，当一个复用的组件内有一部分需要针对不同的场景有所差异，且无规律可循时，我们就可以使用<slot></slot>让父组件自定义内容。
这种时候又可以分为两个场景：

1. 内容与子组件内的数据无关
2. 内容与子组件内的数据有关
   前者使用普通插槽，后者使用作用域插槽，作用域插槽的作用就是拿到子组件的数据
   具体介绍及使用可参考官方文档
   https://cn.vuejs.org/v2/guide/components-slots.html

区别

普通插槽在父组件初始化期间会编译成文本子节点存起来，在子组件渲染的时候直接将插槽替换成父组件里渲染的节点
作用域插槽在父组件初始化期间会编译成一个函数，在子组件初始化的时候执行这个函数生成vnode再进行渲染。

下面会针对两种插槽看用vue模板编译器对模板编译后的render函数
了解一下vue的渲染函数的缩写。

20.用vnode来描述一个dom结构？

21.diff算法的时间复杂度？为啥由原来的O(N3)变成了O(n)?

参考文章：

https://juejin.cn/post/6892671384976097287

22.简述diff算法的原理？这个好好总结下？

23.v-for中为什么要用key?

24.描述组件渲染和更新过程？细节是什么？

 

25.vue的模板编译原理？

 

26.vue中常见的性能优化？

27.vue中相同逻辑如何抽离？有哪些方式呢？

28.为什么用异步组件？异步组件和同步组件之间的区别是？

29.谈谈keep-alive的了解？实现原理是什么？两个生命周期和属性分别是什么？具体在实际开发中的应用例子有哪些？

 

30.实现hash和history路由？两者的区别是？如果是hash模式？pushState能监控到吗？

31.vue-router中导航守卫有哪些？在业务开发中主要用来做什么？可以举个实际应用的例子？

31.action和mutation之间的区别是？dispatch和commit区别？为啥要拆分出来一个同步一个异步操作呢？

32.简述vuex的工作原理？为何能够实现数据的响应式呢？

33.vue3.0有哪些改进？为了解决啥问题呢？为啥要这样改？
1）使用proxy代替Object.propertyDefined来实现新的响应式方案
2）使用typeScript，利用ts的优势
3）支持composition API来解决一些存在的问题。使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的。
4） vdom的对比算法更新，只更新vdom的绑定了动态数据的部分

34.vue的核心是什么？和多页面应用相比较，他的优势是什么？

参考资料：https://www.bilibili.com/video/BV11E411x74r?p=4