本文翻译自这里哦http://vuejsdevelopers.com/2017/05/28/switch-from-react-to-vue-js/
react和Vue有哪些区别？
react和Vue相较于不同点，它们实则有许多相似点：
- 都是一种构建ui的js框架；
- 都是轻量级的；
- 都是基于组件化的设计思想；
- 都采用了虚拟Dom（Vue应该指的2）；
- 都能被webpack打包成一个单独的html文件或者一个模块；
- 都使用了路由，状态管理的库。
他们主要的区别在于，Vue通常采用了html模板抽离页面公共部分，而react的公共组件部分都是基于js编写，并且Vue有可变状态，并且能够自动重新绘制，这被称作‘反应性’。
下面从细节进行分析：
components
随着Vue.js的更新，components含有一个api方法.component，它含有两个参数一个id，另一个可选的自定义的一个对象。官方在此
Vue.component('my-component', {
// Props
props: [ 'myprop' ],
// Local state
data() {
return {
firstName: 'John',
lastName: 'Smith'
}
},
// Computed property
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
// Template
template: `
<div>
<p>Vue components typically have string templates.</p>
<p>Here's some local state: {{ firstName }}</p>
<p>Here's a computed value: {{ fullName }}</p>
<p>Here's a prop passed down from the parent: {{ myprop }}</p>
</div>
`,
// Lifecycle hook
created() {
setTimeout(() => {
this.message = 'Goodbye World'
}, 2000);
}
});Template
从上面的实例可以注意到组件有一个template属性，就是一包含html标签标记的字符串，在运行时，vue的编译器能够将template编译成render function，在virtualDom中挂载。当然，你也可以使用jsx语法。
Lifecycle hooks
vue和react的组件一样都有生命周期的钩子，例如，有一个created钩子会在组件加载但是还未在页面加载完成的时候触发，和react组件一个很大的区别是，vue的组件没有shouldComponentUpdate 方法，因为vue是reactivity 的。
Re-rendering
在初始化中，vue会走一遍data属性，并将它们转换成getters和setters,如下所示：
Vue在访问或修改属性时添加了这些getter和setter以启用依赖关系跟踪和更改通知。
Mutable state
改变组件的状态，你不要使用setState方法，只需要将改变的值重新赋值即可。
// React
this.setState({ message: 'Hello World' });
// Vue
this.message = 'Hello World';当message的值发生改变时，会触发它的setters方法更新现有的值，但这也会产生下一步操作，通知vue值已经改变，并且可能需要重新渲染对改值有依赖的部分。
如果message的值通过prop传递给其他子组件，vue便会知道这个值，其他组件有依赖，便会自动渲染对改值有依赖的部分。这也就是为什么vue没有shouldComponentUpdate钩子的一个原因。
Main template
对于主模板文件，Vue更像Angular。 与React一样，Vue需要安装在页面的某个位置。
<body>
<div id="root"></div>
</body>// React
ReactDOM.render('...', document.getElementById('root'));
// Vue
new Vue({
el: '#root'
});但和react的区别是，你依然可以在根文件index.html的里添加东西。
<div id="root">
<div>You can add more markup to index.html</div>
<my-component v-bind:myprop="myval"></my-component>
</div>Directives
再次，像Angular一样，Vue允许您通过“指令”逻辑来增强您的模板。 这些是具有v-前缀的特殊HTML属性，例如。 v-if用于条件呈现和v-bind将表达式绑定到常规HTML属性。
new Vue({
el: '#app',
data: {
mybool: true,
myval: 'Hello World'
}
});<div id="app">
<div v-if="mybool">This renders if mybool is truthy.</div>
<my-component v-bind:myprop="myval"></my-component>
</div>分配给指令的值是一个JavaScript表达式，因此可以引用数据属性，包括三元运算符等。
细节性知识还请移步官方文档：https://cn.vuejs.org/
扫一扫
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
