Vue3知识点及构建开发遇到的错误

• this.$refs与ref(null)
• Compute和watch区别和应用场景
  计算属性中的属性不需要在data中定义，必须有return
  计算属性有缓存特性，基于它们的依赖进行缓存的，只有在相关依赖发生改变时才会重新求值；当一个变量值受多个变量值影响就应该使用
  watch中的值需要在data中定义，监听函数有参数，newval和oldval
  watch的依赖是单个的，每次只可以对一个变量进行监控；当一个变量值影响多个变量值就应该使用
• v-slot插槽
  v-slot插槽是子组件中用slot标签定义的预留位置，为了在父组件中使用子组件标签的时候可以往子组件内写入html代码，有name属性叫具名插槽，没有name属性是默认插槽。
  插槽有作用域，父组件template v-slot:slotName='{sonValName1, sonValName2}' <slot name='slotName' :value1='val1' :value2='val2'>
• params和query传参的使用和区别
  使用name导航时params和query能同时使用【网上有其他说法】
  query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数
  params相当于post请求，参数不会再地址栏中显示
  网上说name与params配对使用，path与query配对使用，我测试时使用name都可以与params和query使用
• 指令 v-for v-show v-if v-else-if v-else v-html v-text v-bind v-on v-model v-slot
• keep-alive
  缓存被移除的组件实例，tab切换会导致组件销毁数据删除，如果要保留可以用< keep-alive >标签包裹；includes和exclude可以限制或者保留组件实例
• Vue常用的修饰符及其使用
  表单修饰符 lazy、trim、number
  事件修饰符 stop、prevent、self、once、passive、native、capture
  鼠标按钮修饰符 left 左键点击、right 右键点击、middle 中键点击
  键盘修饰符 onkeyup，onkeydown，后面需要跟keycode编码名或者按键编码
• v-show 与 v-if 的区别，两者的优先级
  v-show通过修改元素CSS的display属性控制显示或者隐藏；
  v-if指令直接销毁和重建DOM让元素显示和隐藏；
  使用v-show会更加节省性能；只需要一次显示或隐藏使用v-if更加合理
  v-if优先级比v-for高
• key的原理和作用
  key是给每一个vnode的唯一id，根据key，更准确更快的找到对应的vnode节点然后更新渲染
• $nextTick原理及运用
  nextTick所指定的回调函数会在浏览器更新DOM完毕之后再执行
• vuex是什么？怎么使用？哪种功能场景使用它？
  vue框架中状态管理，单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等
  属性：State、 Getter、Mutation 、Action、 Module
  state是数据源存放地，存放的数据是响应式的，
  getters 可以对State进行计算、过滤操作
  mutation 类似于事件
  Action 类似于 mutation，Action 提交的是 mutation，不是直接变更状态改变数据，可以任意异步操作
• vue路由的钩子函数
  全局导航钩子、组件内钩子、单独路由独享 路由钩子函数总结有6个
  全局前置钩子 router.beforeEach((to, from, next) => {}) 即将要进入的目标路由,当前导航正要离开的路由,next()function 一定要调用该方法来resolve这个钩子完成跳转 做页面跳转前的处理,页面登录判断、管理员权限判断 next-可选参数，如果return false取消导航，next/return({ name: 'Login' }) 导航到登录
  全局后置钩子 afterEach 没有next方法 更改页面标题
  路由独享钩子函数：beforeEnter((to, from) => {}) router>index.js 只在进入路由时触发，不会在 params query hash 改变时触发
  组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
  1、清除组件中的定时器
  2、当页面有未关闭的窗口，或未保存的内容时，阻止页面跳转
  3、保存内容到Vuex
• Vue组件间的参数传递
  1.父组件传给子组件：子组件通过props方法接受数据;
  2.子组件传给父组件：$emit方法传递参数
  3.provide inject 实现父组件向深层的子组件传值 非响应式数据
  4.使用 Vuex
  5.路由 route.query
  6.this.$parent this.$root
  6.非父子组件间的数据传递，兄弟组件传值借用 eventBus，创建一个事件中心，可以用它来传递事件和接收事件。发送数据使用 $emi t方法，使用 $on 接收
  在vue 项目中创建个文件eventBus.js 引入vue并且new Vue实例并导出
  import Vue from 'vue'
  export default new Vue()

使用时将eventBus.js文件引入当前组件中：
import eventBus from “@/util/eventBus.js”
eventBus.$emit(“事件名称”,“传的参数”)
在另一个需要用到的组件中同样引入eventBus 在mounted中 eventBus.$on(“事件名称”,(代理参数)=>{然后我们做相应的操作})

• vue中MVVM的理解
  M 模型（Model）：数据模型；负责数据存储
  V 视图View 负责页面展示，由 HTML 和 CSS 来构建
  VM 视图模型（View-Model） 负责业务逻辑处理（比如Ajax请求等）
• Vue实现数据双向绑定的原理
  Vue3通过ES6 Proxy类实现数据响应式的，直接动态添加新属性还是可以实现数据响应式，Proxy 支持的拦截操作有13种 [get,set,has,ownKeys]
  Vue2
  通过Object.defineProperty()来监听各个属性的set、get，在数据变动时触发相应监听回调，执行Compile解析模板指令，将模板中的变量替换成数据，渲染视图；缺点：无法数组变化，Vue2内部相当于重写了数组的原型，劫持了push pop shift unshift splice sort reverse（这里只是一部分，还有理解的不够完整）
• data里面的数据不想做响应式，该怎么做
  放在return外面
  Object.freeze()
• Vue的路由实现：hash模式 和 history模式
  hash模式： 在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
  history模式： history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，需要后端配合
• Vue生命周期

beforeCreate 在组件实例初始化完成之后立即调用
created 在组件实例处理完所有与状态相关的选项后调用，响应式数据、计算属性、方法和侦听器设置完成
beforeMount 在组件被挂载之前调用，还没有创建 DOM 节点
mounted 在组件被挂载之后调用 所有同步子组件都已经被挂载
beforeUpdate 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用
updated 在组件因为一个响应式状态变更而更新其 DOM 树之后调用
unmounted 在一个组件实例被卸载之后调用
activated 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用
deactivated 若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用
Vue 实例从创建到销毁的过程就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁整个过程就是 Vue 的生命周期。

• SSR
  Server-Side Rendering 意为服务端渲染，通过服务器完成页面HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程
  搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo
  首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图

项目复杂度高
需要库的支持性，代码兼容
服务器负载变大，相对于前后端分离务器只需要提供静态资源来说，服务器负载更大

• mixins
  mixins的作用跟vuex，公共组件有点像，多个组件中的数据或者功能很相近时，就可以使用mixins，可以包含任意组件选项（data、created、mounted、methods、filters等），组件引入后相关选项会进行合并，相当于引入后对父组件各属性进行扩充，在引入mixins的同时，组件中重复定义，minxins中的属性方法会被覆盖
  Vue3推荐step组合式API
• axios
  发送多个请求(并发请求)，类似于promise.all，一个请求出错，那就会停止请求
  支持Promise API
  在浏览器中创建XMLHttpRequest请求
  在node.js中发送http请求
  取消请求 const controller = new AbortController(); controller.abort()
  自动转换JSON数据
  客户端支持防止CSRF/XSRF(跨域请求伪造)
  拦截请求和响应
  转换请求和响应数据
• npm ERR! code ERESOLVE
  npm ERR! ERESOLVE could not resolve
  可能npm有问题，可能依赖包之间有冲突，命令行提示 加上 --legacy-peer-deps