几大框架知识点梳理

Vue

组件通信

props/$emit

父组件通过props向下传递数据给子组件，子组件通过$emit发送事件给父组件发消息（传值）。

缺点：比较适合父子组件通信，在兄弟组件和跨级组件中使用会比较复杂

eventBus

通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙地实现了任何组件间的通信，包括父子、兄弟、跨级。

1
2
3

let EventBus = new Vue()
EventBus.$emit(eventName, data)
EventBus.$on(eventName, data => {})

缺点：比较适合兄弟组件和跨级组件通信，但事件太多会比较混乱不好管理

vuex

缺点：使用vuex组件传值需要把值存到全局仓库中，对于小型的项目，通信十分简单，这时使用 Vuex 反而会显得冗余和繁琐。

$attrs/$listeners

$attrs：包含了父作用域中不被 prop 所识别的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件。通常配合 interitAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器（存放的是父组件中绑定的非原生事件）。它可以通过 v-on=”$listeners” 传入内部组件。

缺点：适用于特定的情况，比如父组件和孙子组件

provide/inject

祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。

provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

缺点：provide 和 inject 绑定并不是可响应的。（如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。）它被设计是为组件库和高阶组件服务的，平常业务中的代码不建议使用。

ref

ref如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

缺点：不太适合嵌套层级太多的时候使用。$refs 不是响应式的，只能拿到获取它的那一刻子组件实例的状态。

$parent / $children

$parent 属性可以用来从一个子组件访问父组件的实例，$children 属性可以获取当前实例的直接子组件。

缺点：如果使用 $parent 导致父组件数据变更后会破坏单项数据流，在绝大多数情况下，不推荐使用。

生命周期

Vue生命周期

路由（建议vue-router)

Vue路由

配置404

当使用通配符路由时，含有通配符的路由应该放在最后。

{
  path: '*',    //至于最底部
  redirect: '/404'
}

状态管理（Vuex)

state

定义了应用状态的数据结构，可以在这里设置默认的初始状态。

getters

允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

mutations

唯一更改 store 中状态的方法，且必须是同步函数。

actions

用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

modules

允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

原理

Vue3

优点

1.vue3对比vue2具有明显的性能提升

2.具有的composition API实现逻辑模块化和重用

3.支持TS

区别

1.原理上

Vue2实现双向数据绑定原理，是通过es5的 Object.defineProperty，根据具体的key去读取和修改。其中的getter方法来实现数据劫持的，setter实现数据的修改。因此无法监听属性的添加和删除，不能监听数组的变化等。

Vue3使用原生Proxy 替代 Object.defineProperty，Proxy可以理解成，在对象之前架设一层“拦截”，拦截了对象的get和set操作。Proxy可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持。

详细可看Vue2和Vue3原理区别

React

setState

1.setState 操作合并

当第一个传入的参数是 object 数据类型它就会合并，类型调用了 Object.assgin
当参数类型是 function 数据类型时，不会合并

2.setState 是否异步

React 获得控制权的时候，它就是异步执行
当 React 丧失控制权的时候，它就是同步执行（setTimeout、Promise 等异步函数；自定义注册 DOM 事件等）

组件生命周期的方法(react v17)

1.挂载

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

2.更新

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

3.卸载

componentWillUnmount()

4.错误处理

static getDerivedStateFromError()
componentDidCatch()

Redux、React-redux、Redux 中间件

React Hook

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

react hook 详解及使用

微信小程序

生命周期

应用生命周期

小程序从启动 -> 运行 -> 销毁的过程

App({
  //小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作
  onLaunch: function(options) {},
  
  //小程序启动，或从后台进入前台显示时触发
  onShow: function(options) {},
  
  //小程序从前台进入后台时触发
  onHide: function() {},

  //小程序发生脚本错误或 API 调用报错时触发
  onError: function() {}
})

页面生命周期

小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

Page({
  //监听页面加载，一个页面只调用1次
  onLoad: function(options) {},
  
  //监听页面显示
  onShow: function() {},
  
  //监听页面初次渲染完成，一个页面只调用1次
  onReady: function() {},
  
  //监听页面隐藏
  onHide: function() {},
  
  //监听页面卸载，一个页面只调用1次
  onUnload: function() {}
})

组件的生命周期

Component({
  //监听组件创建
  created: function() {},
  
  //在组件完全初始化完毕、进入页面节点树后被触发
  attached: function() {},

  //在组件离开页面节点树后被触发
  detached: function() {},

  //在组件在视图层布局完成后执行
  ready: function() {},
  
  //在组件实例被移动到节点树另一个位置时执行
  moved: function() {},
  
  //组件抛出错误时执行
  error: function() {}
})

几大框架知识点梳理

Vue

组件通信

props/$emit

eventBus

vuex

$attrs/$listeners

provide/inject

ref

$parent / $children

生命周期

路由（建议vue-router)

配置404

状态管理（Vuex)

state

getters

mutations

actions

modules

原理

Vue3

优点

区别

React

setState

组件生命周期的方法(react v17)

Redux、React-redux、Redux 中间件

React Hook

微信小程序

生命周期

Flutter

生命周期

状态管理

路由管理

脑图

参考