组件中函数的执行顺序

1. 生命周期函数除了beforeCreate，其他的都是在Vue实例创建完成之后执行

2. 组件中data是一个函数，每次路由切换回来时，都会执行data函数，并会初始化data中的值

（1）data中的数据还有一个特点：如果值是原始值不是响应式的。比如下面的代码中，通过点击事件使vuex中的this.$store.state.login发生变化，但是data中的storeValue是原始，所以不响应式的改变。不过，当页面从别的页面切换到该页面的时候，即该组件重新加载渲染一次时，storeValue: this.$store.state.login会获取已经变化后的值，数据进行渲染挂在。

    data () {
      return {
        storeValue: this.$store.state.login ,//(2)从store中获取该值
      }
    },
    methods: {
      handleClick () {
        this.$store.state.login = this.$store.state.login + '1'
        console.log(this.$store.state.login)
      }
    },

（2）当data中的数据是引用值的时候，页面中的数据是响应式的改变：

<template>
<div @click="handleClick">
  <span v-if="storeValue">用户已登录</span>
  <span v-else>用户未登录，请登录</span>
  <p>{{storeValue}}</p>
  <ul>
    <li v-for="(list, index) in listsValue" :key="index">{{index}}、{{list}}</li>
  </ul>
</div>

</template>

<script>
export default {
    data () {
      return {
        storeValue: this.$store.state.login ,//(2)从store中获取该值
        listsValue: this.$store.state.lists
      }
    },
    methods: {
      handleClick () {
        this.$store.state.login = this.$store.state.login + '1'
        console.log(this.$store.state.login)
        this.$store.state.lists.push('5');
      }
    },
    created () {
 
    }
    
}
</script>

 

结果：每次点击div，都会响应式的添加值

（3）如何解决data中的原始值不响应式的改变？？？

用computed计算属性，来代替data函数

    computed: {
      storeValue () {
        return this.$store.state.login //从store中获取该值，并使页面响应式改变。
      }
    },

注意：data中的属性优先级高于computed计算属性

3. methods对象虽然比created和mounted等生命周期函数创建的早，但是，methods内的一些函数需要在用户操作后执行，比如click事件，所以created和mounted等生命周期函数比methods内的这些方法先执行。