关于props的注意事项!
起于昨晚大半夜在群里看到有人問這個(gè)問題,在子組件的data屬性里重新賦值props屬性 this.a = this.propA,不生效!
提示了他如果是異步的話,就要注意watch.決定今日敲個(gè)demo分析一下過程。
官方文中中其實(shí)有提到,用計(jì)算屬性。父組件值傳入子組件,一個(gè)單向數(shù)據(jù)流,如果是重新把prop的屬性值賦值給了子組件的其他data屬性,需要用計(jì)算屬性。
會(huì)刷新值的前提是沒有去做重新賦值給子組件的其他data屬性,那么這個(gè)props其實(shí)相當(dāng)于在子組件中就是響應(yīng)式變量,一旦變化會(huì)觸發(fā)更新!
但是,如果在子組件中props的屬性重新賦值給了data的另外一個(gè)屬性,這時(shí)候其實(shí)相當(dāng)于賦值了固定的值給某屬性。
上圖中,父組件傳的值是propA,初始值傳個(gè)1,定時(shí)器2秒鐘后再去改變propA的值,然后子組件3秒后,a的值肯定是不會(huì)再變的。
如果父組件傳的該值是異步的情況下,子組件對(duì)應(yīng)的該值也是變化了的,但由于你是在初始化時(shí)候賦值給了其他,意思是想要其他的屬性替代這個(gè)props的屬性,
這個(gè)操作,其實(shí)是切斷了響應(yīng)式關(guān)聯(lián)的,關(guān)于響應(yīng)式,文檔中的深入響應(yīng)式原理也有提到:
上述的this.a = this.propA,這個(gè)重新賦值,propA這個(gè)值在父組件變化并傳遞到子組件中后,對(duì)于this.a并不能監(jiān)測(cè)到變化,
this.a = this.propA其實(shí)相當(dāng)于this .a = 3,那么propA變化了,a是不可能也跟著變的。因?yàn)镻ropA的監(jiān)察者以及setter、getter跟a屬性的setter是毫無關(guān)聯(lián)的。
所以解決方式是通過監(jiān)聽或者計(jì)算屬性,可以watch propA的變化,然后手動(dòng)去更新a的值。這樣才能做到視圖同步變化!
轉(zhuǎn)載于:https://www.cnblogs.com/hjj2ldq/p/9413529.html
總結(jié)
以上是生活随笔為你收集整理的关于props的注意事项!的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: sed在替换的时候,使用变量中的值?如何
- 下一篇: Activity的启动过程(源码API2