Javascript 如何在填充特定值(但仅填充一次)时对Vue.js组件调用方法

Javascript 如何在填充特定值(但仅填充一次)时对Vue.js组件调用方法,javascript,vue.js,vuex,Javascript,Vue.js,Vuex,我正在开发一个使用Vue.js(当前版本为2.6.11)的应用程序,随着应用程序的发展,我经常会看到一种模式:我想抽象掉一些功能,因此提取一个新组件,但当我将挂载的钩子中的一些代码从父对象复制到子对象时,以前可用的一些数据现在尚未定义。有时数据来自道具,有时来自Vuex存储 我认为问题来自这样一个事实,与我最初的想法相反,内部组件在外部组件之前被初始化 以下是一个例子: 父组件 从“vuex”导入{mapGetters}; 从“../features/FeaturesList.vue”导入Fe

我正在开发一个使用Vue.js(当前版本为2.6.11)的应用程序,随着应用程序的发展,我经常会看到一种模式:我想抽象掉一些功能,因此提取一个新组件,但当我将
挂载的
钩子中的一些代码从父对象复制到子对象时,以前可用的一些数据现在尚未定义。有时数据来自道具,有时来自Vuex存储

我认为问题来自这样一个事实,与我最初的想法相反,内部组件在外部组件之前被初始化

以下是一个例子:

父组件

从“vuex”导入{mapGetters};
从“../features/FeaturesList.vue”导入FeaturesList;
导出默认值{
名称:“ProductComponent”,
组成部分:{
功能列表,
},
计算:{
…映射器('产品'[
“用户选择”,
]),
},
安装的(){
//在这里,我可以调用依赖于用户选择的方法
//变量UserSelections在这里已经有一个值
const params=this.getTemplateCollectionParams();
此.getTemplateAssets(参数);
},
};
子组件

从“./FeatureBaseComponent.vue”导入FeatureBaseComponent;
从“vuex”导入{mapGetters};
导出默认值{
名称:“FeatureList”,
组成部分:{
FeatureBaseComponent,
},
计算:{
…映射器('产品'[
“用户选择”,
]),
},
方法:{
getTemplateCollectionParams(){
// ...
},
getTemplateAssets(参数){
// ...
},
},
安装的(){
//这里有一个错误,因为'userSelection'仍然为空
const params=this.getTemplateCollectionParams();
此.getTemplateAssets(参数);
},
};
我通常做的是在值上创建一个观察者,然后在更新观察者时调用该函数。因为原始代码只执行了一次,我想检查这个方法是否也只调用了一次,所以添加一个布尔值来检查这个代码是否已经执行过


从“./FeatureBaseComponent.vue”导入FeatureBaseComponent;
从“vuex”导入{mapGetters};
导出默认值{
名称:“FeatureList”,
组成部分:{
FeatureBaseComponent,
},
数据(){
返回{
isFirstLoad:true,
};
},
计算:{
…映射器('产品'[
“用户选择”,
]),
},
方法:{
getTemplateCollectionParams(){
// ...
},
getTemplateAssets(参数){
// ...
},
},
观察:{
用户选择(){
//获得画廊
if(this.isFirstLoad){
//这里我需要getteruserselection,它在挂载时为空`
const params=this.getTemplateCollectionParams();
此.getTemplateAssets(参数);
this.isFirstLoad=false;
}
},
},
};

我认为我所做的并不是完全错误的。但是,我想知道是否有一种更干净的方法可以只在道具第一次有值时执行方法,因为有时我会得到大量布尔值,这些布尔值仅用于此目的。

您也可以使用,它返回一个
unwatch
函数,可以调用该函数来停止后续回调:

const unwatch=this.$watch('userSelection',userSelection=>{
//...
//别看了
unwatch()
})
这样做的好处是不需要额外的标志来检查是否已经调用了监视处理程序,并且只调用了一次监视程序


谢谢,这正是我需要的!我在其他示例中也看到过类似的情况,但我不认为我可以在回调函数中直接调用
unwatch