mpvue 除了 Vue 本身的生命周期外，还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期 钩子。
Vue beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed app 部分 onLaunch，初始化 onShow，当小程序启动，或从后台进入前台显示 onHide，当小程序从前台进入后台 page 部分 onLoad，监听页面加载 onShow，监听页面显示 onReady，监听页面初次渲染完成 onHide，监听页面隐藏 onUnload，监听页面卸载 onPullDownRefresh，监听用户下拉动作 onReachBottom，页面上拉触底事件的处理函数 onShareAppMessage，用户点击右上角分享 onPageScroll，页面滚动 onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）
简单示例
new Vue({ data: { a: 1 }, created () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) }, onShow () { // `this` 指向 vm 实例 console.log('a is: ' + this.a, '小程序触发的 onshow') } }) // => "a is: 1"
taro与react生命周期完全相同
class Clock extends Component { constructor (props) { super(props) this.state = { date: new Date() } } componentDidMount() { } componentWillUnmount() { } render () { return ( <View> <Text>Hello, world!</Text> <Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text> </View> ) } }
列表渲染
在列表渲染上三者也分别有不同的应用方法
wepy当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签<repeat>
<template> <!-- 注意，使用for属性，而不是使用wx:for属性 --> <repeat for="{{list}}" key="index" index="index" item="item"> <!-- 插入<script>脚本部分所声明的child组件，同时传入item --> <child :item="item"></child> </repeat> </template> <script> import wepy from 'wepy'; // 引入child组件文件 import Child from '../components/child'; export default class Index extends wepy.component { components = { // 声明页面中要使用到的Child组件的ID为child child: Child } data = { list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}] } } </script>
mpvue使用v-for与vue一致,只是需要注意一点，嵌套列表渲染，必须指定不同的索引！
<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 --> <template> <ul v-for="(card, index) in list"> <li v-for="(item, itemIndex) in card"> {{item.value}} </li> </ul> </template>
taro的列表循环用法基本与react相同,有一点需要注意,在 React 中，JSX 是会编译成普通的 JS 的执行，每一个 JSX 元素，其实会通过 createElement 函数创建成一个 JavaScript 对象（React Element），因此实际上你可以这样写代码 React 也是完全能渲染的：
const list = this.state.list.map(l => { if (l.selected) { return <li>{l.text}</li> } }).filter(React.isValidElement)
但是 Taro 中，JSX 会编译成微信小程序模板字符串，因此你不能把 map 函数生成的模板当做一个数组来处理。当你需要这么做时，应该先处理需要循环的数组，再用处理好的数组来调用 map 函数。例如上例应该写成：
const list = this.state.list .filter(l => l.selected) .map(l => { return <li>{l.text}</li> })
事件处理
mpvue目前全支持小程序的事件处理器,引入了 Vue.js 的虚拟 DOM ，在前文模版中绑定的事件会被挂在到 vnode 上，同时 compiler 在 wxml 上绑定了小程序的事件，并做了相应的映射，所以你在真实点击的时候通过 runtime 中 handleProxy 通过事件类型分发到 vnode 的事件上，同 Vue 在 WEB 的机制一样，所以可以做到无损支持。同时还顺便支持了自定义事件和 $emit 机制
// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件 { click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'tap', longtap: 'longtap', input: 'input', change: 'change', submit: 'submit', blur: 'blur', focus: 'focus', reset: 'reset', confirm: 'confirm', columnchange: 'columnchange', linechange: 'linechange', error: 'error', scrolltoupper: 'scrolltoupper', scrolltolower: 'scrolltolower', scroll: 'scroll' }
踩坑注意(官方文档)：