Vue和React的主要区别
1.作者不同
vue是尤雨溪的个人项目
react 是Facebook团队完成的项目
2.生命周期
vue:
beforeCreate
1. 组件创建前触发,目的是为了组件的生命周期 和 组件中的事件做准备
2. 数据没有获得,真实dom也没有渲染出来
3. 可以进行数据请求,提供了一次数据修改的机会
4. 执行一次
created
1. 组件创建结束
2. 数据得到了,真实dom没有渲染出来
3. 可以进行数据请求,提供了一次数据修改的机会
4. 执行了一次
beforeMount
1. 组件挂载前
2. 任务: 判断el 判断 template
如果el没有,那么我们需要手动挂载,如果有,那么判断template
如果template有,那么进行render函数
如果template没有,那么通过 outerHTML 手动书写模板
3. 数据可以获得,但是真实dom还没有渲染
4. 可以进行数据请求,也提供了一次数据修改的机会
5. 执行一次
mounted
1. 组件挂载结束
2. 数据获得了,真实dom也获得了
3. 可以进行数据请求,也就可以修改数据
4. 执行了一次
5. 可以进行真实dom的操作了( 可以进行第三方库的实例化了 )
2: 运行中( 触发条件:数据更新 )
beforeUpdate
1. 更新前
2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
3. 这个钩子函数更多的是内部进行一些操作,我们就不在多干预了
4. 可以触发多次
updated
1. 更新结束
2. 真实dom得到了,数据也得到了( 更新后的 )
3. 动态数据获取( 第三方库实例化 )
beforeDestory
组件销毁前调用
destoryed
组件销毁后调用
react( 常用的 ):
componentWillMount:组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,
此时可以修改state。(建议用componentDidMount替代)
render:react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。
render()`方法必须是一个纯函数,他不应该改变`state`,也不能直接和浏览器进行交互,
应该将事件放在其他生命周期函数中。
componentWillUndate:组件更新结束之前执行,在初始化render不执行。
componentDidUndate:组件更新结束之后执行,在初始化render不执行
componentDidMount:组件渲染之后调用,只调用一次。
componentWillReceiveProps:组件初始化时不调用,组件接受新的props时调用。
componentWillUnmount:组件将要卸载时调用,一些事件监听和定时器需要在此时清除。
3.模板和 JSX
react:
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,
它允许 HTML 与 JavaScript 的混写
vue:
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
4.状态管理机制
react:
redux(最主要使用)
哪里需要使用redux:
1:用户使用的方式复杂
2.不同身份的用户有不同的使用方式( 例如用户和管理员 )
3.多个用户之间可以协作
4.与服务器有大量交互或者使用WebSocket
5.View(视图层)要从多个来源获取数据
vue:
vuex:
主要应用于中大型项目
5.组件传值方式
react:
父到子:父组件自定义属性,子通过props来获取父的属性值
子到父:父组件将自己的某个方法传递给子组件,子组件通过`this.props`接收到父组件的方法,
并通过回调的方式来实现
非父子组件通信:ref链
跨级组件通信: 层层组件传递props/context
vue:
父到子:通过props属性实现
子到父:通过自定义事件实现
同级组件通信
1.ref链
2.bus事件总线