1. 程式人生 > >學了這麽久,vue和微信小程序到底有什麽樣的區別?

學了這麽久,vue和微信小程序到底有什麽樣的區別?

dde 顯示 文件 渲染 vue tor eas mount gate

寫了vue項目和小程序,發現二者有許多相同之處,在此想總結一下二者的共同點和區別。相比之下,小程序的鉤子函數要簡單得多。

寫了vue項目和小程序,發現二者有許多相同之處,在此想總結一下二者的共同點和區別。

一、生命周期

先貼兩張圖:

vue生命周期

技術分享圖片

小程序生命周期

技術分享圖片

相比之下,小程序的鉤子函數要簡單得多。

vue的鉤子函數在跳轉新頁面時,鉤子函數都會觸發,但是小程序的鉤子函數,頁面不同的跳轉方式,觸發的鉤子並不一樣。

·onLoad: 頁面加載

一個頁面只會調用一次,可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。

·onShow: 頁面顯示

每次打開頁面都會調用一次。

·onReady: 頁面初次渲染完成

一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互。

對界面的設置如wx.setNavigationBarTitle請在onReady之後設置。詳見生命周期

·onHide: 頁面隱藏

當navigateTo或底部tab切換時調用。

·onUnload: 頁面卸載

當redirectTo或navigateBack的時候調用。

數據請求

在頁面加載請求數據時,兩者鉤子的使用有些類似,vue一般會在created或者mounted中請求數據,而在小程序,會在onLoad或者onShow中請求數據。

二、數據綁定

VUE:vue動態綁定一個變量的值為元素的某個屬性的時候,會在變量前面加上冒號:,例:

小程序:綁定某個變量的值為元素屬性時,會用兩個大括號括起來,如果不加括號,為被認為是字符串。例:

三、列表渲染

直接貼代碼,兩者還是有些相似

vue

小程序:

四、顯示與隱藏元素

vue中,使用v-if 和v-show控制元素的顯示和隱藏

小程序中,使用wx-if和hidden控制元素的顯示和隱藏

五、事件處理

vue:使用v-on:event綁定事件,或者使用@event綁定事件,例如:

小程序中,全用bindtap(bind+event),或者catchtap(catch+event)綁定事件,例如:

六、數據雙向綁定

1.設置值

在vue中,只需要再表單元素上加上v-model,然後再綁定data中對應的一個值,當表單元素內容發生變化時,data中對應的值也會相應改變,這是vue非常nice的一點。

但是在小程序中,卻沒有這個功能。那怎麽辦呢?

當表單內容發生變化時,會觸發表單元素上綁定的方法,然後在該方法中,通過this.setData({key:value})來將表單上的值賦值給data中的對應值。

下面是代碼,可以感受一下:

當頁面表單元素很多的時候,更改值就是一件體力活了。和小程序一比較,vue的v-model簡直爽的不要不要的。

2.取值

vue中,通過this.reason取值

小程序中,通過this.data.reason取值

七、綁定事件傳參

在vue中,綁定事件傳參挺簡單,只需要在觸發事件的方法中,把需要傳遞的數據作為形參傳入就可以了,例如:

在小程序中,不能直接在綁定事件的方法中傳入參數,需要將參數作為屬性值,綁定到元素上的data-屬性上,然後在方法中,通過e.currentTarget.dataset.*的方式獲取,從而完成參數的傳遞,很麻煩有沒有...

八、父子組件通信

1.子組件的使用

在vue中,需要:

1. 編寫子組件

2. 在需要使用的父組件中通過import引入

3. 在vue的components中註冊

4. 在模板中使用

在小程序中,需要:

1.編寫子組件

2. 在子組件的json文件中,將該文件聲明為組件

3.在需要引入的父組件的json文件中,在usingComponents填寫引入組件的組件名以及路徑

4.在父組件中,直接引入即可

具體代碼:

2.父子組件間通信

在vue中

父組件向子組件傳遞數據,只需要在子組件通過v-bind傳入一個值,在子組件中,通過props接收,即可完成數據的傳遞,示例:

子組件和父組件通信可以通過this.$emit將方法和數據傳遞給父組件。

在小程序中

父組件向子組件通信和vue類似,但是小程序沒有通過v-bind,而是直接將值賦值給一個變量,如下:

此處, “index”就是要向子組件傳遞的值

在子組件properties中,接收傳遞的值

子組件向父組件通信和vue也很類似,代碼如下:

如果父組件想要調用子組件的方法

vue會給子組件添加一個ref屬性,通過this.$refs.ref的值便可以獲取到該子組件,然後便可以調用子組件中的任意方法,例如:

小程序是給子組件添加id或者class,然後通過this.selectComponent找到子組件,然後再調用子組件的方法,示例:

小程序和vue在這點上太相似了,有木有。。。

九、廢話

還有好多地方沒寫,之後再慢慢加上、精簡。感覺自己寫的有點冗余,大佬勿噴!!!



?

學了這麽久,vue和微信小程序到底有什麽樣的區別?