javascript - 如何在填充特定值时调用 Vue.js 组件上的方法，但仅调用一次

Question

我正在开发一个使用 Vue.js(当前版本为 2.6.11)的应用程序，随着应用程序的增长，我经常看到一种模式出现:我想抽象出一些功能，所以我提取了一个新组件，但是当我将 mounted Hook 中的一些代码从父级复制到子级时，一些以前可用的数据现在未定义。有时数据来自 Prop ，有时来自 Vuex 商店。

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

这是一个例子:

父组件

<template>
    <div class="options-container">
        <features-list />
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import FeaturesList from '../features/FeaturesList.vue';

export default {
    name: 'ProductComponent',
    components: {
        FeaturesList,
    },
    computed: {
        ...mapGetters('product', [
            'userSelection',
        ]),
    },
    mounted() {
        // here I can call the methods which rely on UserSelections
        // the variable UserSelections has already a value here
        const params = this.getTemplateCollectionParams();
        this.getTemplateAssets(params);
    },
};
</script>

子组件

<template>
    <div class="options">
        <template v-for="key in sortedFeaturesLayout">
            <feature-base-component
                :option="options[key]"
                :key="key"
                v-on="$listeners"
            />
        </template>
    </div>
</template>
<script>
import FeatureBaseComponent from './FeatureBaseComponent.vue';
import { mapGetters } from 'vuex';

export default {
    name: 'FeaturesList',
    components: {
        FeatureBaseComponent,
    },
    computed: {
        ...mapGetters('product', [
            'userSelection',
        ]),
    },
    methods: {
        getTemplateCollectionParams() {
            // ...
        },
        getTemplateAssets(params) {
            // ...
        },
    },
    mounted() {
        // here I have an error because `userSelection` is still empty
        const params = this.getTemplateCollectionParams();
        this.getTemplateAssets(params);
    },
};
</script>

我通常做的是在值上创建一个观察者，然后在观察者更新时调用该函数。由于原始代码只执行一次，我想检查此方法是否也只被调用一次，因此添加一个 bool 值来检查此代码是否已被执行。

<template>
    <div class="options">
        <template v-for="key in sortedFeaturesLayout">
            <feature-base-component
                :option="options[key]"
                :key="key"
                v-on="$listeners"
            />
        </template>
    </div>
</template>
<script>
import FeatureBaseComponent from './FeatureBaseComponent.vue';
import { mapGetters } from 'vuex';

export default {
    name: 'FeaturesList',
    components: {
        FeatureBaseComponent,
    },
    data() {
        return {
            isFirstLoad: true,
        };
    },
    computed: {
        ...mapGetters('product', [
            'userSelection',
        ]),
    },
    methods: {
        getTemplateCollectionParams() {
            // ...
        },
        getTemplateAssets(params) {
            // ...
        },
    },
    watch: {
        userSelection() {
            // get gallery
            if (this.isFirstLoad) {
                // here I need the getter userSelection which is empty on `mounted`
                const params = this.getTemplateCollectionParams();
                this.getTemplateAssets(params);
                this.isFirstLoad = false;
            }
        },
    },
};
</script>

我认为我所做的并不是完全错误的。但是，我想知道是否有一种更简洁的方法仅在 prop 第一次具有值时执行方法，因为有时我最终会得到大量 bool 值，它们仅用于此目的。

Answer 1

您也可以使用 vm.$watch ，它返回一个 unwatch 函数，可以调用该函数来停止后续回调:

const unwatch = this.$watch('userSelection', userSelection => {
  //...

  // stop watching
  unwatch()
})

这样做的好处是不需要额外的标志来检查 watch 处理程序是否已经被调用，并且 watcher 只被调用一次。