uniapp数据界面
数据绑定与渲染
在UniApp中，数据通过data选项定义，模板中使用双大括号{{}}或指令（如v-for、v-if）动态渲染。示例：
export default {
data() {
return {
message: 'Hello UniApp',
list: [1, 2, 3]
};
}
}模板中绑定数据：
<view>{{ message }}</view>
<view v-for="item in list" :key="item">{{ item }}</view>请求网络数据
通过uni.request发起HTTP请求获取远程数据，支持Promise和回调两种方式。示例：
uni.request({
url: 'https://api.example.com/data',
success: (res) => {
this.list = res.data;
}
});推荐使用async/await简化异步逻辑：
async fetchData() {
const res = await uni.request({ url: 'https://api.example.com/data' });
this.list = res[1].data; // 注意返回值结构
}状态管理
复杂应用可使用Vuex进行全局状态管理。配置步骤：
- 在项目中创建
store目录并初始化index.js：import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex);
export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } });
2. 在`main.js`中挂载Store：
```javascript
import store from './store';
const app = new Vue({ store, ...App });本地存储
使用uni.setStorage和uni.getStorage实现持久化存储：
// 存数据
uni.setStorage({ key: 'user', data: { name: 'John' } });
// 取数据
uni.getStorage({
key: 'user',
success: (res) => console.log(res.data)
});同步方法uni.setStorageSync和uni.getStorageSync适用于简单场景。
数据监听
通过watch选项或this.$watch监听数据变化：
export default {
data() { return { count: 0 }; },
watch: {
count(newVal, oldVal) {
console.log(`Count changed from ${oldVal} to ${newVal}`);
}
}
}动态监听：
this.$watch('count', (newVal) => { /* 逻辑处理 */ });性能优化
- 长列表使用
<recycle-list>组件（需平台支持）。 - 避免频繁
setData，合并多次更新。 - 使用
v-once渲染静态内容。
