微信小程序-所有setData定义的变量都在this.data中

在 微信小程序 开发中，this.data.userInfo、this.userInfo 和 userInfo 有不同的用法，具体使用场景如下：

---

1. this.data.userInfo

this.data 是 小程序组件或页面的状态数据，所有用 this.setData() 更新的数据都会存储在 this.data 里。
✅ 用法： 只能 读取 小程序页面的 data 数据，不能直接修改！

onLoad() {
    console.log(this.data.userInfo); // 读取 userInfo
}

❌ 错误做法： 不能直接修改 this.data.userInfo

this.data.userInfo = { name: "张三" }; // ❌ 不会更新视图！

正确的做法：

this.setData({
    userInfo: { name: "张三" }
});

---

2. this.userInfo

this.userInfo 不是小程序规定的数据存储方式，默认不存在，但你可以自己在类的实例上定义它。

✅ 用法： 用于 存放临时变量，不影响视图

onLoad() {
    this.userInfo = { name: "张三" }; // 仅存储在 JS 变量中，视图不会更新
}

❌ 不会影响页面的 wxml

<text>{{userInfo.name}}</text>  <!-- 这个不会更新 -->

---

3. userInfo（局部变量）

userInfo 只是一个普通的局部变量，它的作用范围仅限于 当前函数内部。

✅ 用法： 在函数内部临时存储数据：

onLoad(options) {
    let userInfo = JSON.parse(options.userInfo); // `userInfo` 只是个局部变量
    console.log(userInfo); // 可以打印，但不会影响 this.data
}

如果要更新 data，就要用：

this.setData({ userInfo });

---

🚀 总结

写法	作用	是否影响页面视图	推荐使用场景
this.data.userInfo	读取 data 数据	✅ 会 影响视图	只能 读取 data，不能直接修改
this.userInfo	自定义变量	❌ 不会 影响视图	适用于 存放临时数据，但不适用于视图绑定
userInfo	局部变量	❌ 不会 影响视图	适用于 函数内部计算，不会存入 data

---

🎯 什么时候用哪种写法？

✅ 需要绑定到视图

👉 用 this.setData() 修改 this.data.userInfo

this.setData({
    userInfo: { name: "张三" }
});

✅ 只在 JS 代码中临时存储

👉 用 this.userInfo

this.userInfo = { name: "张三" };

✅ 只在当前函数内使用

👉 用 userInfo（局部变量）

let userInfo = { name: "张三" };

---

💡 例子

🚀 正确做法

onLoad(options) {
    let userInfo = JSON.parse(options.userInfo); // 临时变量

    this.setData({
        userInfo // 正确：更新页面数据
    });

    this.userInfo = userInfo; // 也可以存临时变量，但不会更新视图
}

---

如果你希望 userInfo 在 wxml 页面上显示，就必须用：

this.setData({ userInfo });

否则页面不会自动更新！