vue跟小程式的差別是什麼

vue跟小程式的差異：1、vue一般會在created或mounted中請求數據，而在小程式會在onLoad或onShow中請求資料；2、vue動態綁定一個變數的值為元素的某個屬性的時候，會在變數前面加上冒號，而小程式綁定某個變數的值為元素屬性時，會用兩個大括號括起來；3、vue用「v-if」和「v-show」控制元素的顯示和隱藏，小程式用「wx-if」和hidden控制。

本文操作環境：Windows10系統、Vue3版、Dell G3電腦。

vue跟小程式的差別是什麼

一、生命週期函數不一樣：

- 微信小程序為onLoad：頁面加載，onShow：頁面顯示，onReady：頁面初次渲染完成，onHide：頁面隱藏，onUnload：頁面卸載。

- Vue的鉤子函數在跳轉新頁面時，鉤子函數都會觸發，但是小程式的鉤子函數，頁面不同的跳躍方式，觸發的鉤子並不一樣。 beforecreate、created適合做網路請求、beforemout更新data、mouted、beforeupdate、updated、beforedestory、destroyed。

二、資料請求時間不一樣：

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

三、資料綁定方式不一樣：

vue動態綁定一個變數的值為元素的某個屬性的時候，會在變數前面加上冒號。小程式：綁定某個變數的值為元素屬性時，會用兩個大括號括起來，如果不加括號，認為是字串。

四、 顯示與隱藏元素不同：

#vue中，使用v-if 和v-show控制元素的顯示和隱藏。在小程式中，使用 wx-if和 hidden控制元素的顯示和隱藏。

五、事件處理不一樣：

vue：使用v-on:event綁定事件，或使用@event綁定事件；小程式中，全用bindtap=“”，或catchtap=''綁定事件，catchtap阻止事件冒泡。

六、資料雙向綁定不一樣：

在vue中，只需要在表單元素上加上v-model,然後再綁定data中對應的一個值，當表單元素內容改變時， data中對應的值也會隨之改變。在小程式中，當表單內容變更時，會觸發表單元素上綁定的方法，然後在該方法中，透過this.setData({key:value})來將表單上的值賦值給data中的對應值。

七、綁定事件傳參不一樣：

在vue中，綁定事件傳參只需要在觸發事件的方法中，把需要傳遞的資料當作形參傳入。在小程式中，不能直接在綁定事件的方法中傳入參數，需要將參數作為屬性值，綁定到元素上的data-屬性上，然後在方法中透過e.currentTarget.dataset.*的方式獲取，從而完成參數的傳遞。

八、父子元件通訊不一樣：

#子元件建立不一樣：

• #在vue中需要：

1、編寫子元件；

2、在需要使用的父元件中透過import引入；

3、在vue的components中註冊；

4、在模板中使用。

• 在小程式中需要： 

#1、編寫子元件  

2、子元件的json檔案中，將該檔案宣告為元件；

3、在需要引入的父元件的json檔案中，在usingComponents填入引入元件的元件名稱以及路徑；

4、在父元件中，直接引入即可；

父子元件傳值不一樣：

• 在vue中，

#父元件向子元件傳遞數據，只需要在子元件透過v-bind傳入一個值，在子元件中，透過props接收，即可完成資料的傳遞，子元件和父元件通訊可以透過this .emit將方法和資料傳遞給父元件。

• 在小程式中，

父元件直接將值賦值給一個變量，在子元件 properties中，接收傳遞的值。

如果父元件想要呼叫子元件的方法

vue會為子元件新增一個ref屬性，透過this.refs.ref的值便可以取得到該子元件，然後便可以呼叫子元件中的任意方法。

小程式是為子元件新增 id或 class，然後透過 this.selectComponent找到子元件，然後再呼叫子元件的方法。

推薦學習：《nodejs影片教學》

以上是vue跟小程式的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！