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();
    },
},
相关推荐
江城开朗的豌豆6 分钟前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
Asort30 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT1 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码1 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅1 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia1 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙1 小时前
JS设计模式指南
前端·javascript
Mintopia1 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人1 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架