vue与angularjs、react的异同点

妖狐艹你老母 2022-05-27 01:35 167阅读 0赞

vue和angularjs：

1、两者都支持过滤器（自定义过滤器），都支持指令（自定义指令），实现双向绑定的时候都比较简答，不像react那样麻烦。

2、两者都不支持IE8以下的浏览器。

3、vue相对于angular来说要更容易上手，初学者打开菜鸟可以看看，直接看官网也可以，angularjs学习成本很高，需要会不少东西

4、angularjs路由配置比起vue要稍微复杂点，其次，AngularJS依赖对数据做脏检查，所以Watcher越多越慢

5、vue使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

这些都是细节问题，个人觉得开发的时候还是要看项目，vue适用于于开发数据量大的项目，具体可以参考这篇文章[点击打开链接][Link 1]

vue和react：

1、两者本着一切皆组件的思想。

2、对于类似router这样的核心包也是需要当做第三方插件一样导入的。

3、都有钩子函数

不同点是话不多说看代码：

这是vue版：

<div id="app">
      <p>{
       { message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
    
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('');
        }
      }
    });

这是react版：

class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          message: 'Hello React.js!'
        };
      }
      reverseMessage() {
        this.setState({ 
          message: this.state.message.split('').reverse().join('') 
        });
      }
      render() {
        return (
          <div>
            <p>{this.state.message}</p>
            <button onClick={() => this.reverseMessage()}>
              Reverse Message
            </button>
          </div>
        )
      }
    }
    ReactDOM.render(App, document.getElementById('app'));

同样的功能，不一样的代码。

[Link 1]: https://segmentfault.com/a/1190000012315822