vue-test-utils在单击后不更新组件
问题：vue-test-utils在单击后不更新组件。
答案：vue-test-utils是Vue.js官方提供的用于测试Vue组件的工具库。当在单击事件中更新组件时，如果组件没有被更新，可能是由于以下几个原因：
- 异步更新问题：Vue.js中的更新是异步的，即使在单击事件中修改了组件的数据，也不会立即触发重新渲染。为了解决这个问题，可以使用Vue的nextTick方法，在nextTick回调函数中进行断言。
- 组件实例问题：在测试中，需要确保正确地获取到组件的实例。可以使用vue-test-utils提供的wrapper对象来获取组件实例，然后通过实例的方法或属性来修改组件的数据。
- 单击事件模拟问题：在测试中，需要模拟用户的单击事件来触发组件的更新。可以使用vue-test-utils提供的wrapper对象的trigger方法来模拟单击事件。
综上所述，解决vue-test-utils在单击后不更新组件的问题，可以按照以下步骤进行：
- 确保正确获取到组件的实例，可以使用wrapper.vm来访问组件实例。
- 在单击事件中修改组件的数据。
- 在nextTick回调函数中进行断言，确保组件已经更新。
以下是一些相关的腾讯云产品和链接，供参考：
- 腾讯云云服务器（CVM）：提供稳定可靠的云服务器，用于部署和运行应用程序。链接：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，用于存储和管理数据。链接：https://cloud.tencent.com/product/cdb
- 腾讯云对象存储（COS）：提供安全可靠的云存储服务，用于存储和管理各种类型的文件和数据。链接：https://cloud.tencent.com/product/cos
请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行。
相关·内容
我有一个使用组件的组件。
Tree.vue
<div>
<el-tree :data="treeData" :props="config"></el-tree>
</div>
我想测试与组件的交互性(例如，能够单击其中一个el-tree html元素)，但是当我使用vue-test-utils mount挂载Tree组件时，它不会呈现它的子组件，而是像它在组件中的shallow一样。
Tree.test.js
import Vue from 'vue';
import { mount } fro
浏览 3提问于2018-02-15得票数 11
免责声明:我对Vue、JavaScript和web框架非常陌生。
我正在尝试使用Jest和vue-test-utils来熟悉一些基本的单元和组件测试。
我已经阅读了vue-test-utils‘和上的文档，但我不确定何时使用其中一个而另一个(它们看起来非常相似)。
根据shallowMount()上的文档
与挂载一样，它创建一个包装器，其中包含已挂载和呈现的Vue组件，但包含有存根的子组件。
“存根子组件”究竟是什么意思？mount()和shallowMount()可以互换使用吗？
浏览 0提问于2018-11-09得票数 29
回答已采纳
vue-test-utils提供了一个setComputed方法，允许您设置计算属性的状态。
import { mount } from '@vue/test-utils'
const wrapper = mount(Home)
wrapper.setComputed({loaded: true})
vue-test-utils版本1.1.0.beta为读取setComputed() has been deprecated and will be removed in version 1.0.0. You can overwrite computed properties by
浏览 6提问于2018-05-21得票数 20
1回答
我有一个组件，当created()用null或props.datainicial设置date:时。
export default {
props: ['numeroDaParcela', 'datainicial'],
data () {
return {
date: null,
dateBR: '',
modal: false
}
},
created () {
if (this.datainicial === '' ||
this.data
浏览 1提问于2018-05-18得票数 0
回答已采纳
1回答
我试图在一些Vue组件上使用vue-test-utils和jest设置单元测试，这些组件从另一个Vue组件(ApiCalls.vue)中检索响应，后者负责使用fetch()调用远程API。使API调用的组件返回此类型的对象：
{
status: <fetch response status>,
body: <fetch response body>
}
待测试组件概述(MyComponent.vue)：
import ApiCalls from './ApiCalls.vue';
export default {
data() {
浏览 0提问于2020-12-18得票数 2
回答已采纳
1回答
Problem：无法在单元测试中以编程方式触发Vue-Select3 3项下拉选择。
我尝试使用vue-test-utils和@testing-library/vue，并在浏览器中以编程方式触发单击事件，以强制选择列表项。然而，所有这些都不起作用。我成功触发选择的唯一方法是获取一个VueSelect实例并发出“输入”事件。我还试图在下拉容器上触发不同的事件，等等。
// Failed
// testing-library
const dropdownItem = getAllByTestId('dropdown-item')
fireEvent.click(dropdownI
浏览 0提问于2019-08-19得票数 6
我正在使用带有Vue-Test-Utils的Jest。我一直使用的代码如下所示：
beforeEach(() => {
wrapper = shallow(GridContainer, {
data: {
pageSize: count
},
propsData: {
userId,
managerId
}
})
})
在本例中，我希望在调用挂载的生命周期之前设置pageSize值。上面代码的问题是，当测试运行时，我开始收到以下警告：
[Vue warn]: Do not use built-in or rese
浏览 3提问于2018-02-24得票数 17
回答已采纳
上下文
我有一个用户对象，它是vue.js UserComponent的数据模型。在挂载组件时，用户有未定义的字段。然后，在挂载()方法中，从服务器获取用户，并设置其所有文件。
问题
因此，我发现当用户的字段发生变化时，vue-test-utils不会重新绘制组件。
Note
另一方面，如果我将对象支柱更改为标量，同样的测试也会很好。
在wrapper.setProp({user: user})的字段被提取之后，我试图通过它来重置用户支持。不幸的是，这是不可能的，因为vue-test-utils防止设置相同的对象为支柱。
vue-test-utils-getting-started) 演示回购
浏览 0提问于2020-07-04得票数 0
2回答
我有很多纽扣。当我单击任何人时，它会在方法中设置taskId。并调用子组件(意味着将showDetailComponentto位更改为true)。
<div *ngIf='showDetailComponent'>
<app-taskdetail [id]='myVal'></app-taskdetail>
</div>
当我第一次单击任意按钮时，如果单击任何其他按钮，子组件的数据就不会更新(这意味着没有调用子组件)。
浏览 1提问于2019-04-16得票数 0
回答已采纳
2回答
我有一个Vue 2.0组件，它使用来自的菜单组件。在测试期间，我使用正式的来挂载组件。
我面临的问题是菜单组件将“菜单”附加到HTML(组件范围之外)。正因为如此，我不能像使用组件中的任何其他元素一样使用wrapper.find('.menu')访问它。
是否有一种使用vue-test-utils访问附加到主体的元素的好方法？
更新
在这一点上，我的组件看起来很像这个
我安装了我的组件，像这样：
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import AuthenticatedUs
浏览 5提问于2018-01-10得票数 10
回答已采纳
由于我找到的解决方案使用存根，所以我试图在vue中嘲弄裁判时出错。但是存根只接受字符串。
it("Test component", () => {
const wrapper = mount(NeedConfirmation, {
localVue,
store
});
});
Vue警告:挂载钩子错误："TypeError: this.$refs.appConfirm.setCellphone不是函数“
it("Test component", () => {
const appConfirm = {
s
浏览 0提问于2020-11-24得票数 1
我在一个vue组件上编写测试，当焦点丢失时，该组件必须调用一个方法。 根据vue-test-utils，我应该使用wrapper.trigger('blur')。但是该方法不会被激发。我怀疑blur不是正确的事件名称，因为它在控制台中显示为focusout。但是更改名称并不能解决问题。 组件： <template>
<input @blur="foo" />
</template>
... 测试文件： import { mount } from 'vue-test-utils'
import MyCo
浏览 73提问于2019-05-21得票数 0
我有4个按钮，单击该按钮时，就会调用一个组件，其中显示了基于哪个按钮单击的不同数据。
当我第一次单击按钮时，该组件的构造函数和componentWillMount()函数将被调用，但在此之后，它才会被调用，直到我刷新页面或导航到不同的页面并返回。
那么，是否有任何方法可以在每次调用特定组件时调用组件的componentWillMount()函数或构造函数？
我不附加代码，因为问题是相当直截了当。
浏览 4提问于2017-09-27得票数 3
回答已采纳
我正在尝试为使用TypeScript使用装饰器编写的VueJS组件生成代码覆盖率，并为组件的实际逻辑使用单独的.ts文件。例如，对于一个VueJS组件，我实际上有两个文件，一个带有HTML模板的.vue文件，它将一个包含数据/属性/方法的.ts文件调用到一个类组件中。
为了运行测试，我使用vue-test-utils和mocha-webpack，代码覆盖率是使用istanbul/nyc完成的。
下面是我的特定于package.json测试的配置：
下面是我的webpack配置文件中的覆盖规则：
最后还摘录了一个VueJS ProgressBar组件的测试：
组件上的测试运行良
浏览 8提问于2019-11-04得票数 2
3回答
然而，在第二次单击"submit“之后，我得到了我想要的输出，但它仍然第一次给我一个空数组。
function App() {
const {handleSubmit, register} = useForm()
const [values, setValues] = useState([])
const onSubmit = (data) => {
setValues(data)
console.log(values)
}
return (
<div className="App">
浏览 4提问于2020-10-30得票数 1
我有一个服务，它通过两个方法向我的API发送HTTP请求:一个是获取数据，另一个是在单击事件之后更新对象。
我的初始数据在ngOnInit()上调用时存储
ngOnInit() {
this.data = this.myservice.getData();
}
单击按钮时会调用一个方法：
update(id) {
this.myservice.update(id);
}
这可以很好地工作，但是当我单击update方法时，我需要刷新页面以使用新的更新值查看我的数据。我是Angular的新手，我想知道如何解决这个问题。在调用update之后，我尝试在update函数中重新获
浏览 0提问于2018-01-18得票数 0
我的组件onMounted()函数中有一个setup()钩子来访问$route.params property，但是当我在测试中模拟$route对象时，$route是onMounted()钩子中的undefined，因此抛出了一个错误。这是密码
Component.vue :
<template>
<div>{{ this.$route.params.id }}</div>
</template>
<script lang="ts">
import {defineComponent, onMounted} fro
浏览 16提问于2021-08-02得票数 4
我正在Vue中编写一个Jest测试文件，并收到以下警告：
[vue-test-utils]: name is deprecated and will be removed in the next major version. ()
我的测试应该检查是否呈现了某些属性：
describe("Stock", () => {
it("should render correct symbol, name and quantity", () => {
const stock = {
name: "Apple",
浏览 0提问于2021-02-05得票数 1
我想在我的JTable中添加一个按钮。单击此按钮时，相应单元格的内容应显示在新的JTextArea中。在PL/SQL Developer中有这样一个按钮，如下所示：
可点击：
编辑:我试过这样做：
public class TestKonfigTableCellRenderer extends DefaultTableCellRenderer {
@Override
public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFoc
浏览 6提问于2017-07-28得票数 0
2回答
我有一个带有路由/home的父组件，它包含一个列表，当单击一个列表项时，我导航到/home/编辑/listid并更新数据库。在数据库更新之后，我将导航回/home。但是，直到我手动刷新页面时，列表才会更新。我还尝试在更新数据库后调用dataservice.getList()，但没有成功。下面是我的密码。有人能帮我确认一下我错过了什么吗？
家庭组件
ngOnInit() {
this.loadList();
}
loadList() {
this.dataservice.getList().subscribe(
res => {
this
浏览 4提问于2018-01-11得票数 6
2回答
我正在尝试实现一个函数，该函数在单击事件按钮上设置状态的"changedMarkup“属性。
构造器
constructor() {
super();
this.state = {
value: 0,
changedMarkup: 0
};
}
渲染
render() {
const { classes } = this.props;
return (
<Paper className={styles.root}>
<Tabs
value={this.state.value}
浏览 0提问于2020-06-07得票数 0
回答已采纳
我正在尝试获取React组件中按钮上单击事件的e.target.innerHTML，并将其指示给另一个常量setState，但是：
在第一个单击中，e.target.innerHTML本身将正确显示，但已签名的状态值未定义。
在第二个单击中，正确地显示了已签名的状态值。
如果我单击列表中的另一个按钮-显示的值是前一个按钮被舔过的
如果我再单击新按钮一次，就会正确地显示已签名的状态值。
这里的所有组件代码：
function categoryClickHandler(e) {
e.preventDefault();
const collection =
浏览 0提问于2021-04-10得票数 0
回答已采纳
我正在为我用Vue构建的组件构建一个jest测试环境。该组件期望通过该组件的父组件上的vue插件计算的对象作为道具。(具体地说，是由vuelidate插件计算的$v对象)
我的测试方法是使用vue-test-utils的shallowMount的options参数的parentComponent和propsData属性，但是我不知道如何将变量从父组件传递到组件的属性。
TextField.spec.js：
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuelidate from &
浏览 0提问于2019-11-01得票数 1
我正在使用Vue.js和jest测试一个vue-test-utils 2组件。此组件自动将焦点设置为特定元素。JSDom应该指向document.activeElement变量中的这个元素，但是即使我在测试中使用wrapper.find(...).element.focus()手动设置焦点，它也只能指向body元素。
it('focuses the default option automatically', async () => {
const wrapper = await mount(component);
console.log(document.act
浏览 9提问于2020-11-27得票数 0
回答已采纳
当我想用functional component来访问属性时，我不能仅仅像wrapper.props()那样访问它，那么我该如何访问它们呢？ Error: [vue-test-utils]: wrapper.props() cannot be called on a mounted functional
component.
浏览 32提问于2019-07-02得票数 0
1回答
大家好，我是Reactjs的新手。当我在模式模式下单击删除按钮时，我在重新加载渲染时遇到了困难。我希望在单击按钮后，渲染应该重新加载，而不是重新加载页面。
下面是我的一些代码：
render (
....
<button className="btn btn-black btn-myproducts-delete"
data-toggle="modal" onClick={ this.assignId.bind(null, data.id) }>
<span className="glyphicon glyphicon-tr
浏览 1提问于2017-08-29得票数 0
我有两个不相关的组件连接到redux。一个是按钮，另一个是应用程序的HomeScreen。计划是在单击按钮时让HomeScreen知道。所以，我有一个动作和一个减速机来传递按钮的状态。这很好，只是当我第一次单击按钮时，HomeScreen没有收到更新。我得按两次按钮才能让州通过。
增加事件行动：
import { PLUS_INCIDENT } from './types';
export const plusIncident = pressed => (dispatch) => {
console.log('2: action: ', pre
浏览 0提问于2019-03-31得票数 2
回答已采纳
我正在将一个非常大的应用程序从vue-test-utils beta升级到v1。以前，在测试转换时，vue-test-utils预置了TransitionStub和TransitionGroupStub组件，可以用来查找转换并与之交互。我知道我可以创造我自己的..。 const TransitionStub = {
render() {
return this.$options._renderChildren;
},
}; 这适用于简单的情况，但是如果我shallowMount一个带有转换的组件，并且想要发出一个after-enter事件来测试随后发生的事情，
浏览 50提问于2020-06-09得票数 0
我正在使用来自EditUser的mount函数在测试中安装一个组件vue-test-utils。EditUser有一个子组件ChangePassword。mount应该按原样挂载所有子组件，而不是存根。我使用类似于此的ChangePassword submit方法访问ref组件。它在浏览器中运行良好，但在测试中，$refs被设置为空对象，无法访问提交方法。我正在使用jest测试我的vue组件。
在EditUSer.vue组件中
updatePassword() {
this.$refs.changePassword.submit()
.then(data => {
浏览 3提问于2020-07-10得票数 2
我刚刚开始使用导航组件库。我实现了一个底部导航视图，并将其与NavController连接起来。问题是，每次我单击导航图标时，都会重新创建相关的片段。我希望它能在后台堆栈中重用片段。有人能给我一个解决办法吗。
注意:我尝试过使用OnNavigationItemSelecetedListener。它似乎不覆盖底部导航单击事件。
浏览 3提问于2020-06-26得票数 0
1回答
我使用Vue 2，vue-test-utils，jest
插件是vue-croppa，用于上传图片。
import Croppa from 'vue-croppa'
Vue.use(Croppa, { componentName: 'image-croppa' })
它通过v型安装到我的组件上。然后我就可以调用一些方法了。
模板
<image-croppa v-model="myCroppa" ...>
脚本
data() {
return {
myCroppa: {},
}
},
此外，我还有一些方法调用vue-cr
浏览 2提问于2018-03-01得票数 5
回答已采纳
使用Vue，我有一些无线电输入：
<label>
<input
v-model="myProperty"
v-bind:value="true"
name="myProperty"
type="radio"
> True
</label>
<label>
<input
v-model="myProperty"
v-validate="input.
浏览 0提问于2018-11-26得票数 2
回答已采纳
1回答
我正在为一个使用firebase的vue项目编写单元测试。测试使用的是vue-test-utils。
问题是，我很难绕过考试，每次考试我都会做这样的事情。
...
const login = async () => {
return firebase.auth().signInWithEmailAndPassword(email, pass).then(
res => {
return res
},
err => {
return new Error(err)
})
}
...
describe('som
浏览 0提问于2018-10-04得票数 3
回答已采纳
我遇到的问题是，当我更改子组件的状态时，父组件的状态也会被更改。我把道具递给孩子：
{this.state.users.map((user, index) => (
<UserRow
key={user.id}
user={user}
removeUser={this.removeUser}
getUserInfo={this.getUserInfo}
finishFunc={this.finishChanges}
/>
))}
然后把这个支柱分配给孩子的一个状态，
浏览 3提问于2018-07-25得票数 1
回答已采纳
2回答
我有一个带有4个不同I的数组的简单aip。在react中，我为每个ids创建了一个带有按钮的<ul>。当我单击该按钮时，我希望使用来自api的新的特定按钮id值来更改state.id和console.log --新的state.id (最终，我希望根据按下的按钮更改一些呈现)。
我需要在其中一个按钮上按两次以console.log我想要的id，我需要在第一次单击时改变状态(对一些新的呈现进行一些更改)。
浏览 7提问于2022-03-30得票数 0
回答已采纳
我是vue-test-utils新手，我想为我的Tinymce/index组件编写test.spec.js，但是当我运行npm test时，我得到了这个错误：
Tinymce >遇到声明异常
TypeError: Cannot read property 'init' of undefined
122 | initTinymce() {
123 | const _this = this
> 124 | window.tinymce.init({
| ^
125 | selector: `#${
浏览 7提问于2018-12-11得票数 0
在VueJs web应用程序中，我们使用vue-test-utils和mocha-webpack编写了500多个单元测试用例(在所有模块中)，使用nyc编写了覆盖报告。考虑一个目录中的每个模块。当我为特定模块运行测试用例时，用测试用例结果(通过或失败)成功地生成报告。但是，一次运行所有测试用例(通过在package.json中设置路径)，所有测试用例都不会执行，并抛出以下错误：
超时超过100000ms。对于异步测试和钩子，请确保调用"done()“；如果返回承诺，则确保其解析。
我也看到了类似的问题，建议在代码中使用异步等待或增加超时来解决这个问题，但是为什么在运行特定模块时执行测试
浏览 4提问于2019-06-20得票数 1
回答已采纳
我正在使用react/redux，并试图使用react生命周期方法来使其工作。我将一步一步地完成我想要发生的事情和正在发生的事情。
我将张贴所有的代码，我认为是必要的，以解决这个问题。如果你需要更多的东西，请在下面评论，我会把它添加到一个编辑中，而不是这样回答评论没有得到编译。
我想要的：
用户输入数据并单击
用户已登录，他们的电子邮件显示在标头组件中。
用户单击“退出”，然后转到“注销”组件。
当用户被带到“注销”组件时，他们的电子邮件不再显示。
正在发生的事情：
用户输入数据并单击
用户已登录，电子邮件在完成硬刷新之前不会显示在标头组件中。
用户单击“退
浏览 3提问于2017-06-29得票数 0
回答已采纳
我刚开始使用react，我得到了一个奇怪的行为，我不能理解。
class App extends Component {
state = {
newTask: [
{
header: 'Header',
description: 'Detailed description'
}]}
setTask = () => {
console.log(this.state.newTask)
this.setState({newTask: [
{
hea
浏览 1提问于2018-05-24得票数 0
我的vue代码调用element-ui模块：
// in main.js
import { Notification } from "element-ui";
一开始，我的测试是
无法从“test.js”中找到模块“元素”
所以我嘲弄了模块
jest.mock('element-ui', () => ({
Element: jest.fn(),
}))
但是，它仍然错误地与
无法从'test.js‘中找到模块’元素-ui/lib/主题-默认/Element.css‘
我不知道该怎么通过这个。
有什么想法吗？谢谢。
如果我在我的
浏览 2提问于2018-03-05得票数 1
回答已采纳
1回答
我试图用redux的方式显示数据。
当您单击高级体育搜索按钮时，会打开一个抽屉，当您单击“搜索属性”时，它应该呈现历史数据。
所以我在actions fetchHistorySportsDatafromURL中创建了这个方法
然后在抽屉的选项卡中调用这个fetchHistorySportsDatafromURL方法。
但它没有显示数据。
我对这个const historySports = this.props.historySports；console.log(“historySports-”，historySports)进行了调试并发现未定义；
我正在使用mapD
浏览 2提问于2018-12-22得票数 0
回答已采纳
1回答
我正在尝试更新某个项的缓存，但是更改没有反映到ui上，我有一个由包含大量变量的查询获取的项，并且在我正在更新该项的组件上无法访问它们，而且该项也是分页列表的一部分，所以我的代码是
update = (cache)=>{
cache.data.data['ItemType_'+itemId].title = "New title"
}
据我所知，这段代码应该更新该项的缓存，但它没有在ui中显示它，是否有方法更新缓存中的单个项并呈现结果？
浏览 7提问于2022-11-21得票数 1
因此，在Vue-test-utils中不推荐使用setMethods之后，我将我的测试更改为使用jest.spyOn。我只是想从子组件中发出一个事件，并检查父组件上调用了相应的方法，但不知怎么的，我的方法从未被调用过。
it('calls promptPasswordReset method when forgotten-password event is emitted from LoginForm', () => {
const wrapper = shallowMount(login, { store, localVue })
const promp
浏览 3提问于2020-10-21得票数 1
回答已采纳
在Vue.js中，功能组件可以通过使用returns an array of createdElements的render函数返回多个根节点。 export default {
functional: true,
props: ['cellData'],
render: function (h, context) {
return [
h('td', context.props.cellData.category),
h('td', context.props.cellData.description
浏览 49提问于2019-01-17得票数 5
回答已采纳
我想在展示中做同样的事情，但不刷新页面。例如:在输入文本中设置值，然后单击按钮查看结果，但如果我有<p:ajax event="blur" />或<p:ajax/>，则必须单击按钮两次
<p:inputText id="data" value="#{buttonView.data}">
<p:ajax/>
</p:inputText>
<p:commandButton value="Ajax Submit" id="ajax" ac
浏览 12提问于2017-08-24得票数 0
只是想做动态模态。当我单击按钮时，它可以工作，但不会立即设置状态。首先，console.log返回空数组。其他人工作正常。
//状态和处理程序
const [showModal, setShowModal] = React.useState([])
const handleModal = (id) => {
const modalData = data?.filter((item) => item.id == id )
setShowModal(modalData)
console.log(showModal)
}
console.log(showMod
浏览 1提问于2022-07-06得票数 -1
回答已采纳
我使用Vue v2.6和Jest (v24.9)和Vue-Test-Utils (v1.03)。
为了模拟一个方法，我看到了两种不同的语法，
wrapper.vm.updateCart = jest.fn();
和
wrapper.setMethods({ updateCart: jest.fn() });
但是，第一个没有文档化，而第二个被废弃(请参见)。
问题是，使用这两种方法，进行测试的唯一方法是调用模板中带有括号的方法，这很奇怪，因为我读过的所有文档都鼓励使用模板中没有括号的方法。
所以这个测试：
test('Click on .btn calls the right func
浏览 1提问于2020-07-02得票数 7
回答已采纳
1回答
下面是来自我的组件的代码和当前的测试：
// component script
import { mapActions } from 'vuex'
export default {
name: 'foo',
mounted () {
this.firstMethod()
.then(() => {
this.secondMethod()
})
.then(() => {
this.thirdMethod()
})
},
methods: {
浏览 1提问于2017-11-12得票数 0
回答已采纳
1回答
如何修复错误：Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
这是密码：
useEffect(() => {
let ignore = false;
浏览 6提问于2021-01-27得票数 0
回答已采纳
1回答
你怎么解决这个问题？
Setup：我有一个页面，可以根据用户单击侧菜单的位置在组件之间导航。
Problem：显示的每个组件都需要执行API调用才能得到用户可以对其执行CRUD操作的表，因此每次用户切换视图时都有一个加载时间。
问题：我如何优化它以避免每个组件的加载时间？我考虑在父组件中执行一个get调用，然后通过"@Input“将每个数据传递给相应的组件，但是知道每个组件中有一个CRUD表，用户可以与其交互，数据是否足够新鲜？
谢谢你读我的文章
浏览 5提问于2022-05-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
