@@ -21,15 +21,15 @@ class SubApp extends ReactV.Component {
2121}
2222class App extends ReactV . Component {
2323 state = {
24- illuminate : 2 ,
25- times : 1 ,
26- status : "ready" ,
27- arr : [ "hi" , "world" ]
24+ age : 16 ,
25+ o : { name : "hi" }
2826 }
2927 mounted ( ) {
30- setTimeout ( ( ) => {
31- this . arr . push ( "whut" ) ;
32- } , 1000 ) ;
28+ setTimeout ( ( ) => {
29+ console . log ( "changed" , this )
30+ this . o . name = "proots"
31+ this . set ( this . o , "gender" , "male" ) ;
32+ } , 1000 ) ;
3333 }
3434 watch = {
3535 status ( val , old ) {
@@ -40,6 +40,9 @@ class App extends ReactV.Component {
4040 this . status = "troix" ;
4141 }
4242 } ,
43+ o ( val , old ) {
44+ console . log ( val . name , old . name )
45+ }
4346 }
4447 methods = {
4548 change ( ) {
@@ -50,20 +53,22 @@ class App extends ReactV.Component {
5053 computed = {
5154 calc : {
5255 get ( ) {
53- return this . illuminate * this . times ;
56+ return `Name: ${ this . o . name } , Age: ${ this . age } `
5457 } ,
5558 set ( newVal ) {
56- this . illuminate = 10 ;
59+ this . age = newVal ;
5760 }
5861 }
5962 }
6063 render ( ) {
61- const { status , illuminate , times , calc, arr } = this ;
64+ const { o , age , calc} = this ;
6265 return (
6366 < div >
64- {
65- arr . map ( ( o , i ) => < li key = { i } > { o } </ li > )
66- }
67+ < p > { age } </ p >
68+ { Object . keys ( this . o ) . map ( key => {
69+ return < p key = { key } > { key } : { this . o [ key ] } </ p >
70+ } ) }
71+ < p > { calc } </ p >
6772 </ div >
6873 )
6974 }
0 commit comments