微信小程序和Vue的区别

单向绑定 & 双向绑定

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日 - 学习笔记