vue.js與微信小程式區別：1、vue實例化後，初始化data，透過【this.】能取得data內的資料；2、小程式中，初始化頁面資料之後，是透過【this.data】來取得頁面的data來取得頁面物件的。
【相關文章推薦：vue.js】
vue.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)
}相關免費學習推薦：JavaScript（影片）
以上是vue.js與微信小程式區別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
