2022/6/12

vuex的原理

• Vuex是什么: Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。可以理解为：将多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用，它最大的特点是响应式。

• vuex的组成部分包括

  • state:是存储的基本数据。
  • mutations:提交更改数据。
  • getter:对state加工，和computed计算属性一样。
  • actions：处理异步，通过store.commit方法触发mutations中的方法，从而改变state值。
  • module：是store分割的模块，每个模块拥有自己的state、mutations、getters、actions。

• uex吸收了redux的各种优点，完美的结合了vue的响应式数据

• vuex的原理:

  • vuex通过Vue.use(vuex)，从而调用install方法，通过applyMixin(Vue)在任意组件执行this.$store都能访问到store对象，实现将store挂载注入到组件中。
  • vuex的state状态是响应式的，是借助vue的data是响应式，将state存入vue实例组件的data中。
  • vuex的getters则是借助于vue的计算属性computed实现数据的实时监听。

什么是CSS3

• CSS3是CSS（层叠样式表）技术的升级版本, 主要包括选择器、盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局、CSS3变形、CSS3过渡、CSS3动画等模块。
• 减少开发成本与维护成本, 例如CSS3中添加的border-radius属性快速的帮助实现一个圆角, 而使用css2则需要从头绘图切图才能实现; CSS3提供的动画特效, 可以让开发者在实现一些动态按钮或者动态导航时远离JavaScript，让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
• 提高页面性能: 以前需要使用图片或者JavaScript来实现的效果，现在只需要几句CSS代码就能搞定。用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度。例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求

react里类组件和hooks有什么区别

• react-hooks解决的问题

  • 函数组件中不能拥有自己的状态（state）。在hooks之前函数组件是无状态的，都是通过props来获取父组件的状态，但是hooks提供了useState来维护函数组件内部的状态。

  • 函数组件中不能监听组件的生命周期。useEffect聚合了多个生命周期函数。

  • class组件中生命周期较为复杂（在15版本到16版本的变化大）。

  • class组件逻辑难以复用（HOC，render props）

• hooks对比与class的好处

  • 写法更加简洁清晰, useState可以返回一个 state,以及更新 state 的函数setState, 无论是页面中的使用还是数据的修改都更加的方便
  • 业务逻辑更加聚合, useEffect可以用来更好的处理副作用，如异步请求, 可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。class组件中的生命周期过多有时可能会发生一个功能出现在两个生命周期函数内的情况, 这样分开写可能会忘记, 但是hook可以让代码更加集中管理
  • 逻辑复用方便, class组件的逻辑复用通常用render props以及HOC两种方式。react hooks提供了自定义hooks来复用逻辑。

说一下vue中Mixin的使用

• 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

• 作用: 多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。如果是钩子函数, 会两个都被调用，mixin中的钩子首先执行。

  原则: 自己有用自己的,没有就用mixin的,冲突时以自己的为主

• 与其他数据共享机制的区别

  • Mixins

    • 可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响
    • 引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件

  • vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改

  • 公共组件: 在父组件中引入组件，相当于在父组件中给出一片独立的空间供子, 组件使用是根据props来传值，但本质上两者是相对独立的