vue

vue的内部变量和外部变量改变值computed、methods、watch调用区分

发布于 2022-10-30 08:11:09

第一步，把computed、methods、watch全部写出，在页面分别输出不同情况下的结果

    <body>
        <div id="app">
            <h2>计算属性：computed</h2>
            {{fullname}}
            <h2>方法：methods</h2>
            {{fullname2()}}
            <h2>侦听器：watch</h2>
            {{watchFullname}}
            <h2>年龄：age</h2>
            {{age}}
        </div>
        
        <script>
            var other = 'This is  other.'
            const app = new Vue({
                el: '#app',
                data(){
                    return {
                            firstname:'zhang ',
                            lastname: 'san ',
                            watchFullname: 'zhangsan',
                            age: 12
                    }
                },
                methods:{
                    fullname2(){
                        console.log('调用了fullname2(),使用了一次方法');
                        return this.firstname+this.lastname+','+other;
                    }
                },
                computed: {
                    fullname() {
                        console.log('调用fullname，使用了一次属性');
                        return this.firstname+this.lastname+','+other;
                    }
                },
                
                watch: {
                    firstname(newValue, oldValue) {
                        console.log('firstname触发了watch');
                        this.watchFullname = this.firstname+this.lastname+','+other;
                    },
                    lastname(n,o){
                        console.log('lastname触发了watch');
                        this.watchFullname = this.firstname+this.lastname+','+other;
                        
                    }
                },
            })
        </script>
    </body>

现在来看看结果

图片.png