vue常见问题梳理

vue

• 生命周期

• 父子组件通信？

  • 父子组件通信
    • 父->子props，子->父 $on、$emit
    • 获取父子组件实例 $parent、$children
    • Ref 获取实例的方式调用组件的属性或者方法
    • Provide、inject 官方不推荐使用，但是写组件库时很常用
  • 兄弟组件通信
    • Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue
    • Vuex
  • 跨级组件通信
    • Vuex
    • $attrs、$listeners
    • Provide、inject

• slot好处

• MVVM数据劫持&监听

  • 2.0

  Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

  • 3.0

  Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

  Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

  判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测

  监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

  我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger

  再说一下vue2.x中如何监测数组变化

  使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

• nextTick知道吗，实现原理是什么？

在下次 DOM 更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用

Promise;MutationObserver;setImmediate如果以上都不行则采用setTimeout
定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

• VNode是什么？

• Data为什么是个函数？对象是引用类型

• v-if和v-show区别

• computed和watch区别？

• v-model原理

• vue模板编译原理？

• 遍历时为何要加key？

  • diff算法 vue2.0 和 3.0的区别？
  • 为什么不是一个一个遍历而是先要头尾比较？
  • 3.0的主要算法是？为什么要使用最长递增子序列？

• 虚拟Dom和key的作用？

• keep-alive

• Vue中组件生命周期调用顺序说一下

  组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

• SSR了解吗
  SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
  SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求

• 实现一个插件

• 实现一个组件

• 怎么实现页面缓存？vuex有何弊端？接入外部三方需要考虑哪些问题？

• vue跟jquery的区别

• bable stages 有几个阶段？bable是干嘛的？

• 配置路由 history跟hash有啥区别？
  location.hash的值实际就是URL中#后面的东西。
  history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()。

  • 又因为路径遇到什么问题吗？（访问空白）
  • 怎么解决？