vue加载后不变原理

一、随机

在开发阶段，如下

export const mock = {
 moth: Math.ceil(Math.random() * 10)
}

使用mock

import { mock } from "@/help/index.js";

getDate() {
 console.log(mock)
}

发现执行getDate()得到的mock一直是加载初次的随机数，并未随机，这是因为加载中已经执行mock数据已经固定，再使用就不能改变，只能用初次加载的数据，

        可见vue执行js后，如果非方法会执行一次，后面直接使用，并不执行js了，但是需要的是每次使用执行其随机的数，改变其数据

解决方案，改mock为方法去调用，就每次执行方法得到最新随机数，和接口请求一个原理

export const mock = () => {
  return {
     moth: Math.ceil(Math.random() * 10)
    }
}

//调用
import { mock } from "@/help/index.js";
getDate() {
 console.log(mock())
}

二、provide

在开发阶段，如下

provide() {
   return {
     getDataInit: this.getMock,
   };
},
methods: {
    set() {
      this.getMock = Math.ceil(Math.random() * 10)
    }
}

执行set()后子组件通过inject调用

inject: ["getDataInit"],
mounted() {
    console.log(this.getDataInit)
},

 发下getDataInit并未变

可见vue执行provide后，如果非方法会执行一次，后面直接使用，并不执行provide了，但是需要的是每次使用执行其随机的数，改变其数据

解决方案，改provide为方法去调用，就每次执行方法得到最新随机数，子组件需要通过computed接受或者调用方法

provide() {
    return {
      getDataInit: () => this.getMock,
    };
 },

//子组件通过computed接受或者直接调用方法
computed: {
    getMock() {
      return this.getDataInit();
    },
},