簡而言之，所有的框架都是建立在原生javascript基礎之上的，所以對於有一定js基礎的同學來說，各種框架都是比較容易入手的，但不同的框架之間又有一定的差別，有時候切換使用時就會掉入坑了。
一、微信小程序有自己封裝的一套組件視圖容器，它把平時我們可能會用的一些頁面視圖效果都進行了分裝；
eg: swiper,scroll-view,表單組件
在Vue項目中，我們可能要通過引入第三方組件庫swiper,表單組件更多的是結合element-ui或者ant-ui 或者 iview 來實現表單頁面的實現。
二、條件渲染與列表渲染
在js中我們都知道，用於條件判斷，用的最多的就是if(){}else{}，而在vue和微信小程序框架中，它對該類方法進行了封裝，通過指令調用方式來實現。
vue中：
v-if="Math.random() > 0.5"或者v-if=”true” //當指令的表達式返回 truthy 值的時候內容會被渲染
習慣於vue框架的人，長時間沒接觸微信小程序的后果：
wx-if=”Math.random() > 0.5” //報錯倒是不會，但是並沒有按條件執行
然后執行，完全沒毛病是不是，可是數據就是出不來，我曾經反反復復檢查了好幾遍代碼，自信絕對沒問題，再去console后台數據，返現數據是可以console出來的，才驚覺可能是微信小程序的條件渲染不對，然后查看微信小程序文檔才發現，在微信里面，都是通過
{{ }} 的語法把一個變量綁定到界面上的，正確操作
wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”
vue中列表渲染時，
<p v-for=”(index,item) in array” :key=”item.id”></p>；
微信小程序中，在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item；
<view wx:for="{{array}}"> {{index}}: {{item.message}} </view>
使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>
三、數據獲取
vue實例化后，初始化data，通過this.能獲取到data內的數據，正常操作：
data(){ return { message:”” } }, methods:{ change:function(){ this.message = “呵呵噠” } }
小程序中，初始化頁面數據之后，是通過this.data來獲取頁面的data來獲取頁面對象的，同樣操作，
data:{ message:”呵呵” }, methods:{ this.data.message = “呵呵噠”; //視圖界面上的值並沒有發生改變 }
先不說一不小心this.message，后來幡然醒悟過來這是小程序，那么，問題又來了，視圖界面上的值並沒有發生變化。
再去查詢文檔（來自微信小程序官方文檔說明）：
1、直接修改 this.data 無效，無法改變頁面的狀態，還會造成數據不一致。
2、單次設置的數據不能超過1024kB，請盡量避免一次設置過多的數據。
3、this.data與this.setData的關系就是this.setData里面存儲的是this.data的副本，而界面是從this.setData里面托管的this.data的副本取數據的。所以我們更改this.data並不會直接更新界面，因為這個時候的this.setData里面的副本還是沒有更新前的。
簡而言之，就是，setData 函數刷新數據並展示在頁面上，this.data改變了數據，但是不會改變視圖頁面的內容。
所以，正確操作
methods:{ this.data.message = “呵呵噠”; this.setDate({ message:this.data.message }); console.log(this.data.message) }
四、順道記下vue中$set的使用
在vue開發過程中，當vue實例創建之后再去添加新的給數據添加新的屬性時，會發現數據並沒有自動更新到視圖上去。
原因：受現代 JavaScript 的限制，Vue 不能檢測到對象屬性的添加或刪除。vue實例化數據項時，會通過Object.defineProperty的getter和seter方法對數據進行module層和view層數據的相應和改變。所以，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它
解決方法：
Vue.set( target, key, value )；
參數：
{Object | Array} target
{string | number} key
{any} value
向響應式對象中添加一個屬性，並確保這個新屬性同樣是響應式的，且觸發視圖更新,它必須用於向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性。
data(){ return{ stuff:{ name:”xiaoling”, age:”28” } } }, methods:{ change:function(){ this.sex=”女”； // 不會在頁面上看到修改效果 this.$set(stuff,“sex”,”女”) //完美 } }
五、記錄一下神坑
微信小程序官方文檔：微信小程序頁面路徑只能是五層，應盡量避免多層級的交互方式；所以當我們使用wx.navigateTo跳轉的正開心突然不能跳轉的時候，不要懷疑人生，微信做了限制，可以通過使用wx.redirectTo來實現但是redirect設置關閉了當前頁，頁面返回效果就沒有了，還是要看交互最終的效果是否可行。