框架比较

• Angular

  • MVW框架
  • MIT license

• Vue

  • MVVM框架
  • MIT license

• React

Vue vs React

共通点

• 所有的state都必须预先定义。否则变化不跟踪。

  • 这点对于需要异步数据初始化状态来讲，有两种初始化的办法

    1. 异步请求数据与初始化实例同步运行,在实例的mounted里添加then方法来变更空白数据。

       let asyncData = fetch(...);
       new Vue({
           store,
           mounted(){
               asyncData.then(
                   data => {
                       this.$store.commit("***", data);
                   }
               ).catch();
           }
       })
       

       这种方法被渲染一次空白，然后再更新一遍所有的数据。

    2. 先拿到fetch的数据后开始初始化实例。

    对速度而言，第一种首选。

关于props

Vue

vue 的this.$data,this.$props通过初始化后，可以通过this[dataName|propName]访问。

1. props是用来传递数据的，方法通过@custom event传递
2. 属性改变，立即会改变所有使用此属性的视图。但是基础属性值必须通过this.$emit的方式修改。
3. 实现了双绑, $props={parcel.x} v-model={parcel.x}, 简单实现动态修改属性parcel.x，任何值用此属性的视图都会改变。（对非基础值而言）
4. 插槽功能： 可以使用slot功能 多插用具名slot。
5. 动态组件: ":is"特性解决。
   • 将各个需要引用的动态组件require到components字段。key会作为:is的值。
   • 在模版中使用<component v-bind:is="currentView"></component>
6. props的动态使用
   • 加逻辑使用时可以在computed里定义方法，然后直接使用方法名。
7. 可以通过set设置数组的值。
8. 支持mixin对象。对组件做一些合并。
9. extends 继承
10. v-pre标记，vue不会关心这个标记下的dom.

React

1. 任何要传递的资源都通过props，包括数据，函数
2. 不能直接通过修改数据属性的值来获得视图修改，而是修改state，再将state通过属性往下传。
3. 无双绑概念,通过属性传递方法来个改。
4. 插槽功能：使用props.children实现; 多插用自定义属性。
5. 动态组件：
   • 引入各组件
   • 在render之间先判断使用哪个组件并赋值给以大写字母开头的变量，然后直接在return中直接引用。
6. props的动态使用
   • 在类中直接创建方法，使用: {a()}
7. 改完后，通过setState重新赋值一下。
8. 不支持mixin
9. 高阶组件，能实现继承及vue的自定义属性
10. 非监控dom, 弄一个空dom，不引用任何属性，react不会关心这个dom的存在。

一个input.text ,受属性x的影响获得值x,也受自身变化获得自身的值y。
如何设计动态修改state.m ?

Vue

1. v-model=y
2. methods : {changeY(){}}

React