一、什么是uniapp的data选项
在uniapp中，每个页面的vue文件都包含一个data选项，它是组件或页面的数据源，用于存储和管理当前页面需要使用的各种变量。data本质上是一个函数，它返回一个对象，对象中包含我们需要的所有数据属性。
javascript
export default {
data() {
return {
message: 'Hello Uniapp',
count: 0,
userInfo: null,
list: []
}
}
}
二、data的基本使用方法
1. 声明数据
在页面或组件的script部分，通过data函数返回对象来声明初始数据：
javascript
export default {
data() {
return {
title: '欢迎使用Uniapp',
isLoading: false,
items: ['苹果', '香蕉', '橙子'],
userData: {
name: '',
age: 0
}
}
}
}
2. 模板中使用数据
在template部分可以直接使用双花括号语法引用data中的数据：
html
加载状态：{{isLoading ? '正在加载...' : '加载完成'}}
水果列表：
3. JS中访问和修改data
在methods或其他js代码中访问和修改data中的数据：
javascript
methods: {
changeTitle() {
this.title = "新的" //直接赋值修改
//对于数组或对象的修改需要注意响应式问题
this.items.push('葡萄') //正确方式
this.userData.name = "张三" //可以这样修改对象属性
//如果需要整体替换数组或对象应该这样做：
this.items = [...this.items, '西瓜']
this.userData = {...this.userData, age:25}
或者使用Vue.set/this.$set方法确保响应式更新：
例如：this.$set(this.userData, 'gender', '男')
对于深层嵌套的对象属性也需要特别注意响应式更新问题。
文章点评