组件中函数的执行顺序

矫情吗；* 2022-02-28 15:58 220阅读 0赞

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>

![2019032614070172.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

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

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

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

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

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

[2019032614070172.png]: /images/20220228/1ff0217f11c74e54837803431a6b514a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220228/7f4c6f500e6945cfb4729d1b652feb98.png