vue和微信小程序之间的差异，比较

Vue和微信小程序，在开发微信小程序时，两者之间有很多相似之处，存在一些差异，以下是vue与微信小程序之间差异的总结，比较。

首先，生命周期

首先放两张照片：

Vue生命周期

小程序生命周期

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

Vue的钩子函数会在跳转到新页面时触发，但是小程序的钩子函数，页面的跳转模式不同，触发器钩子也不一样。

onLoad:页面加载

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

onShow:页面显示

每次打开页面时都会调用一次。

onReady:页面初始渲染完成

页面仅调用一次，表示页面已准备好与视图层交互。

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

onHide: Page Hidden

切换navigateTo或底部选项卡时调用。

onUnload:页面卸载

在redirectTo或navigateBack时调用。

数据请求

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

二，数据绑定

VUE: vue动态地将变量绑定到元素的某个属性，它前面会有冒号：例如：

小程序：当变量的值绑定到元素属性时，它被括在两个大括号中。如果没有括号，则将其视为字符串。例如：

三，列表呈现

直接粘贴代码，两者仍然有点相似

Vue：{{item.message}} varexample1=newVue（{el:'＃example-1'，data: {items: [{message:'Foo'}，{message:'Bar'}]}}}）小程序： Page（{data: {items: [{message:'Foo'}，{message:'Bar'}]}}} {{item}} IV。显示和隐藏元素

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

在小程序中，使用wx-if和隐藏控件元素来显示和隐藏

V.事件处理

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

Add1Add1 //阻止事件冒泡

小程序，都使用bindtap（bind + event）或catchtap（catch + event）绑定事件，例如：

明天不去上班，明天不上班，停止冒泡，双重绑定数据。 1.设置值

在vue中，您只需要将v-model添加到表单元素，然后绑定数据中的相应值。当表单元素的内容发生更改时，数据中的相应值将相应更改。这是非常好的。一点点。

newVue（{el:'＃app'，数据: {原因:''}}）

但是在小程序中，没有这样的功能。那我们该怎么办？

当表单内容更改时，它将触发在表单元素上绑定的方法，然后在此方法中，通过this.setData（{key: value}）将表单上的值分配给数据中的相应值。

下面是代码，你可以感受到:

Page（{data: {reason:''}，bindReason（e）{this.setData（{reason: e.detail.value}）}}）

当有很多页面表单元素时，更改值是很多工作。与小程序相比，vue的v-model并不酷。

2.值

在vue中，取this.reason的值

在小程序中，取this.data.reason的值

七，绑定事件传递参数

在vue中，绑定事件非常简单。您只需要传递您需要传递的数据作为触发事件的方法中的形式参数，例如：

newVue（{el:'＃app'，methoss: {say（arg）{consloe.log（arg）}}}）

在小程序中，您无法直接在绑定事件的方法中传递参数。你需要将参数作为属性值绑定到元素上的data-attribute，然后在方法中，通过e.currentTarget.dataset。*获取，从而完成参数的传递，这很麻烦.

Page（{data: {reason:''}，toApprove（e）{letid=e.currentTarget.dataset.id;}}）八，父子组件通信1.子组件的使用

在vue中，您需要：

子组件写在需要使用的父组件中。导入由vue组件引入。子组件用于模板中。 //子组件bar.vue //父组件foo.vue

在小程序中，您需要：

1.编写子组件

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

{'component': true}

3.在需要导入的父组件的json文件中，在usingComponents中填写导入组件的组件名称和路径

'usingComponents': {'tab-bar':'././components/tabBar/tabBar'}

4.在父组件中，您可以直接引入它

具体代码:

//子组件主页设置2. vue

中父组件和子组件之间的通信 父组件将数据传递给子组件。它只需要通过v-bind将值传递给子组件。在子组件中，数据可以通过props传递，例如:

//父组件foo.vue //子组件bar.vue

子组件和父组件通信可以通过此。$ emit将方法和数据传递给父组件。

在小程序中 父组件与vue类似地与子组件通信，但小程序不传递v-bind，而是直接将值赋给变量，如下所示：

这里，“index”是要传递给子组件的值

在子组件属性中，接收传递的值

属性: {//popup title currentpage: {//属性名称类型:字符串，//类型（必需），当前接受的类型包括：String，Number，Boolean，Object，Array，null（对于任何类型）值: 'index'//属性初始值（可选），如果未指定，将根据类型}}

进行选择 与父组件的子组件通信类似于vue，代码如下:

//子组件中的方法: {//传递给父组件cancelBut:函数（e）{varthat=this; varmyEventDetail={pickerShow: false，类型:'取消'} //详细对象，提供给事件监听器函数这个。 triggerEvent（'myevent'，myEventDetail）//myevent自定义名称事件，在父组件中使用}，} //父组件//获取子组件信息toggleToast（e）{console.log（e.detail）}

如果父组件想要调用子组件的方法

Vue将为子组件添加ref属性。子组件可以通过this。$ refs.ref的值获得，然后可以调用子组件中的任何方法，例如：

//子组件//父组件this。$ ref.bar。子组件方法

小程序是向子组件添加id或类，然后通过this.selectComponent查找子组件，然后调用子组件方法，例如：

//子组件//父组件this.selectComponent（'＃id'）。syaHello（）

以上是这个vue和微信小程序之间的区别，你注意到了吗？

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。