1.Jquery与Vue的区别
简单的可以使用一个todo-list案列来解释
首先我们使用jquery实现一个todo-list
下面是使用vue实现一个todo-list
接下来我们介绍二者使用区别
1.数据与视图的分离
2.以数据驱动视图
说一下第一点
我们使用jq实现todo-list,视图为html部分,html部分中只有一个ul容器标签,li标签并不存在,再看看js代码,看到在js层面添加li标签,所以不仅有数据,也有视图的存在(li)。
第二点
jquery使用append添加li标签到htm中实现,用。val方法清空数据,这样的理念是直接从修改视图来改变数据的显示。
接下来再对比vue中代码,清楚明了。
2.Vue与Rect的区别
相同点:
1.都支持服务器端渲染
2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
3.数据驱动视图
4.都有支持native的方案,React的React native,Vue的weex
5.都有管理状态,React有redux,Vue有自己的Vuex(自适应vue,量身定做)
不同点:
1.React严格上只针对MVC的view层,Vue则是MVVM模式
2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
(简单的来说vue组件数据变化时,只重现渲染根据某个组件数据变化的元素,react则是全局重新渲染)
3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’;
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的;(vue双向,react单向)
5.state对象在react应用中不可变的,需要使用setState方法更新状态;
在vue中,state对象不是必须的,数据由data属性在vue对象中管理;