Question

大家好我发现我可以返回数据，但很少有东西会造成混乱，任何人都可以告诉这个方法是否正确

方法1：

  <script>
      export default {
         data () {
            return {
                     nav: [],
                   }
            },
   mounted () {
             this.checkSidebarVisibility()
           },
   methods: {
           checkSidebarVisibility: function() {
            this.nav= navnew
      } 
  },
</script>

我知道这种方法是100％正确的，但是当我使用这种方法时，我遇到的问题就像数据加载太晚了，例如： - 如果我使用这种方法进行选择下拉，那么几秒后选择选项中的数据（至少3）秒）

方法2：

我有点困惑，这种方法是正确的方式，例如：

  <script>
     export default {
          data () {
            return {
                     nav: this.checkSidebarVisibility(),
                   }
            },

   methods: {
           checkSidebarVisibility: function() {
            this.nav= navnew
      } 
   },
 </script>

我发现这个方法在select选项中加载数据以及工作流畅，即在浏览器控制台中没有任何错误，但我很困惑，这是vue的正确方法，任何专家都可以给出任何建议

Answer 1

如果您希望尽快设置data 的某些属性，请使用created()代替mounted()。这是因为created() 最早lifecycle hook ，其中data已初始化。

<script>
  export default {
    data() {
      return {
        nav: [],
      }
    },
    created() {                        // using created() instead of mounted()
      this.checkSidebarVisibility()
    },
    methods: {
      checkSidebarVisibility: function() {
        this.nav = navnew
      }
    },
    // ...
  }
</script>

另一方面，如果填充数据的代码异步，例如ajax调用，您可以从更早的钩子beforeCreate()：

发送请求

<script>
  export default {
    data() {
      return {
        nav: [],
      }
    },
    beforeCreate() {                  // using beforeCreate() instead of created()
      this.checkSidebarVisibility()   // assuming it is async, e.g. ajax
    },
    methods: {
      checkSidebarVisibility: function() {
        this.nav = navnew
      }
    },
    // ...
  }
</script>

这是可能的，因为Vue的初始化是同步的，这意味着即使在beforeCreate()调度的异步操作（ajax）立即返回，data也已经初始化（在此之间发生的事情） beforeCreate和created挂钩）。

这是正确的方式在vue与否

1 个答案: