Vue is solved with ProPs to assign the initial value of DATA.

Some time to do an operational project, after the online product feedback page is not right, found during the investigation, the problem is actually due to the DATA initial value in Vue. Resulting in, the initial value of DATA is from PROPS. For convenience, the problem is now abstract:


    Data in the DATA       /  / / Global Components Let Userinfo = Vue.component ('Userinfo', {Name: 'User-Info', PROPS: {UserData: Object}, Data () {Return {UserName: this.userData.Name}}, template: `  Name: {UserName} 
Gender: {{UserData.gender}}
Birthday: {{UserData.birthday}}
` }); // Vue instance New Vue ({EL: '#App', DATA: {User: {name: ', gender:', birthday: ''}}, created () {this.getuserdata ();}, methods: {setUserData () {setTimeout (() => {this.user = {name: 'Yu Yongyu', gender: 'male, birthday:' 1991-7 '}}, 500)}}, Components: {UserInfo}};
Code Interpretation:
The root component DATA has an object: User, contains three properties: Name, Gnder, BirthDay, the initial value is empty string analog API asynchronous request, 500 milliseconds after User The reinfunction, the three properties are no longer empty
declare a sub-component userInfo, and there is an object UserData in the PROPS for receiving the USER of the parent component; there is a variable username in Data, the initial value comes from RESULTS:

After the page is initialized, the name, gender, birthday is displayed empty, 500 milliseconds, gender and birthday display Normal results, only the name has not changed.
    Why is this?
  • My original idea: user.Name is String, belongs to the basic data type, with it assigns the username in the sub-component data, belongs to the basic data type assignment, so when the in the parent component Time, subassemblyUserName does not change.
  • Is this this? So I decided to change to an object, assigning a value by reference data type, and then observed whether it is expected. The code is as follows:


PROPS initialized Data variable – object form

// Global component Let UserInfo = Vue.component (‘userinfo’, {name: ‘user-info’, props: {UserData : Object}, data () {return {usrname:}}}, template: `

Name: {{username.text}}

Gender: {{UserData. Gender}}
 Birthday: {UserData.birthday}}   `}); // Vue instance new Vue ({EL: '#App", data: {user: {name : {text: ''}, gender: '', Birthday: ''}}, created () {this.getuserdata ();},Methods: {getUserData () {setTimeout (() => {this.user = {name: {text: 'in Yongyu'}, gender: 'Male', Birthday: '1991-7'}}, 500)} }, Components: {UserInfo}});      Operating results: The name still does not value, and the same as the first result! ! !   Second, the reason   So, what is the reason? Best is not allowed, and later, when discussed with the small friends, some people raised: will it be deep copying when DATA is initialized? 
I think this explanation is relatively reliable, so I will collect evidence. First, go to the Vue official website to turn about Data's document, where:
See the word "recursively", basically determine the above inference is correct, because the core principle of the deep copy is recursion.
It turns out that VUE is initialized to traverse the Data all attributes and use Object.defineProperty to transfer all of these properties to getter / setter for bidirectional binding. The official document is clearly said in the Reactivity in Depth.
Why is the reason why VUE does not support IE8: IE8 does not support Object.defineProperty.
Third, the solution
Since DATA deep copy, DATA cannot be updated as PROPS changes, we naturally think of two functions in Vue: watch, computed.
The modification code is as follows, observation results:

Solution: Watch

// Global component Let Userinfo = Vue.component (‘userinfo’, {name: ‘user-info’, props: {userdata: Object}, data () {return {username:}}, computed: {computeusername () {return}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} {‘ ‘: Function (VAL) {// Listening to Properties in PROPS THISUSERNAME = VAL;}}, template: `Vue中用props给data赋初始值遇到的问题解决

Name (Watch): {UserName}}

Name (computed): {{computeusername}}

Gender: {userdata.gender}}

Vue中用props给data赋初始值遇到的问题解决 Birthday: {{UserData.birthday}}

`}); // Vue instance new Vue ({EL: ‘#App’, DATA: {User: {name: ‘, gender: ‘, Birthday:’ ”}}, created () {this.getuserdata ();}, methods: {getUserData () {setTimeout (() => {this.user = {name: ‘Yu Yongwo’, gender : ‘Male’, Birthday: ‘1991-7’}}, 500)}}, Components: {UserInfo}};

Operation results

Perfect! ! !
 4: Summary: About Vue PROPS    Afterwards, the documentation about PROPS is cleared,      Probably sorted out:   1. Props is a one-way data stream: the data change of the parent component, the real-time reaction in the PROPS in subcomponents, otherwise  
2. Not allowed Directly operate PROPS 3 in subcomponents. Can be varied to operate PROPS
(1) Declaring local variables in DATA, and initialize the PROPS, the local variable does not update with the PROPS update
(2) Conversion to the PROPS value in compute
The above is all the content of this article, I hope to help everyone's learning, I hope everyone supports Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment