vue.js與微信小程式區別是什麼

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中文網其他相關文章！