Vue与微信小程序的区别与比较分析

写完vue项目和小程序，发现两者有很多相似之处，在这里总结一下它们的异同。

一、生命周期

先粘贴两张图片：

Vue生命周期

小程序生命周期

相比之下，小程序的钩子函数要简单得多。

当vue的hook函数跳转到一个新的页面时，会触发hook函数，但是小程序的hook函数和页面的不同跳转方式会触发不同的hook。加载：页面加载

一个页面只能被调用一次，可以获取调用的查询参数，在onLoad中打开当前页面。

显示：页面显示

每次打开页面时调用。

OnReady:页面是第一次呈现

一个页面只会被调用一次，这意味着该页面已经准备好与视图层交互。

在onReady之后设置接口，如wx.setNavigationBarTitle。详见生命周期。

在侧：页面隐藏

当导航到或底部选项卡切换时调用。

卸载：页面卸载

当重定向到或导航回时调用。

数据请求

当页面加载和请求数据时，钩子的使用有些类似。vue通常在创建或装载的程序中请求数据，而在小程序中，它在onLoad或onShow中请求数据。

二、数据绑定

Vue:当Vue将变量的值动态绑定到元素的属性时，变量的前面会添加一个冒号：例如：

img : src=' Http : img src '/applet:将变量值绑定为元素属性时，会用两个大括号括起来。如果没有添加括号，它将被视为字符串。示例：

image src=' http : { { img src } } '/image iii。列表呈现

直接粘贴代码，两者还是有些相似的：

vue:

ul id=' example-1 ' Li v-for=' items“{ items。message } }/Li/ul varexample 1=new vue({ El : ' # example-1 '，data : { items :[{ message : ' foo ' }，

page({ data : { items :[{ message : ' foo ' }，{ message : ' bar ' }]})text wx : for=' { { items } } ' { { item } }/text IV。显示和隐藏元素

在vue中，v-if和v-show用于控制元素的显示和隐藏。

在小程序中，wx-if和hidden用于控制元素的显示和隐藏。

动词（verb的缩写）事故处理

Vue:使用on:event绑定事件，或者使用@event绑定事件，例如：

按钮v-: click=' counter=1 ' add 1/按钮按钮v-: click。stop=' counter=1 ' add 1/button//在事件冒泡防止小程序中，所有事件都由bindtap(绑定事件)或catchtap(catch事件)绑定，例如：

Button bindtap=' noWork '明天不上班/button button catch tap=' now work '明天不上班/button //防止事件冒泡

第六，数据双向绑定

1.给定值

在vue中，您只需要将v-model添加到表单元素中，然后在数据中绑定一个对应的值。当表单元素的内容改变时，数据中对应的值也会随之改变，这是vue非常好的一点。

Div id=' app '输入v-model=' reason '占位符='填写reason ' class=' reason '//div new vue({ El : ' # app '，data: {reason3360''})，但在小程序中，它没有这个功能。那我们该怎么办？

当表单内容发生变化时，会触发表单元素上的绑定方法，然后在这个方法中，表单上的值会通过this.setData({key:value})赋给数据中对应的值。

这是代码，你可以感觉到：

输入bindinput='绑定原因'占位符='填写原因'类='原因'值=' { {原因}} '名称='原因'/页({data: {reason3360''}，绑定原因(e) {this。setdata ({reason:e。细节。value})})当页面表单元素较多时，更改值是一项体力活动。与第一个小程序相比，vue的v-model简直酷毙了，没有必要。

2.价值获取

在vue中，通过这个获取值。

在小程序中，通过this.data.reason获取值

七、绑定事件传递参数

在vue中，通过绑定事件传递参数是相当简单的，在触发事件的方法中只需要将数据作为形式参数传递即可，例如：

Button @click='say('明天不上班')'/button newvue ({el:' # app '，methods : { say(arg){ agree })。log (arg)}})在小程序中，不能在绑定事件的方法中直接传入参数，需要将参数作为属性值。绑定到元素上的data- attribute，然后通过方法中的e.currentTarget.dataset.*获取，从而完成参数的传递。很麻烦吗.

view class=' tr ' bind tap=' to approve ' data-id=' { { item . id } } '/viewPage({ data : { reason : ' ' })，to approve(e){ let id=e . CurrentTarget . dataset . id；}})八。父子组件通信

1.子组件的使用

在vue中，您需要：

1.写入子组件

2.导入要使用的父组件

3.在vue的组件中注册

4、用于模板

//子组件bar . vuetemplate div class=' search-box ' div @ click=' say ' : title=' title ' class=' icon-miss '/div/div/Templestexport默认{ props : { title : { type : string，默认值：''}}，方法： {say () {console.log('明天不上班')；这个。$ emit(' hello world ')} }/script//父组件foo . vuetemplate div class=' container ' bar : title=' title ' @ hello world=' hello world '/bar/div/Templestimport bar from '。/Bar . vue ' export default { data : { title : '我是标题' }，methods : { hello world(){ console . log('我收到了子组件传递的事件')}}，components 3360 { Bar }/script in small

1.写入子组件

2.在子组件的json文件中，将该文件声明为组件

{'component': true}3。在要导入的父组件的json文件中，在usingComponents中填写导入组件的组件名和路径

使用组件“: {”标签栏“:”././components/tabbar/tabbar'} 4。在父组件中，可以直接引入

Tab-bar当前页面=“索引”/tab-bar特定代码：

//子组件！-components/tabBar/tabBar . wxml-view class=' tabbbar-wrapper ' view class=' left-bar { { current page==' index '？'active ' : ' ' } } ' bind tap=' jumptoindex ' text class=' icon font icon-shoye '/text view主页/view/view class=' right-bar { {当前页面==' setting '？'active ' : ' ' } } ' bind tap=' jump setting ' text class=' icon font icon-shezhi '/textview setting/view/view 2，父组件和子组件之间的通信

在vue，

当父组件向子组件传输数据时，只需要通过v-bind在子组件中传递一个值，在子组件中，通过props接收即可完成数据传输。示例：

//父组件foo . vuetemplate div class=' container ' bar : title=' title '/bar/div/templatestimport bar from '。/Bar。vue ' export default { data : { title : ' I is the title ' }，components 3360 { Bar }/script//subcomponent Bar . vuetemplate div class=' search-box ' div : title=' title '/div/Templestexportdefault { props 3360 { title : { type : string，default 3360 ' ' }/script子组件和父组件可以通过此进行相互通信。$emit

在小程序中

父组件和子组件之间的通信类似于vue，但是applet不传递v-bind，而是直接给变量赋值，如下所示：

TAB-bar当前页面=' index'/TAB-bar这里，“index”是要传递给子组件的值。在子组件属性中，接收传递的值。

properties : {//popup title current page : {//attribute name type : String，//type(必选)，当前接受的类型包括：String、number、boolean、object、array、Null(对于任何类型)value : ' index '//attribute的初始值(可选)。如果没有指定，将根据类型选择一个}}子组件与父组件通信，类似于vue。代码如下：

//子组件中的methods : {//传递给父组件cancelbut 3360 function(e){ var=this；var myeventdetail={ picker show : false，type:' cancel'}//detail对象为此事件侦听器函数提供。triggerevent ('myevent '，myeventdetail)//myevent自定义名称事件。父组件使用}、}//barbind : myevent=' togglestoast '/bar//来获取子组件信息togglestoast(e){ console . log(e . detail)}如果父组件想要调用子组件的方法，

Vue会给一个子组件添加一个ref属性，它可以通过这个的值获得。$refs.ref，然后可以调用子组件中的任何方法，例如：

//子组件bar ref='bar'/bar//父组件this。$ ref . bar . subcomponent的方法小程序是给subcomponent添加id或类，然后通过这个找到subcomponent . selectcomponent，然后调用subcomponent的方法。示例：

//子组件bar id='bar'/bar//父组件this。selectcomponent ('# id ')。syahelo()小程序在这方面与vue过于相似。

摘要

以上就是Vue和边肖介绍的微信小程序的区别和比较。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！