本文不是为了比较双方优劣，是因为我经常在两类项目中切换，有时搞混，列出来方便自己记忆和速查。
| 对比项目 | 微信小程序 | VUE.js |
|---|---|---|
| 模版内显示变量 | ||
| 模版中元素属性使用变量 | view class=”“ | div :class=”var” |
| 元素事件捕获 | bindtap=”userClicked” | @click=”userClicked” |
| 给事件处理函数传递变量 | 在元素上写 data-varname=”“, js中用 event.target.dataset.varname获取 | @click=”userClicked(var1, var2)”，直接写在方法名后，和调用相同 |
| 事件处理函数中获取event | 方法可接收的唯一参数就是event | @click=”userClicked($event)” 在模版中写上特殊变量 $event |
| 阻止事件向父级元素传递 | bindXxx改为catchXXX，例如：catchtap=”userclicked” | 用.stop 例如： @click.stop=”userClicked” 或者@clicked.stop表明不处理直接阻止 |
| 模版内调用JS方法 | 只能调用wxs内声明的方法 | 可以直接调用vue内method段声明的方法 |
| 页面生命周期事件 | onLoad | created |
| onShow | mounted | |
| script部分方法 | 直接写在Page内和onload同级 | 写在methods部分下，methods和created同级 |
| script部分对data的访问 | this.data.xxx | this.xxx |
| component中对props内属性访问 | this.properties.xxx | this.xxx |
| data 部分 | 可在程序中随时增加 | 先在data中声明，不声明的，动态增加 模版部分也不能使用 |
| 模版引用data遇到null | 无显示或显示NULL | 异常出错 |
| 模版内循环 | wx:for=”array” wx:key=”index” wx:item=”item” | v-for=”(item, index) in array” :key=”index” |
| 模版内虚拟元素 | block | template 在v-for上应用时，需要把:key 应用与所有一级子元素并保持key唯一 |
| 自定义组件 | created 方法不能调用 setData，（可用attached事件替代部分） | created 方法可以使用this ，能改变data内数据 |