vue的初始化页面

原创于 2019-11-07 17:10:46 发布 · 7.5k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Vue中正确初始化数据的方法，特别是在使用接口请求更新数据时的常见误区。指出在data中直接调用方法获取数据是不可行的，因为页面渲染速度可能快于数据获取，正确的做法是在created()生命周期钩子中处理数据请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue数据内容为接口请求

export default {
  name: "weather",

  created() {
    axios.get("/laravel/test").then(response => {
      var res = response.data;
      console.log(res);
      this.info_msg = res;
    });
  },
    data() {
    return {
         info_msg: null,
    };
  }

这里这个created让你先把数据拿过来然后初始化data的info_msg 可以完成页面；列表的初始化。

误区：

  methods: {
    eat() {
      console.log("you eat");
      return "this is methods eat";
    },
    test() {
      console.log("you test");
      return "zxl";
    },
    getNewsList() {
      //   axios.get("/laravel/test").then(response => {
      //     var res = response.data;
      //     console.log(res);
      //     this.$options.data.info_msg = res;
      //   });
      //return i++;
      this.info_msg = i++;
    }
  },
  
  data() {
    return {
      info_msg:this.getNuewsList(),
    };
  }
};

在method声明请求方法，data中直接请求this.方法。不成！！！
页面渲染不等你把数据抓捉来，直接渲染页面结束了。把这个取数据放到created（）搞定！！！