vue加载后不变原理

一、随机

在开发阶段,如下

javascript 复制代码
export const mock = {
 moth: Math.ceil(Math.random() * 10)
}

使用mock

javascript 复制代码
import { mock } from "@/help/index.js";

getDate() {
 console.log(mock)
}

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

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

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

javascript 复制代码
export const mock = () => {
  return {
     moth: Math.ceil(Math.random() * 10)
    }
}

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

二、provide

在开发阶段,如下

javascript 复制代码
provide() {
   return {
     getMockList: this.getMock,
   };
},
methods: {
    set() {
      this.getMock = Math.ceil(Math.random() * 10)
    }
}

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

javascript 复制代码
inject: ["getDataInit"],
mounted() {
    console.log(this.getDataInit)
},

发下getDataInit并未变

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

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

javascript 复制代码
provide() {
    return {
      getMockList: () => this.getMock,
    };
 },

//子组件通过computed接受或者直接调用方法
computed: {
    getMock() {
      return this.getMockList();
    },
},
相关推荐
又是忙碌的一天24 分钟前
java字符串
java·开发语言
Hi2024021725 分钟前
Qt+Qml客户端和Python服务端的网络通信原型
开发语言·python·qt·ui·网络通信·qml
chxii27 分钟前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
Teable任意门互动36 分钟前
主流多维表格产品深度解析:飞书、Teable、简道云、明道云、WPS
开发语言·网络·开源·钉钉·飞书·开源软件·wps
没逛够39 分钟前
Vue 自适应高度表格
javascript·vue.js·elementui
程序员大雄学编程1 小时前
「用Python来学微积分」16. 导数问题举例
开发语言·python·数学·微积分
Dreams_l2 小时前
redis中的数据类型
java·开发语言
梵得儿SHI2 小时前
Java IO 流详解:字符流(Reader/Writer)与字符编码那些事
java·开发语言·字符编码·工作原理·字符流·处理文本
太过平凡的小蚂蚁2 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
007php0072 小时前
京东面试题解析:同步方法、线程池、Spring、Dubbo、消息队列、Redis等
开发语言·后端·百度·面试·职场和发展·架构·1024程序员节