最新文章

初学者常见问题

2016 年 2 月 6 日

我们经常收到来自 Vue.js 新手用户的一些问题。虽然这些问题在指南中都有提及，但很容易被忽略，当你遇到这些问题时也很难找到答案。因此，我们在这篇文章中汇总了这些问题，希望可以为你节省一些时间！

为什么 DOM 没有更新？

大多数情况下，当你更改 Vue 实例的数据时，视图会更新。但有两种特殊情况

  1. 当你添加一个新的属性，而该属性在数据被观察时并不存在。由于 ES5 的限制，为了确保跨浏览器的行为一致，Vue.js 无法检测到属性的添加/删除。最佳实践是在一开始就声明所有需要响应式变化的属性。在必须在运行时添加或删除属性的情况下，请使用全局的 Vue.set 或 Vue.delete 方法。

  2. 当你通过直接设置索引（例如 arr[0] = val）或修改其 length 属性来修改数组时。同样，Vue.js 无法识别这些更改。始终使用数组实例方法来修改数组，或者完全替换它。Vue 提供了一个便利方法 arr.$set(index, value)，它只是 arr.splice(index, 1, value) 的语法糖。

进一步阅读：深入响应式 和 数组变更检测.

何时更新 DOM？

Vue.js 使用异步队列来批量更新 DOM。这意味着当你修改某些数据时，DOM 更新不会立即发生：它们会在队列刷新时异步应用。那么你如何知道 DOM 何时更新呢？在你修改数据之后立即使用 Vue.nextTick。你传递给它的回调函数将在队列刷新后被调用。

进一步阅读：异步更新队列.

为什么 data 需要是一个函数？

在基本示例中，我们直接将 data 声明为一个普通对象。这是因为我们只使用 new Vue() 创建了一个实例。但是，在定义组件时，data 必须声明为一个返回初始数据对象的函数。为什么？因为将使用相同的定义创建多个实例。如果我们仍然使用普通对象作为 data，那么同一个对象将被引用共享到所有创建的实例中！通过提供一个 data 函数，每次创建一个新实例时，我们只需调用它即可返回初始数据的全新副本。

进一步阅读：组件选项注意事项.

HTML 不区分大小写

所有 Vue.js 模板都是有效的、可解析的 HTML 标记，Vue.js 依赖于符合规范的解析器来处理其模板。但是，根据标准规定，HTML 在匹配标签和属性名称时不区分大小写。这意味着像 :myProp="123" 这样的驼峰式属性将被匹配为 :myprop="123"。作为经验法则，你应该在 JavaScript 中使用驼峰式命名，在模板中使用短横线分隔命名。例如，在 JavaScript 中定义为 myProp 的一个 prop 应该在模板中绑定为 :my-prop。

进一步阅读：驼峰式命名 vs. 短横线分隔命名.

我们还在讨论通过不区分大小写的方式解析 props 和组件来消除这种不一致的可能性。加入讨论 这里.