• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

vuejs如何调用声明的常量数据?

Vue cps12345 2周前 (10-09) 23次浏览 0个评论

Vue组件中使用一些不变的数据。以下代码报错:

[Vue warn]: Property or method “numbers” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

const numbers = [1, 2, 3]
new Vue({
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="number in numbers">
    {{number}}
  </div>
</div>

原因

  1. 模板需要访问的所有数据都必须在Vue实例(data或computed)上(您可以想象模板中的每个访问都以开头this.),并且无法解决
  2. 使您的数据成为Vue实例的一部分可使其具有反应性。通常,这不是问题,但是如果您拥有的大量数据永远不会更改(perf),则可能会出现问题。在这种情况下,您可以使用文档中的技巧并进行应用Object.freeze(),这会使整个对象“无反应”,但也无法以任何方式进行更改
  3. 您可以使用Akryum(Vue核心成员)的技巧对数据进行微调,以创建具有一些反应性和一些非反应性的对象(仅适用于Object.defineProperty用于使数据成为反应性的Vue2 。我将尝试更新Vue3代理)后来..)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址