vue中sricpt标签内代码运行顺序问题。

Question

普通的一个.vue文件

<template>
  <div id="navigator">
。    ...
  </div>
</template>

<script>
  axios.get()  ---------①

  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    beforecreat:funtion(){
      axios.get() ----------------②
    }
  }
</script>

<style>
  #navigator{
  }

</style>

问题

• 想问是①式的axios.get()先执行还是②式的axios.get()先执行？
• 因为export default里面的内容在源码中是作为option参数传递给load()函数的，那么在export
  default之前这部分代码应该什么时候被执行呢？

产生问题的背景：

我是想先axios得到数据，然后对得到的数据进行一番加工，然后传给echarts作为数据来源，那么这对数据进行加工的部分应该是放在哪里？放在export default 外面，还是放在export default 里面进行处理，如果放在里面咋处理[・_・?]

Answer 1

1先执行，而且是在你没有用到这个组件的时候一上来就执行，加工数据推荐用计算属性，获取数据我通常是写在路由钩子函数里

  export default {
    data() {
      return {
        data: '' // 加工前的数据
      };
    },
    computed: {
        filterData() {
            // 加工this.data
        }
    },
    methods: {
        _getData() {
            axios.get().then(res => {
                this.data = res.data; // 先把原数据放入data
            })
        }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
          vm._getData();  // 获取数据
      });
    }
  }

Answer 2

①先执行。
执行部分要放在里面，函数声明可以放在外面。
比如

function get(){}
export default{
    created () {
        get()
    }
}

然后你可以试试在某个组件的外面写
console.log('test')
你会发现你还没用到这个组件的时候，这个语句就已经执行了。