vue相关基础知识

vue $nextTick()

  等待下一次dom更新刷新的方法

  使用场景：1、created中想要获取dom时  2、响应式数据变化后获取dom更新状态，比如希望获取列表更新后的高度

keep-alive

  1、开发中缓存组件使用keep-alive组件，是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁

  这样的组件切换过程中将状态保留在内存中，防止重复渲染

  2、结合属性include和exclude可以明确指定缓存那些组件或排除缓存指定组件。vue3中结合vue-router时发送变化较大，之前是keep-alive

  包裹router-view，现在需要反过来用router-view包裹keep-alive

  3、缓存后如果想获取数据，解决方案有一下两种

      beforeRouteEnter

      actived：在keep-alive缓存的组件被激活时，会执行actived钩子

  4、keep-alive是一个通用组件，内部定义了一个map，缓存创建过的组件实例，返回的渲染函数内部会查找内嵌的component组件对应的组件vnode

  如果该组件在map中存在就直接返回他，由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行

 

Vue实例挂载过程发生了什么

  1、挂载过程是指app.mount()过程，这个是个初始化过程，整体上做了两件事，初始化和建立更新机制

  2、初始化会创建组件实例、初始化组件状态、创建各种响应式数据

  3、建立更新机制这一步会立即执行一次组件更新函数，这会首次执行组件渲染函数并执行patch将前面获得vnode转换为dom；同时首次执行渲染函数会

  创建他内部响应式数据和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数

Vue3设计目标好优化点

  1、改进点：易用性、框架性能、扩展性、可维护性、开发体验

  2、易用性方面主要是API简化，例如v-model在3中变成了2中v-model和sync的结合体，用户不用区分两者不同，也不用选择困难。类似的简化还有用于渲染函数内部生成VNode的h(type,props,children)

  )'其中props不用区分属性、特性、事件等，框架替我们判断，易用性大增

  3、开发体验方面，新组件teleport传送门、fragments、suspense等都会简化特定场景的代码编写 SFC Composition API语法提升开发体验

  4、扩展性方面提升如独立的reactivity模块，custom renderer API等

  5、可维护性主要是Composition API更容易编写高复用性的业务逻辑，还有对TS支持的提升

  6、性能方面的改进也比较显著，例如编译期优化，基于proxy响应式系统

proxy和defineProperty的区别

  区别一：defineProperty 是对属性劫持，proxy 是对代理对象

  区别二：defineProperty 无法监听对象新增属性，proxy 可以

  区别三：defineProperty 无法监听对象删除属性，proxy 可以

  区别四：defineProperty 不能监听数组下标改变值的变化，proxy 可以且不需要对数组的方法进行重载

vue常见优化方法

  1、最常见的路由懒加载：有效拆分App尺寸，访问时才异步加载

  const router=createRouter({

    routes:[

      //借助webpack的import()实现异步组件

      {path:'/foo',component:()=>import('./Foo.vue')}

    ]

  })

  2、keep-alive缓存页面：避免重复创建组件实例，且能保留缓存组件状态

  3、使用v-show复用dom：避免重复创建组件

  4、v-once和v-memo：不再变化的数据使用v-once

  5、长列表性能优化：如果是大数据长列表，可采用虚拟滚动，只渲染部分区域内容(vue-virtual-scroller/vue-virtual-grid)

  6、事件的销毁

  7、图片懒加载

  8、SSR服务端渲染

 

Vue组件为什么只有一个根节点

  1、2中组件确实只能有一个根节点，但3中组件可以多根节点

  2、之所以需要这样是因为vdom是一个单根树形结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个vdom，自然应该满足这个需求

  3、3中之所以可以写多个根节点，是因为引入了Fragment的概念，这是一个抽象的节点，如果发现组件的多根的，就创建一个Fragment节点，把多个根节点作为它的children，将来patch的时候，如果发现是一个Fragment节点，则直接遍历children创建或更新

 

vue-loader是什么

  1、是用于处理单文件组件（SFC,Single-File Component）的webpack loader

  2、因为有了vue-loader，就可以在项目中编写SFC格式的Vue组件，可以把代码分割为<template>、<script>和<style>，代码会异常清晰。结合其他loader还可以用Pug编写<template>，用SASS编写<style>，用TS编写<script>。<style>还可以单独作用组件

  3、webpack打包时，会以loader的方式调用vue-loader

  4、vue-loader被执行时，它会对SFC中的每个语言块用单独的loader链处理，最后将这些单独的快装配成最终的组件模块  

v-once使用场景

  1、v-once是vue内置指令，作用是只渲染指定组件或元素一次，并跳过未来对其更新

  2、如果有一些元素或者组件在初始化渲染后不再需要变化，这种情况下适合使用v-once，这样哪怕这些数据变化，vue也会跳过更新，是一种代码优化手段

  3、只需要作用的组件或元素加上v-once即可

  4、vue3.2之后，又增加了v-memo指令，可以有条件缓存部分模板并控制他们更新

  5、编译器发现元素上有v-once时，会将首次计算记过存入缓存对象，组件再次渲染时会从缓存对象获取避免再次渲染

history和hash模式去吧

  1、两者差别主要在显示形式和部署上

  2、hash模式在地址栏显示的时候是以hash的形式：#/xxx，这种方式使用和部署都比较简单；history模式url看起来更优雅美观，但是应用在部署时需要做特殊配置

  web服务器需要做回退处理，否则会出现刷新页面404问题

  3、在实现上不管哪种模式，最终都是通过监听propstate事件触发路由跳转处理，url显示不同只是显示效果上的差异

vuex持久化

localStorage，提交mutation时同时存入localStorage，store中把值取出来作为state的初始值

使用插件vuex-persist、vue-persistedstate，内部的实现是通过订阅mutation变化做统一处理，通过插件的选项控制哪些需要持久化