微信小程序学习记录6

前言：

今天来聊一下在实际开发中遇到的问题以及思考。

笔者在学习微信小程序之前没有体系化的学习过vue，esm标准和commonjs标准，仅仅学习了html，css，js的基础语法，纯粹是一个萌新。在B站学习的时候，我发现微信小程序兼容了许多截然不同的语法。同一种功能可以用不同的方式实现。这对于知识体系的搭建很不利，如果不及时做好分析整理，难以致远。今天就开始分析一下遇到的问题。

问题一：使用this.setData({ id : newId })和this.data.id = newId 的区别？

问题来源：我的一个团队成员在input标签上绑定了一个事件，事件功能之一是将id进行修改，同时id的变化也会引起页面表现的改变。我们发现，当使用this.data.id进行修改时，页面表现并没有随之改变。所以引发了这一问题。

在微信小程序中，`this.setData()` 和 `this.data.xxx` 的用法有所不同。 `this.setData()` 是用来更新数据并重新渲染页面的方法，它的参数是一个对象，该对象的键是数据路径，值是要设置的新值。例如：  this.setData({ id: '新的ID', }); 这样就可以更新 `id` 这个数据，并且会触发页面的重渲染。 而 `this.data.xxx` 是用来访问数据的方法，例如：  console.log(this.data.id);  这样就可以获取 `id` 数据的值。 需要注意的是，如果你想更改数据并让页面重新渲染，必须使用 `this.setData()` 方法，不能直接修改 `this.data` 上的数据，因为直接修改 `this.data` 不会触发页面的重新渲染。

问题二：同样可以提供模块导入功能，import和require有什么区别？

问题来源：我在使用mobx进行全局数据共享的时候，定义了一个observable对象store，并且将他export出去。在其他页面，当我import  store这个对象的时候，可以直接访问store对象里面的属性，同时订阅该属性的对象也会随之变化。

我在一个js文件里储存了wx.request所需的url。当需要使用的时候，使用require函数将该js文件里的url进行导出。

以上两步都是我跟着视频做的，但是我并不明白为什么需要用两种模块引用方式。于是有了接下来的解答。

`require` 和 `import` 都是用来导入外部模块的功能，但它们有一些重要的差异：

1. 规范不同 `require` 是基于 CommonJS 规范的，它在 Node.js 中使用得非常多。`import` 则是基于 ECMAScript 模块系统（ESM）的，它是现代 JavaScript 的主要模块系统。

2. 加载时机不同 `require` 在运行时加载，这意味着当你第一次调用 `require` 时，它就会去读取和解析那个模块。`import` 则在编译时加载，这意味着当你在源代码中遇到 `import` 语句时，它就会立即开始加载该模块。这就意味着你不能动态地导入模块，也不能有条件地导入模块。

3. 导入的内容不同 `require` 导入的是一个值的拷贝。如果你修改了导入的值，原模块中的值不会受到影响。而 `import` 导入的是一个原始值，如果你修改了导入的值，那么原模块中的值也会改变。此外，`import` 可以导入命名导出，而 `require` 无法做到这一点。

4. 引用方式不同 `require` 只接受字符串参数，而 `import` 可以直接引用模块的名称。 总的来说，`import` 更加简洁和安全，而 `require` 更灵活，支持更多的功能。选择哪种方法取决于你的需求和环境。

技巧一：

在微信小程序中使用mobx中的obserable对象中的数据，或者对数据进行修改时，可以不必调用createStoreBindings这个函数。直接导入你需要的observable对象，然后用对象名.数据的格式进行访问即可，只要数据不被直接渲染到页面上或者作为页面的逻辑。

这和this.setData与this.data.xxx访问数据的差异很像，但是不同的是，对于observable对象中的任意改动都会引发页面的重渲染。

技巧二：

在input标签中使用model：value=‘{{}}’直接进行双向绑定。通常我们使用value=‘{}’来设定input中的值，然后绑定一个事件，事件中包含setData将当前的e.currentTarget.detail内容设置为data节点中的input内的数据，这样形成双向绑定。