小編給大家分享一下vue.js與微信小程序有哪些區(qū)別，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

站在用戶的角度思考問題，與客戶深入溝通，找到天元網(wǎng)站設(shè)計(jì)與天元網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋天元地區(qū)。

vue.js與微信小程序區(qū)別：1、vue實(shí)例化后，初始化data，通過【this.】能獲取到data內(nèi)的數(shù)據(jù)；2、小程序中，初始化頁面數(shù)據(jù)之后，是通過【this.data】來獲取頁面的data來獲取頁面對(duì)象的。

vue.js與微信小程序區(qū)別：

一、微信小程序有自己封裝的一套組件視圖容器，它把平時(shí)我們可能會(huì)用的一些頁面視圖效果都進(jìn)行了分裝；

eg:  swiper,scroll-view,表單組件

在Vue項(xiàng)目中，我們可能要通過引入第三方組件庫swiper,表單組件更多的是結(jié)合element-ui或者ant-ui 或者 iview 來實(shí)現(xiàn)表單頁面的實(shí)現(xiàn)。

二、條件渲染與列表渲染

在js中我們都知道，用于條件判斷，用的最多的就是if(){}else{}，而在vue和微信小程序框架中，它對(duì)該類方法進(jìn)行了封裝，通過指令調(diào)用方式來實(shí)現(xiàn)。

vue中：

v-if="Math.random() > 0.5"或者v-if=”true”  //當(dāng)指令的表達(dá)式返回 truthy 值的時(shí)候內(nèi)容會(huì)被渲染

習(xí)慣于vue框架的人，長時(shí)間沒接觸微信小程序的后果：

wx-if=”Math.random() > 0.5”   //報(bào)錯(cuò)倒是不會(huì)，但是并沒有按條件執(zhí)行

然后執(zhí)行，完全沒毛病是不是，可是數(shù)據(jù)就是出不來，我曾經(jīng)反反復(fù)復(fù)檢查了好幾遍代碼，自信絕對(duì)沒問題，再去console后臺(tái)數(shù)據(jù)，返現(xiàn)數(shù)據(jù)是可以console出來的，才驚覺可能是微信小程序的條件渲染不對(duì)，然后查看微信小程序文檔才發(fā)現(xiàn)，在微信里面，都是通過

{{ }} 的語法把一個(gè)變量綁定到界面上的，正確操作

wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”

vue中列表渲染時(shí)，

；

微信小程序中，在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。

默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item；

  {{index}}: {{item.message}}

使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，

使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：

  {{idx}}: {{itemName.message}}

三、數(shù)據(jù)獲取

vue實(shí)例化后，初始化data，通過this.能獲取到data內(nèi)的數(shù)據(jù)，正常操作：

data(){
  return {
    message:””
  }
},
methods:{
  change:function(){
    this.message = “呵呵噠”
  }
}

小程序中，初始化頁面數(shù)據(jù)之后，是通過this.data來獲取頁面的data來獲取頁面對(duì)象的，同樣操作，

data:{
  message:”呵呵”
},
methods:{
  this.data.message = “呵呵噠”;   //視圖界面上的值并沒有發(fā)生改變
}

先不說一不小心this.message，后來幡然醒悟過來這是小程序，那么，問題又來了，視圖界面上的值并沒有發(fā)生變化。

再去查詢文檔（來自微信小程序官方文檔說明）：

1、直接修改 this.data 無效，無法改變頁面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。

2、單次設(shè)置的數(shù)據(jù)不能超過1024kB，請(qǐng)盡量避免一次設(shè)置過多的數(shù)據(jù)。

3、this.data與this.setData的關(guān)系就是this.setData里面存儲(chǔ)的是this.data的副本，而界面是從this.setData里面托管的this.data的副本取數(shù)據(jù)的。所以我們更改this.data并不會(huì)直接更新界面，因?yàn)檫@個(gè)時(shí)候的this.setData里面的副本還是沒有更新前的。

簡而言之，就是，setData 函數(shù)刷新數(shù)據(jù)并展示在頁面上，this.data改變了數(shù)據(jù)，但是不會(huì)改變視圖頁面的內(nèi)容。

所以，正確操作

methods:{
  this.data.message = “呵呵噠”;
  this.setDate({
     message:this.data.message
});
console.log(this.data.message)
}

看完了這篇文章，相信你對(duì)vue.js與微信小程序有哪些區(qū)別有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：vue.js與微信小程序有哪些區(qū)別-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/gjjsi.html