对props属性的回溯

在前端框架中,数据流是单向的,比如在子组件中props是只读的,想要在子组件对props进行修改,只能在子组件中调用父组件的函数,修改父组件中的数据,使父组件重新渲染才能间接修改props.这样做的目的是确保数据的可维护性,因为子组件可以在多处被复用,若子组件中都可以修改props,那么当项目变得复杂,我们将无法定位是子组件还是父组件造成了props的改变,这无疑会让项目变得难以维护.而单向的数据流使得数据的改变全部在父组件中进行,子组件只是被动的接受props参数,当props数据出现问题,只需要对父组件中相应的函数进行调试就可以了.

在react中,一般是父组件向子组件中传入一个props数据和一个在父组件中能够修改props的函数,如propsName={aaa} prospFun={this.funcName}这样我们在子组件中通过引用这个函数的方式实现了对父组件中props的修改.但当项目变得复杂,这种方法会使数据流变得复杂,因为每个组件都需要传递props和函数,效率较低.因此我们引入redux来精简项目,同时还可以与父组件的props解耦,使组件更加独立,另外由于redux本质上是一个全局变量,这个特点使得我们将项目重构成ssr时会节约大量的成本.

我以前写vue时对props回溯困惑了好一阵,在vue早期的版本中甚至可以在子组件中直接为props赋值,经过最近这些react组件的编写,我才彻底理解了vue中的props回溯功能首先最基本的写法和react差不多 , v-bind:propsName='aaa' v-on:prospFun='funcName', 然后在子组件中this.$emit ,其次vuex可以完成与redux相同的功能,具体写法百度吧.与react不同的是 由于vue中拥有computed和watch方法,我们可以在这些方法中模拟一个双向绑定的props,如

computed{
    canEditingProps(){
    return this.props.propsName || this.model
  }
}
data(){
    return {
    model:""
  }
}

这里,modal是在子组件中的双向绑定数据,通过与propsName的叠加计算,使得在子组件中模拟出了对props的回溯修改,但是这并不能影响父组件中的数值,还是要用this.$emit事件才能完成父组件数值的修改,watch也是同理.虽然解决了props的只读属性问题,但还是比较麻烦

所以在vue2.3中,官方引入了.sync属性,在v-bind:propsName='variableName.sync',这样在父组件中会自动生成一个关于variableName的双向绑定,本质上一个.sync等同于(父组件v-bind:propsName='aaa' v-on:prospFun='funcName',子组件中this.props this.$emit)这一组函数和数据的集合