浅析Vue 和微信小程序的区别、比较


Posted in Javascript onAugust 03, 2018

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

一、生命周期

先贴两张图:

vue生命周期

浅析Vue 和微信小程序的区别、比较

小程序生命周期

浅析Vue 和微信小程序的区别、比较

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

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

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

onShow:页面显示

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

onReady:页面初次渲染完成

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

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

onHide:页面隐藏

当 navigateTo或底部tab切换时调用。

onUnload:页面卸载

当 redirectTo或 navigateBack的时候调用。

数据请求

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

二、数据绑定

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

<img :src="imgSrc"/>

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

<image src="{{imgSrc}}"></image>

三、列表渲染

直接贴代码,两者还是有些相似:

vue:

<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
})

小程序:

Page({
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
})

<text wx:for="{{items}}">{{item}}</text>

四、显示与隐藏元素

vue中,使用 v-if 和 v-show控制元素的显示和隐藏。

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

五、事件处理

vue:使用 v-on:event绑定事件,或者使用 @event绑定事件,例如:

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡

小程序中,全用 bindtap(bind+event),或者 catchtap(catch+event)绑定事件,例如:

<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button> //阻止事件冒泡

六、数据双向绑定

1、设置值

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

<div id="app">
 <input v-model="reason" placeholder="填写理由" class='reason'/>
</div>

new Vue({
 el: '#app',
 data: {
 reason:''
 }
})

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

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

下面是代码,可以感受一下:

<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" />

Page({
data:{
 reason:''
},
bindReason(e) {
 this.setData({
  reason: e.detail.value
 })
 }
})

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

2、取值

vue中,通过 this.reason取值。

小程序中,通过 this.data.reason取值。

七、绑定事件传参

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

<button @click="say('明天不上班')"></button>

new Vue({
 el: '#app',
 methods:{
 say(arg){
 consloe.log(arg)
 }
 }
})

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

<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
 reason:''
},
toApprove(e) {
 let id = e.currentTarget.dataset.id;
 }
})

八、父子组件通信

1、子组件的使用

在vue中,需要:

1、编写子组件

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

3、在 vue的 components中注册

4、在模板中使用

//子组件 bar.vue
<template>
 <div class="search-box">
 <div @click="say" :title="title" class="icon-dismiss"></div>
 </div>
</template>
<script>
export default{
props:{
 title:{
  type:String,
  default:''
  }
 }
},
methods:{
 say(){
  console.log('明天不上班');
  this.$emit('helloWorld')
 }
}
</script>

// 父组件 foo.vue
<template>
 <div class="container">
 <bar :title="title" @helloWorld="helloWorld"></bar>
 </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data:{
 title:"我是标题"
},
methods:{
 helloWorld(){
  console.log('我接收到子组件传递的事件了')
 }
},
components:{
 Bar
}
</script>

在小程序中,需要:

1、编写子组件

2、在子组件的 json文件中,将该文件声明为组件

{
 "component": true
}

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

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

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

<tab-bar currentpage="index"></tab-bar>

具体代码:

// 子组件
<!--components/tabBar/tabBar.wxml-->
<view class='tabbar-wrapper'>
 <view class='left-bar {{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'>
 <text class='iconfont icon-shouye'></text>
 <view>首页</view>
 </view>
 <view class='right-bar {{currentpage==="setting"?"active":""}}' bindtap='jumpToSetting'>
 <text class='iconfont icon-shezhi'></text>
 <view>设置</view>
 </view>
</view>

2、父子组件间通信

在vue中

父组件向子组件传递数据,只需要在子组件通过 v-bind传入一个值,在子组件中,通过 props接收,即可完成数据的传递,示例:

// 父组件 foo.vue
<template>
 <div class="container">
 <bar :title="title"></bar>
 </div>
</template>
<script>
import Bar from './bar.vue'
export default{
data:{
 title:"我是标题"
},
components:{
 Bar
}
</script>

// 子组件bar.vue
<template>
 <div class="search-box">
 <div :title="title" ></div>
 </div>
</template>
<script>
export default{
props:{
 title:{
  type:String,
  default:''
  }
 }
}
</script>

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

在小程序中

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

<tab-bar currentpage="index"></tab-bar>
此处, “index”就是要向子组件传递的值

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

properties: {
 // 弹窗标题
 currentpage: {   // 属性名
  type: String,  // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
  value: 'index'  // 属性初始值(可选),如果未指定则会根据类型选择一个
 }
 }

子组件向父组件通信和 vue也很类似,代码如下:

//子组件中
methods: { 
 // 传递给父组件
 cancelBut: function (e) {
  var that = this;
  var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象,提供给事件监听函数
  this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件,父组件中使用
 },
}

//父组件中
<bar bind:myevent="toggleToast"></bar>

// 获取子组件信息
toggleToast(e){
 console.log(e.detail)
}

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

vue会给子组件添加一个 ref属性,通过 this.$refs.ref的值便可以获取到该子组件,然后便可以调用子组件中的任意方法,例如:

//子组件
<bar ref="bar"></bar>

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

小程序是给子组件添加 id或者 class,然后通过 this.selectComponent找到子组件,然后再调用子组件的方法,示例:

//子组件
<bar id="bar"></bar>

// 父组件
this.selectComponent('#id').syaHello()

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

总结

以上所述是小编给大家介绍的Vue 和微信小程序的区别、比较,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
用javascript获取textarea中的光标位置
May 06 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
Vue 项目分环境打包的方法示例
Aug 03 #Javascript
如何在vue里添加好看的lottie动画
Aug 02 #Javascript
原生js实现form表单序列化的方法
Aug 02 #Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 #Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 #Javascript
vue组件挂载到全局方法的示例代码
Aug 02 #Javascript
原生js封装的ajax方法示例
Aug 02 #Javascript
You might like
PHP使用数组实现队列
2012/02/05 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
详解node.js 事件循环
2020/07/22 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
Python命名空间详解
2014/08/18 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python WSGI的深入理解
2018/08/01 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python多线程抽象编程模型详解
2019/03/20 Python
wxPython实现分隔窗口
2019/11/19 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
什么是Python中的顺序表
2020/06/02 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
自我评价如何写好?
2014/01/05 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
年终总结会主持词
2014/03/25 职场文书
四群教育工作实施方案
2014/03/26 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python