美文网首页
微信小程序和Vue的区别

微信小程序和Vue的区别

作者: _doir | 来源:发表于2020-04-15 12:32 被阅读0次

单向绑定 & 双向绑定

  1. 微信小程序只支持单向绑定,如果需要修改data的值,只能通过setData操作。
  2. Vue可以双向绑定,通过v-model

Mustache 语法支持(双括号{{}}中的表达式)

  1. 微信小程序只支持基本的三元运算、算数运算、逻辑判断、字符串运算、数据路径运算、数组对象以及 ... 扩展运算符。扩充wxs之后,可以自定义一些方法调用(PS:wxs语法比较别扭,es6不怎么支持,正则之类的写法都别扭)
  2. Vue支持全功能的JS表达式,特别是函数方法调用,比较方便。

视图更新

  1. 微信小程序初始化之后,针对data中的数据对象的任何修改(this.data.xxx=yyy)都不会触发视图更新,必须通过setData方法指定具体key值数据同步,才会触发视图的更新。
  2. Vue初始化时,会对data中的数据进行监听,只要数据修改(this.xxx=yyy),就会触发视图更新。
  3. 注意:Vue初始化只会监听已有字段,如果需要在data中新增属性key,需要调用$set方法,才能新增属性key并同时添加监听事件。直接操作data增加key,无法被Vue探测,无法响应式更新视图,会有延迟。

事件冒泡阻止

  1. 微信小程序事件冒泡,只能通过不同事件来操作,bindxxx事件不阻止冒泡,catchxxx事件阻止冒泡,如果需要动态判定,只能通过控制不同组件。
  2. Vue事件冒泡就是标准的web处理,在事件调用后通过代码触发,或者使用便捷语法.stop。W3C:e.stopPropagation()。或者IE:e.cancelBubble = true

扩展

  • 小程序的逻辑层和渲染层是分开的
  • 逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API;视图层的模板渲染、事件派发等操作都在native环境中。
  • 数据对象(view-model)在两层间没有共享,同步通信成本太高,所以两层间通信类的操作就不太完善。
  • 下表为小程序的运行环境:
运行环境 逻辑层 渲染层
iOS JavaScriptCore WKWebView
安卓 V8 chromium定制内核
小程序开发者工具 NWJS Chrome WebView

2020年04月15日 - 学习笔记

相关文章

  • mpvue

    问:mpvue里,哪些是要用微信小程序原生写法?(也就是mpvue和vue的区别) 答:vue里跳转页面,用

  • 微信小程序和Vue的区别

    单向绑定 & 双向绑定 微信小程序只支持单向绑定,如果需要修改data的值,只能通过setData操作。Vue可以...

  • 微信小程序和vue的区别

    数据类型 vue组件中data必须是函数 data(){return{}},new Vue中的选项可以是函数也可以...

  • uniapp

    开发工具开发者中心如何学习?vue和微信小程序的区别、比较uni-app官方教程学习手记Vue单文件组件 (SFC...

  • 微信小程序开发笔记

    微信小程序开发和vue开发差不多 使用SpringBoot开发微信小程序后台 这次开发和以往不同的是使用了聚合工程...

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

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。 一、生命周期 先贴两张图: v...

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

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。 一、生命周期 先贴两张图: v...

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

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。 一、生命周期 先贴两张图: v...

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

    链接:https://segmentfault.com/a/1190000015684864 一、生命周期 先贴两...

  • 支付宝小程序怎么转成微信小程序

    把支付宝小程序和微信小程序的区别理清的话,把支付宝小程序和微信小程序进行相互转换,其实很简单 wxml: 把项目里...

网友评论

      本文标题:微信小程序和Vue的区别

      本文链接:https://www.haomeiwen.com/subject/lutcvhtx.html