Question

我有一个组件，＆＃34; cmptest＆＃34;，它有一个受监视的属性，＆＃34; needWatch＆＃34;。该组件位于v-if语句中，但在呈现时不会调用被监视的函数。

如示例中所示，＆＃34; needWatch＆＃34;道具设置为＆＃34;值＆＃34;来自＆＃34; cmpcheck＆＃34;的数据属性，是什么让我期望在这里触发手表回调。

如果我删除v-if语句，则单击该复选框时将按预期调用该函数。

<div v-if="value===true"><!--remove-->
    <cmptest :need-watch="value"></cmptest>
</div><!--remove-->

这是设计的吗？我在这里做错了什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="vue.js"></script>

    <script type="text/x-template" id="cmptesttemplate">
        <div>
            <p>needWatch: {{needWatch}}</p>
            <p>updateByWatch: {{updateByWatch}}</p>
        </div>
    </script>

    <script type="text/x-template" id="cmpchecktemplate">
        <div>
            <input id="checkBox" type="checkbox" value="1" v-on:click="setCheckboxValue()">
            <div v-if="value===true">
                <cmptest :need-watch="value"></cmptest>
            </div>
        </div>
    </script>

</head>
<body>
<div id="container">
    <cmpcheck></cmpcheck>
</div>
<script>

    var cmptest = Vue.component('cmptest', {
        template: '#cmptesttemplate',
        data: function() {
            return {
                updateByWatch: ''
            }
        },
        props: ['needWatch'],
        watch: {
            needWatch: function(v) {
                console.log('Watched!');
                this.updateByWatch = Math.random();
            }
        }
    });

    var cmpcheck = Vue.component('cmpcheck', {
        template: '#cmpchecktemplate',
        data: function() {
            return {
                value: 'Unitialized'
            };
        },
        methods: {
            setCheckboxValue: function() {
                console.log('SELECTED');
                var el = $(this.$el).children('#checkBox').is(':checked');
                this.value = el;
            }
        }
    });

    new Vue({
        el: '#container',
        components: {
            'cmptest': cmptest,
            'cmpcheck': cmpcheck
        }
    });
</script>
</body>
</html>

Answer 1

好吧，只要value为Unitialized（因此，不是true），就永远不会呈现<cmptest :need-watch="value"></cmptest>，因此观察者实际上并不存在。调用setCheckboxValue后，如果value为true，则会呈现cmptest，然后初始化观察者。但value已经true，因此未触发。

但是，您可以使用：

watch: {
  needWatch: {
    immediate: true,
    handler(nv, ov) { ... }
  }
}

以便在needWatch启动时运行您的观察者回调。

不会调用v-if语句中的组件的监视prop回调

1 个答案: