当前位置: 首页 > 科技观察

vue和微信小程序的区别和比较

时间:2023-03-13 08:28:00 科技观察

写了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:{{item.message}}varexample1=newVue({el:'#example-1',data:{items:[{message:'Foo'},{message:'Bar'}]}})小程序:Page({data:{items:[{message:'Foo'},{message:'Bar'}]}}){{item}}4.显示和隐藏元素在vue中,使用v-if和v-show控制元素的显示和隐藏在小程序中,使用wx-if和hidden控制显示和隐藏5.事件处理Vue:使用v-on:event绑定事件,或者使用@event绑定事件,例如:Add1Add1//在小??程序中防止事件冒泡,使用bindtap(bind+event)或catchtap(catch+event)绑定事件,例如:明天不要去上班明天不要去上班//防止事件冒泡6.双向数据绑定1.在vue中设置值,只需在表单元素模型中添加v-,然后在data中绑定一个对应的值。当表单元素的内容发生变化时,data中对应的值也会随之变化。这是Vue的一个非常好的点。

newVue({el:'#app',data:{reason:''}})但是在小程序中,没有这个功能。那我们该怎么办呢?当表单内容发生变化时,会触发表单元素上绑定的方法,然后在该方法中通过this.setData({key:value})将表单上的值赋值给data中对应的值。下面是代码,大家可以感受一下::{reason:''},bindReason(e){this.setData({reason:e.detail.value})}})当页面表单元素较多时,改值是体力活。与小程序相比,vue的v-model简直酷毙了,没必要。2.在vue中,在小程序中使用this.reason获取值,使用this.data.reason获取值。在方法中,将需要传入的数据作为形参传入即可,例如:newVue({el:'#app',methods:{say(arg){consloe.log(arg)}}})在小程序中,不能在绑定事件的方法中直接传入参数。需要将参数作为属性值绑定到data-属性上,然后在方法中,通过e.currentTarget.dataset.*获取,这样才能完成参数传递,是不是很麻烦。..页面({data:{reason:''},toApprove(e){letid=e.currentTarget.dataset.id;}})八、父子组件通信1.Child在vue中使用组件需要:编写子组件,在需要使用的父组件中通过import引入,注册在vue组件,在模板中使用//子组件bar.vue//父组件foo.vue在小程序中,需要:1.编写子组件2.在子组件的json文件中,声明文件为组件{"component":true}3.在需要导入的父组件的json文件中,填写组件usingComponents中引入的组件名称和路径"usingComponents":{"tab-bar":"../../components/tabBar/tabBar"}4.在父组件中,直接引入即可具体代码://subcomponent首页Setting二、亲子沟通components在Vue中,父组件向子组件传递数据,你只需要在子组件中通过v-bind传入一个值,在子组件中通过props接收即可完成数据传递。父组件foo.vue//subcomponentbar.vue子组件和父组件之间的通信可以传递方法和数据到父组件通过this.$emit在小程序中,父组件和子组件的通信类似于vue,但是小程序不通过v-bind,而是直接给一个变量赋值,如下:此处,“index”是要传递给子组件的值。在子组件属性中,接收传入的值properties:{//popupwindowtitlecurrentpage:{//propertynametype:String,//type(required),目前接受的类型包括:String,Number,Boolean,Object,Array,null(代表任意类型)value:'index'//属性初始值(可选),不指定则根据类型选择一个}}子组件与父组件的通信类似看。代码如下://子组件中的方法:{//传递给父组件cancelBut:function(e){varthat=this;varmyEventDetail={pickerShow:false,type:'cancel'}//detail对象,提供给事件监听函数this.triggerEvent('myevent',myEventDetail)//myevent自定义名称事件,在父组件中使用},}////获取子组件信息toggleToast(e){console.log(e.detail)}如果父组件要调用子组件的方法,vue会给子组件添加一个ref属性,通过this.$refs取值of.ref可以从子组件中获取,然后可以调用子组件中的任意方法,例如://childcomponent//parentcomponentthis.$ref。bar子组件的方法就是给子组件添加一个id或者class,然后通过this.selectComponent找到子组件,然后调用子组件的方法,例子://subcomponent//父组件this.selectComponent('#id').syaHello()小程序和vue在这一点上太像了,没有这回事。.九、还有很多废话没写出来,以后再补充和简化。感觉自己写的有点多余,请勿喷!!!如果觉得有帮助,请点赞收藏