写了vue项目和小程序,发现两者有很多相似之处。这里我想总结一下两者的共性和差异。1.生命周期先贴两张图:vue生命周期小程序生命周期相比之下,小程序的hook函数就简单多了。vuehook函数在跳转到新页面时,会触发hook函数,但是小程序的hook函数,页面的不同跳转方式,触发的hook是不一样的。onLoad:页面加载一个页面只会被调用一次,可以在onLoad中获取调用打开当前页面的查询参数。onShow:每次打开页面都会调用页面显示。onReady:页面初始渲染完成。一个页面只会被调用一次,这意味着该页面已经准备就绪,可以与视图层进行交互了。wx.setNavigationBarTitle等界面设置请在onReady之后设置。详见onHide生命周期:页面隐藏在navigateTo或底部tab切换时调用。onUnload:页面卸载时在redirectTo或navigateBack时调用。数据请求页面加载时请求数据,这两个钩子的使用有些类似。Vue一般在created或者mounted中请求数据,而在小程序中则是在onLoad或者onShow中请求数据。2.数据绑定VUE:Vue动态绑定一个变量值到元素的一个属性时,会在变量前加一个冒号:,例如:小程序:绑定时变量的值是一个元素属性,它将被括在两个大括号中。如果没有大括号,它将被认为是一个字符串。example:3.直接贴出列表渲染的代码,两者还是有点类似vue:varexample1=newVue({el:'#example-1',data:{items:[{message:'Foo'},{message:'Bar'}]}})applet:Page({data:{items:[{message:'Foo'},{message:'bar'}]}})四、显示和隐藏元素在vue中,使用v-if和v-show控制元素的显示和隐藏在小程序中,使用wx-if和hidden控制元素的显示和隐藏五、事件处理vue:使用v-on:event绑定事件,或者使用[@event](https://github.com/event"@event")绑定事件,例如:Add1Add1//小程序中为了防止事件冒泡,使用bindtap(bind+event)或catchtap(catch+event)绑定事件,例如:明天不上班明天不上班//防止事件冒泡ng6.数据双向绑定1.在vue中设置值,只需要在form元素中添加v-model,然后在data中绑定一个对应的值即可。当表单元素的内容发生变化时,相应的data中的值也会随之变化,这是vue非常好的一点。newVue({el:'#app',data:{reason:''}})但是在小程序中,没有这个功能。那我们该怎么办呢?当表单内容发生变化时,会触发表单元素上绑定的方法,然后在该方法中通过this.setData({key:value})将表单上的值赋值给data中对应的值。下面是代码,大家可以感受一下:表单元素,更改值是一些手动工作。与小程序相比,vue的v-model简直酷毙了,没必要。2.在vue中,在小程序中使用this.reason获取值,使用this.data.reason获取值。在方法中,将需要传入的数据作为形参传入即可,例如:newVue({el:'#app',methods:{say(arg){consloe.log(arg)}}})在小程序中,不能在绑定事件的方法中直接传递参数。参数需要作为属性值,绑定到元素上的data-attribute,然后在方法中通过e.currentTarget.dataset.*获取,从而完成参数的传递,非常麻烦。有没有...Page({data:{reason:''},toApprove(e){letid=e.currentTarget.dataset.id;}})8.父子组件通信1.子组件的使用vue中的组件需要:编写子组件,在需要使用的父组件中通过import引入,在vue组件中注册,在模板中使用//子组件bar.vue