小程序的数据绑定与状态管理

数据绑定的基本概念

微信小程序的数据绑定采用类似MVVM的模式，通过{{}}语法实现视图层与逻辑层的动态关联。这种绑定是单向的，数据变化会自动反映到视图上，但视图变化不会反向影响数据。基础绑定形式如下：

<!-- WXML -->
<view>{{message}}</view>

// JS
Page({
  data: {
    message: 'Hello World'
  }
})

当data.message改变时，视图会自动更新。小程序还支持简单的表达式运算：

<view>{{a + b}}</view>
<view>{{flag ? '真' : '假'}}</view>
<view>{{"欢迎" + name}}</view>

复杂数据绑定与列表渲染

对于数组类型数据，可以使用wx:for指令进行列表渲染。小程序会为每个数组元素创建新的视图块，并通过index和item变量访问当前项：

<view wx:for="{{todos}}" wx:key="id">
  {{index + 1}}. {{item.text}} 
  <button bindtap="completeTodo" data-id="{{item.id}}">完成</button>
</view>

Page({
  data: {
    todos: [
      { id: 1, text: '学习小程序' },
      { id: 2, text: '开发项目' }
    ]
  },
  completeTodo(e) {
    const id = e.currentTarget.dataset.id
    this.setData({
      todos: this.data.todos.filter(todo => todo.id !== id)
    })
  }
})

条件渲染与动态样式

wx:if和hidden都可以控制元素显示，但实现机制不同。wx:if是真正的条件渲染，会销毁/重建节点；hidden只是切换display样式：

<view wx:if="{{isAdmin}}">管理员视图</view>
<view hidden="{{!isVIP}}">VIP专属内容</view>

动态样式绑定支持多种形式：

<view class="{{isActive ? 'active' : ''}}">基础样式</view>
<view style="color: {{textColor}}">行内样式</view>
<view class="static {{dynamicClass}}">混合样式</view>

组件通信与事件传递

父子组件通信通过属性和事件实现。父组件通过属性传递数据，子组件通过事件通知父组件：

<!-- 父组件 -->
<child-component 
  title="{{parentTitle}}"
  bind:customEvent="handleChildEvent"
/>

// 子组件
Component({
  properties: {
    title: String
  },
  methods: {
    onTap() {
      this.triggerEvent('customEvent', { detail: '数据' })
    }
  }
})

全局状态管理方案

对于跨页面状态共享，可以使用以下方案：

1. 全局App对象：

// app.js
App({
  globalData: {
    userInfo: null
  }
})

// 页面中使用
const app = getApp()
console.log(app.globalData.userInfo)

2. Behavior复用：

// behavior.js
module.exports = Behavior({
  data: {
    sharedData: '值'
  },
  methods: {
    sharedMethod() {}
  }
})

3. 自定义状态管理（仿Redux）：

// store.js
const store = {
  state: { count: 0 },
  reducers: {
    increment(state) {
      return { count: state.count + 1 }
    }
  }
}

// 页面中使用
const newState = store.reducers.increment(store.state)
this.setData({ count: newState.count })

性能优化实践

频繁的数据更新会导致界面卡顿，需要优化：

1. 合并setData调用：

// 不推荐
this.setData({ a: 1 })
this.setData({ b: 2 })

// 推荐
this.setData({ 
  a: 1,
  b: 2 
})

2. 避免大数据传输：

// 不推荐（传输整个大数组）
this.setData({ bigList: newBigList })

// 推荐（只更新必要数据）
this.setData({ 
  'bigList[0].status': 'done' 
})

3. 使用纯数据字段：

Component({
  options: {
    pureDataPattern: /^_/ // 指定纯数据字段
  },
  data: {
    _internalData: '不参与渲染' 
  }
})

高级状态管理库的应用

对于复杂项目，可以考虑第三方状态管理库：

1. WePY Redux：

// store.js
import { createStore } from 'redux'
const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1
    default: return state
  }
}
export default createStore(reducer)

// 组件中
import store from './store'
store.dispatch({ type: 'INCREMENT' })

2. MobX小程序适配：

// store.js
import { observable, action } from 'mobx-miniprogram'
export const store = observable({
  count: 0,
  increment: action(function() {
    this.count++
  })
})

// 组件中
import { store } from './store'
Component({
  storeBindings: {
    store,
    fields: ['count'],
    actions: ['increment']
  }
})

数据持久化策略

小程序提供多种本地存储方案：

1. 同步存储：

wx.setStorageSync('key', 'value')
const value = wx.getStorageSync('key')

2. 异步存储：

wx.setStorage({
  key: 'user',
  data: { name: '张三' },
  success() {
    wx.getStorage({
      key: 'user',
      success(res) {
        console.log(res.data)
      }
    })
  }
})

3. 数据库存储（云开发）：

const db = wx.cloud.database()
db.collection('todos').add({
  data: { text: '新任务' },
  success(res) {
    console.log(res._id)
  }
})

数据安全与校验

确保数据安全需要采取以下措施：

1. 数据过滤：

Page({
  onLoad(query) {
    // 过滤非法参数
    this.setData({
      id: parseInt(query.id) || 0
    })
  }
})

2. 使用WXS过滤：

// filter.wxs
function formatPrice(price) {
  return '¥' + price.toFixed(2)
}
module.exports = {
  formatPrice: formatPrice
}

<wxs src="./filter.wxs" module="filter" />
<view>{{filter.formatPrice(price)}}</view>

3. Schema校验：

// 使用ajv等库
const schema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'number' }
  }
}
const validate = ajv.compile(schema)
if (!validate(data)) {
  console.error(validate.errors)
}

响应式更新的底层原理

小程序通过以下机制实现响应式：

1. 数据劫持：

// 模拟实现
function observe(data) {
  Object.keys(data).forEach(key => {
    let value = data[key]
    Object.defineProperty(data, key, {
      set(newVal) {
        value = newVal
        updateView() // 触发视图更新
      },
      get() {
        return value
      }
    })
  })
}

2. 差异比对：

// setData实际执行过程
const diff = compare(oldData, newData)
nativeRender(diff) // 只更新变化部分

3. 批量更新：

// 异步更新队列
let updateQueue = []
function setData(newData) {
  updateQueue.push(newData)
  nextTick(applyUpdates)
}

function applyUpdates() {
  const merged = mergeAll(updateQueue)
  nativeSetData(merged)
  updateQueue = []
}