微信小程序与 Vue 的区别

问题

微信小程序和 Vue 有哪些区别？

解答

1. 数据绑定

Vue：响应式双向绑定

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    updateMessage() {
      // 直接赋值即可触发更新
      this.message = 'World'
    }
  }
}
</script>

小程序：单向绑定，需手动调用 setData

// index.wxml
// <input value="{{message}}" bindinput="onInput" />
// <text>{{message}}</text>

// index.js
Page({
  data: {
    message: 'Hello'
  },
  onInput(e) {
    // 必须通过 setData 更新数据
    this.setData({
      message: e.detail.value
    })
  },
  updateMessage() {
    this.setData({ message: 'World' })
  }
})

2. 生命周期

Vue 组件生命周期：

export default {
  beforeCreate() {},  // 实例初始化前
  created() {},       // 实例创建完成
  beforeMount() {},   // 挂载前
  mounted() {},       // 挂载完成
  beforeUpdate() {},  // 更新前
  updated() {},       // 更新完成
  beforeUnmount() {}, // 卸载前
  unmounted() {}      // 卸载完成
}

小程序页面生命周期：

Page({
  onLoad() {},    // 页面加载
  onShow() {},    // 页面显示
  onReady() {},   // 页面初次渲染完成
  onHide() {},    // 页面隐藏
  onUnload() {}   // 页面卸载
})

小程序组件生命周期：

Component({
  lifetimes: {
    created() {},   // 组件实例创建
    attached() {},  // 组件进入页面节点树
    ready() {},     // 组件布局完成
    detached() {}   // 组件离开页面节点树
  }
})

3. 模板语法

功能	Vue	小程序
条件渲染	v-if / v-else	wx:if / wx:else
列表渲染	v-for="item in list"	wx:for="{{list}}"
事件绑定	@click / v-on:click	bindtap / catchtap
双向绑定	v-model	无，需手动实现
类名绑定	:class	class="{{className}}"

<!-- Vue -->
<div v-for="(item, index) in list" :key="item.id" @click="handleClick(item)">
  {{ item.name }}
</div>

<!-- 小程序 -->
<view wx:for="{{list}}" wx:key="id" bindtap="handleClick" data-item="{{item}}">
  {{ item.name }}
</view>

4. 组件通信

Vue：props + emit

<!-- 父组件 -->
<Child :msg="message" @update="handleUpdate" />

<!-- 子组件 -->
<script>
export default {
  props: ['msg'],
  methods: {
    notify() {
      this.$emit('update', 'new value')
    }
  }
}
</script>

小程序：properties + triggerEvent

// 父组件 wxml
// <child msg="{{message}}" bind:update="handleUpdate" />

// 子组件 js
Component({
  properties: {
    msg: String
  },
  methods: {
    notify() {
      this.triggerEvent('update', { value: 'new value' })
    }
  }
})

5. 运行环境

对比项	Vue	微信小程序
运行环境	浏览器	微信客户端（双线程）
渲染层	WebView	WebView
逻辑层	WebView	JSCore
DOM 操作	可以	不可以
路由	vue-router	原生导航 API
状态管理	Vuex / Pinia	全局变量 / 第三方库

关键点

• 数据更新：Vue 直接赋值，小程序必须用 setData
• 双向绑定：Vue 有 v-model，小程序需手动实现
• 运行架构：小程序是双线程（渲染层 + 逻辑层），无法直接操作 DOM
• 事件传参：Vue 可直接传参，小程序需通过 data-* 属性
• 生命周期：小程序区分页面和组件两套生命周期