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

作者：卖女孩的小火柴

链接：https://segmentfault.com/a/1190000015684864

写了vue项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别。

一、生命周期

先贴两张图：

vue生命周期

小程序生命周期

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

vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad：页面加载

一个页面只会调用一次，可以在 中获取打开当前页面所调用的 参数。

onShow：页面显示

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

onReady：页面初次渲染完成

一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

对界面的设置如 请在 之后设置。详见生命周期。

onHide：页面隐藏

当 或底部tab切换时调用。

onUnload：页面卸载

当 或 的时候调用。

数据请求

在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在 或者 中请求数据，而在小程序，会在 或者 中请求数据。

二、数据绑定

vue：vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：，例：

小程序：绑定某个变量的值为元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。例：

三、列表渲染

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

vue：

小程序：

四、显示与隐藏元素

vue中，使用 和 控制元素的显示和隐藏。

小程序中，使用 和 控制元素的显示和隐藏。

五、事件处理

vue：使用 绑定事件，或者使用 绑定事件，例如：

小程序中，全用 ，或者 绑定事件，例如：

六、数据双向绑定1、设置值

在vue中，只需要再表单元素上加上 ,然后再绑定 中对应的一个值，当表单元素内容发生变化时， 中对应的值也会相应改变，这是vue非常nice的一点。

但是在小程序中，却没有这个功能。那怎么办呢？

当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过 来将表单上的值赋值给 中的对应值。

下面是代码，可以感受一下：

当页面表单元素很多的时候，更改值就是一件体力活了。和小程序一比较，vue的 简直爽的不要不要的。

2、取值

vue中，通过 取值。

小程序中，通过 取值。

七、绑定事件传参

在vue中，绑定事件传参挺简单，只需要在触发事件的方法中，把需要传递的数据作为形参传入就可以了，例如：

在 中，不能直接在绑定事件的方法中传入参数，需要将参数作为属性值，绑定到元素上的 属性上，然后在方法中，通过 的方式获取，从而完成参数的传递，很麻烦有没有...

八、父子组件通信1、子组件的使用

在vue中，需要：

1、编写子组件

2、在需要使用的父组件中通过 引入

3、在 的 中注册

4、在模板中使用

在小程序中，需要：1、编写子组件2、在子组件的 文件中，将该文件声明为组件

3、在需要引入的父组件的 文件中，在 填写引入组件的组件名以及路径

4、在父组件中，直接引入即可

具体代码：

2、父子组件间通信

在vue中

父组件向子组件传递数据，只需要在子组件通过 传入一个值，在子组件中，通过 接收，即可完成数据的传递，示例：

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

在小程序中

父组件向子组件通信和vue类似，但是小程序没有通过 ，而是直接将值赋值给一个变量，如下：

此处， “index”就是要向子组件传递的值。

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

子组件向父组件通信和 也很类似，代码如下：

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

vue会给子组件添加一个 属性，通过 便可以获取到该子组件，然后便可以调用子组件中的任意方法，例如：

是给子组件添加 或者 ，然后通过 找到子组件，然后再调用子组件的方法,示例：

小程序和vue在这点上太相似了，有木有。。

●编号758，输入编号直达本文

●输入m获取文章目录

推荐↓↓↓

Web开发

更多推荐《18个技术类微信公众号》

涵盖：程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。