阅读 3006

小程序和vue简单对比

原文链接: zhuanlan.zhihu.com

简单聊两句

小程序是微信开发的一种不需要下载安装即可使用的应用,目前只能在微信中使用,开发使用微信的小程序开发语言,vue是尤雨溪大神开发的一套构建用户界面的渐进式框架,可以很好的开发单页面应用程序,开发语言js,或者不久将支持的ts

数据绑定对比

内容绑定,两者采用的都是 Mustache 语法(双大括号):

小程序的内容绑定-官方案例
vue的内容绑定-官方案例

有一点不同的是:vue的内容可以是html,而小程序不行,小程序会把你写的标签字段完全展示为字符串,如下:

小程序不支持显示内容显示html

而我们在vue中可以使用v-html指令显示html

vue使用v-html指令显示html-官方案例

那么在小程序开发过程中,我们有时会收到服务器返回的html代码,(注意:小程序不支持原生的HTML标签),我们要怎么显示出来呢,这里我推荐一个插件wxParse,使用wxParse,我们就可以显示我们的HTML代码了,而且可以把HTML格式转化为wxml格式,非常的好用哦。

组件属性的绑定对比:

小程序组件属性绑定-官方案例
vue使用v-bind指令给组件绑定属性-官方案例

组件属性的获取:

小程序中有一个event,可以通过点击事件传入响应函数,我们在这里看看event都包含什么:

展示event的demo
小程序event所包含的属性

通过event,我们可以发现currentTarget.id就是组件的id属性,currentTarget.dataset这里包含的是我们自定义的属性字段,但是我们并没有发现style这个属性出现在哪一个字段中,答案是:我们没有办法获取到除了id和自定义以外的其他属性,解决方法可以把属性变成自定义属性,或者复制一份自定义属性,然而这并不是数据驱动所推荐的。

有没有思考过,通过这个组件,获取到另一个组件的属性,这种想法就是原始的jq时代的dom操作为王的年代的遗留恶习,小程序最重要的一点:小程序不允许dom操作,所有想要的数据都在data字段中,去里面取就好了嘛!

vue 获取组件属性

vue的组件属性获取分为:获取自身属性、父组件获取子组件的属性、子组件获取父组件的属性;

获取自身属性:直接在data字段中查询即可,如需必要刻意使用refs操作dom,不过不推荐

父子之间属性的相互获取参考官网:组件这一章节

列表渲染:

小程序列表渲染--官方案例
vue列表渲染--官方案例

除了语法不同外,小程序是不可以对对象类型进行渲染的,这一点与vue是不同的。

关于小程序的wx:key和vue的:key是设定是一样的,这里也推荐在做列表渲染的时候,给出key这个字段!

条件渲染:

小程序的条件渲染
vue的条件渲染

两者几乎是一样的,不过在一些细节上有所不同比如:小程序中使用hidden属性也可以控制组件的渲染,而vue使用v-show指令;具体可以看官网介绍。

模板的定义:

小程序和.vue文件都是使用<template>标签来定义模板的,在这一方面上,两者并没有多大区别,然而需要注意的是vue中模板的定义远不止这一种,具体的可以参考官网,这里不做更多描述。

模板的引用:

小程序通过import或者include命令引入模板,引入后通过template中的is属性即可指定对应的模板来使用,vue通过把模板(组件)注册在components加以使用

模板的数据传递:

小程序中的模板没有自己的作用域,也就是模板中不能有自己的变量,只能使用data传入的数据,而vue中既可以有自己的作用域data,也可以通过props接受父组件传递过来的数据

小程序中的模板定义
小程序中的模板引用以及数据传递
页面显示
vue中的父子之间的参数传递--官方案例

事件的对比:

小程序中普通组件支持的事件分类:

小程序组件事件分类

其中使用bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。小程序事件的优势是微信已经给我们封装好了相应的事件,我们只需要调用即可,不过对于不支持的事件,我们是没办法调用的

vue中通过v:on或者简写的"@"符号绑定事件,不过vue更人性化或者更方便的是事件修饰符和键值修饰符的使用。

关于事件传参:

vue的事件传参和我们使用js一样,只是要使用原生的event事件时,把$event传入函数即可;而小程序的事件传参,组件的响应事件不能写入任何参数,而是默认携带了一个event的事件状态,如果我们想要传递参数怎么办,使用自定义的data-字段,通过e.currentTarget.dataset来获取。

小程序的事件传参
vue事件传参--官方案例

关于模板事件的参数传递:

小程序模板事件的参数传递
vue中的hello组件(props接受父组件传递的数据,data是子组件自己的作用域)
vue中的父组件传递数据,接受子组件的事件响应

数据绑定问题:

小程序中的数据绑定是单向绑定,也就是

小程序的数据绑定

而vue中的模型是双向绑定,即:

vue的数据绑定

小程序是通过setdata方法来改变model,同时更新视图,而vue是利用对象属性的getter和setter来同时更新view和model,两者不同的设计给我们的代码操作就会有所不同:

对字面性变量的更改
对引用性变量的更改

结束语

基础的对比就写到这里,后面会讲一些我在开发过程中遇到的坑,如有错误,欢迎指正!

文章分类
前端