Vue watch的函数不被执行，在监视的数据变动情况下

ing · 发表于 2020-6-21 18:24

本帖最后由 ing 于 2020-7-6 08:35 编辑

问题来源：主要是 watch 监听的是对象导致了这一问题，还有在这个组件上使用 v-model
————————————————————————————————————————————————————————————————————
捕获.PNG

最奇怪的是生命周期函数 created 被提示“从未使用”
捕获.PNG

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <base-input v-bind:user="user"></base-input>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                user:{
                    name:'',
                    firstName:'test',
                    lastName:''
                }
            },
            watch:{
                user:function () {//一旦user内容发生改变这个函数应该被立刻调用(实际没有)
                    this.debouncedGetName();

                    console.log("user:function ()");
                }
            },
            created:function() {
                this.debouncedGetName = _.debounce(this.getName,600)
            },
            methods:{
                getName:function(){
                    let lastname = new Array();
                    this.user.firstName = this.user.name.split(' ')[0];
                    if (this.user.name.split(' ').length > 1)
                        for (let i = 1; i<this.user.name.split(' ').length; i++)
                            lastname[i] = this.user.name.split(' ')[i];
                    this.user.lastName = lastname.join('');

                    console.log("getName:function ()");
                }
            },
            components:{
                "base-input":{
                    props:['user'],
                    template:`
                            <div>
                                <input type="text" v-model="user.name">
                                <slot>
                                    <p>FitstName:{{user.firstName}}</p>
                                    <p>LastName:{{user.lastName}}</p>
                                </slot>
                            </div>
                    `
                }
            }
        });
    </script>
</body>
</html>

ing · 发表于 2020-7-6 08:26

本帖最后由 ing 于 2020-7-6 09:06 编辑

https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model

[Asm] 纯文本查看 复制代码

<div id = "app">
    <base-input :user="user" v-model="user.name"></base-input>
</div>

<script type="text/javascript">

    var datas = {
        user:{
            name:'',
            firstName:'',
            lastName:''
        }
    };

    var vm = new Vue({
        el:'#app',
        data:datas,
        watch:{
            // 监听 user 对象无法检测到对象内容的变化，
            // 以至于 name 的改变没有使函数触发
            'user.name':function () {  
                this.debouncedGetName();
            }
        },
        created:function(){
            this.debouncedGetName = _.debounce(this.getName,600)
        },
        methods:{
            getName:function(){
                let lastname = [];
                this.user.firstName = this.user.name.split(' ')[0];
                if (this.user.name.split(' ').length > 1)
                    for (let i = 1; i<this.user.name.split(' ').length; i++)
                        lastname[i] = this.user.name.split(' ')[i];
                this.user.lastName = lastname.join('');
            }
        },
        components:{
            "base-input":{
                props: ['value','user'],
                template:`
                    <div>
                        <input type="text" @input="$emit('input',$event.target.value)">
                        <slot>
                            <p>FitstName:{{user.firstName}}</p>
                            <p>LastName:{{user.lastName}}</p>
                        </slot>
                    </div>
                `
            }
        }
    });
</script>

kof21411 · 发表于 2020-6-21 19:23

兄弟，你的 watch，created，methods里的函数写错地方了，你应该写子组件里，不是写在父组件里

netCheney · 发表于 2020-6-21 20:38

个人看法：watch在user函数发生之前都己经被执行完了。简单的说即使楼上大佬说的对。

cube · 发表于 2020-6-22 00:15

应该重新看下vue的结构..不得不说,复议2楼

ww952445829 · 发表于 2020-6-22 10:44

二楼正解

不想当咸鱼 · 发表于 2020-7-9 20:43

ing 发表于 2020-7-6 08:26
https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94% ...

我记得vue官网明确说了，父子组件通信时，子组件不得修改父组件的信息，必须通过事件委托触发事件向上冒泡进而修改父组件的数据，可是我看你的虽然能解决问题，但是子组件修改数据导致父组件的数据也修改了，至于watch的监听默认是不能监听对象和列表的，可以使用deep属性进行深度监听，当然也可以用的你这种方法

不想当咸鱼 · 发表于 2020-7-9 21:52

好了，又把Vue中watch整体都摸索了一遍，

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] Vue watch的函数不被执行，在监视的数据变动情况下

免费评分

个人中心