mpvue与vue的不同

细数 mpvue 与微信小程序的不同

模板语法

模板绑定：

mpvue 与微信小程序都采用 Mustache 语法进行状态绑定
mpvue 可以通过 v-bind 绑定状态，而微信小程序通过 Mustache 语法绑定状态

html

<!-- mpvue -->
<div>{{data}}</div>
<input :value="value">

<!-- 微信小程序 -->
<div>{{data}}</div>
<input value="{{value}}">

状态更新：

mpvue 与微信小程序状态更新方法不同，mpvue 直接通过 this.xxx 修改状态值，微信小程序通过 this.setData 更新状态
微信小程序通过 this.setData 传入第二个参数，实现状态更新后的回调

// mpvue 更新状态
this.name = 'new state'

// 微信小程序状态更新后回调函数
function callback() { 
  // ... 
}
// 微信小程序更新状态，状态更新后进行回调
this.setState({
  name: 'new state'
}, callback)

过滤器：

mpvue 不支持过滤器
微信小程序可以通过 wxs 实现类似过滤器功能

需要注意 mpvue 或微信小程序都不支持直接在 wxml 中使用 methods，小程序中必须通过 wxs 实现。

计算属性和监听器

mpvue 默认支持计算属性和监听器特性
微信小程序默认不支持计算属性和监听器，如需支持可以使用官方组件库 Computed，使用时有以下两点需要注意
- Computed 库需要在 Component 组件中使用，在 Page 中不能生效
- 使用 computed 计算属性时，不支持通过 this.data 获取 data 对象，需要通过 computed 方法的第一个参数获取

computed: {
  sum(data) {
    return data.a * data.b
  }
}

微信小程序的监听器功能非常强大，支持同时监听多个元素，并支持监听对象的属性值和数组的某一个特定元素，而 mpvue 的监听器仅支持监听一个 data 中的状态。

style 和 class 绑定

mpvue 通过 v-bind:style 和 v-bind:class 绑定 style 和 class 对象
微信小程序通过动态插入状态值修改 style 和 class 属性

html

<!-- mpvue -->
<div :style="{fontSize: '14px'}">mpvue</div>
<div :class="isError ? 'error' : ''">mpvue</div>

<!-- 微信小程序 -->
<div style="font-size: {{fontSize}}px;">mpvue</div>
<div class="{{isError ? 'error' : ''}}">mpvue</div>

条件与列表渲染

条件渲染：

mpvue 实现条件渲染的方式有两种：v-if 和 v-show，两者的区别是
- v-if 为 false 时 DOM 将不渲染
- v-show 仅改变 css 属性 display 的值，为 false 时，值为 none
- v-if 配套的指令有：v-else-if 和 v-else，与条件语句类似
微信小程序实现条件渲染的方式有两种：wx-if 和 hidden，两者的区别是
- wx-if 为 false 时 DOM 将不渲染
- hidden 仅改变 css 属性 display 的值，为 true 时，值为 none
- wx-if 配套的指令有：wx-elif 和 wx-else，与条件语句类似列表渲染：
mpvue 通过 v-for 和 v-bind:key 实现列表渲染
微信小程序通过 wx-for、wx-for-index、wx-for-item 和 wx-key 实现列表渲染
mpvue 和微信小程序都能够支持数组、对象、字符串等数据结构的遍历

表单控件绑定

mpvue 通过 v-model 实现表单组件的双向数据绑定
微信小程序通过基础组件 form 实现表单绑定

html

<form bindsubmit="register">
  <view class="form-item">
    <text class="form-item-label">用户名：</text>
    <input 
      class="form-item-value" 
      placeholder="请输入用户名" 
      name="username" 
    />
  </view>
</form>

绑定的关键步骤如下：

将表单控件写在 form 容器中，通过 name 属性绑定表单控件；
绑定 form 的 submit 方法，通过该方法中的 event.detail.value 获取表单对象值。

微信小程序官方为我们提供了 weui-miniprogram 组件库，其中包含 mp-form 和 mp-cell 组件，可以实现表单异常校验、错误提示、定制表单项等复杂功能，微信小程序和 mpvue 都可以使用，推荐大家使用这种方案来实现表单。

组件化

mpvue 实现组件化的方案是使用微信小程序 wxml 的模板引用特性
wxml 模板引用包含 import 和 include 两种方案，import 是模板引用，需要手动传入 data 属性，而 include 是纯粹的代码集成。mpvue 选择 import 方案
微信小程序提供了功能更加强大的 Component 作为组件化解决方案，它包含了众多高级特性，如：relations、observers、behaviors、definitionFilter 等

异常处理

mpvue 通过 Vue.config.errorHandler 实现异常捕获
微信小程序通过 App 的 onError 方法或 wx.onError API 实现异常捕获
mpvue 的异常捕获仅仅针对 Vue 相关的方法、生命周期函数等，微信小程序的 onError 仅针对小程序 App、Page 和 Component 中触发的异常；
对于 mpvue 或小程序之外的异常，我们仍然需要通过 try catch 进行捕获和处理

图表对比

特性	mpvue	微信小程序
模板绑定	DOM 中使用 Mustache 语法，属性中使用 v-bind 绑定	DOM 和属性中都使用 Mustache 语法绑定
状态更新	直接通过 this.xxx = xxx 进行更新	通过 this.setData() 方法进行更新
过滤器	不支持	通过 wxs 支持
计算属性和过滤器	支持，语法与 Vue 相同	通过第三方 Computed 组件库支持，必须在 Component 中使用
style 和 class 绑定	通过 v-bind 实现绑定	通过 Mustache 语法绑定
条件渲染	v-if 和 v-show 实现	wx-if 和 hidden 实现
列表渲染	v-for 和 v-bind:key 实现	wx-for、wx-for-index、wx-for-item 和 wx-key 实现
表单控件绑定	form 和 mp-form	form 和 mp-form
组件化	通过 mpvue 的组件语法	通过 Component 特性实现
异常处理	通过 Vue.config.errorHandler 自定义长	通过 App 的 onError 方法或 wx.onError API 捕获异常

细数 mpvue 与 Vue 的不同

由于 mpvue 是 Vue 的分支，它基于 Vue 的源码进行修改，所以它不能完全支持 Vue 的特性，这是由于 mpvue 的实现原理限制的，下面逐一分析 mpvue 主要特性的实现原理，并与 Vue 特性进行对比。

模板语法

mpvue 的模板语法最终会编译为微信小程序的模板语法，所以对模板语法能够得到较好支持，但不支持在绑定状态时使用方法，这是和 Vue 的主要不同，以下代码在 Vue 上能够被支持：

html

<input :value="wrapper(value)">

但是在 mpvue 中是不能够被支持的，与之对应的还有过滤器，mpvue 也不能支持：

html

<div>{{ value | filterValue }}</div>

以上两点大家在 mpvue 开发过程中需要特别注意，因为这些在 Vue 中都是非常常用的技巧，但是在 mpvue 中都无法得到支持。

计算属性和监听器

mpvue 的计算属性和监听器有 Vue 实例进行维护，计算属性最终会被转化为 data 状态，所以能够实现响应式功能，这与微信小程序的 Computed 库实现原理类似，它与 Vue 非常接近，可以说是原汁原味地移植了 Vue 的特性。

style 和 class 绑定

mpvue 的 style 和 class 绑定最终会转化为微信小程序的模板语法，因而不支持对象绑定，如下面这种特性：

html

<div v-bind:style="[style1, style2]"></div>

这是 Vue 中多样式对象绑定用法，在 mpvue 中是无不支持的。

条件与列表渲染

这部分 mpvue 较好地还原了 Vue 的特性，因为 mpvue 都能找到微信小程序中的对应实现，如:

v-if 对应小程序的 wx-if 属性，v-else-if 对应 wx-elif，v-else 对应 wx-else；
v-show 对应小程序的 hidden 属性；
v-for 表达式对应小程序的 wx-for、wx-for-index、wx-for-item 三个属性。

表单控件绑定

mpvue 沿袭了 Vue 的 v-model 双向绑定指令，同时还能够直接使用微信小程序的扩展组件库 mp-form。

组件化

组件化是 mpvue 中表现较弱的一个方面，它仅仅使用 wxml 的模板引用实现组件，导致微信小程序 Component 中的大量优秀特性无法使用，这主要考虑了 mpvue 的扩展性和兼容性，但由于微信小程序的 Component 设计较为领先，其他同类小程序平台缺少很多类似的特性，如果使用这些特性，将使得 mpvue 的多端小程序方案较难实现，所以 mpvue 使用了适用度最高的 wxml 模板引用作为组件实现方案。所以 Vue 中组件的异步组件、动态组件、transition 动画等等很多优秀的特性将无法使用。

异常处理

mpvue 使用了 Vue 的 errorHandler 来处理异常，这点和 Vue 的开发体验一致，我们可以非常方便使用这个特性来捕获和处理异常。

mpvue与vue的不同 ​

细数 mpvue 与微信小程序的不同 ​

模板语法 ​

计算属性和监听器 ​

style 和 class 绑定 ​

条件与列表渲染 ​

表单控件绑定 ​

组件化 ​

异常处理 ​

图表对比 ​

细数 mpvue 与 Vue 的不同 ​

模板语法 ​

计算属性和监听器 ​

style 和 class 绑定 ​

条件与列表渲染 ​

表单控件绑定 ​

组件化 ​

异常处理 ​

mpvue与vue的不同

细数 mpvue 与微信小程序的不同

模板语法

计算属性和监听器

style 和 class 绑定

条件与列表渲染

表单控件绑定

组件化

异常处理

图表对比

细数 mpvue 与 Vue 的不同

模板语法

计算属性和监听器

style 和 class 绑定

条件与列表渲染

表单控件绑定

组件化

异常处理