亲宝软件园·资讯

展开

计算属性(computed)+侦听器(watch)+ 方法(methods)

Poki-Q 人气:2

计算属性 computed

  当数据改变时,方法的结果也会发生改变。如果多处地方调用计算属性里面的同一个方法时,该方法只会执行一次。如图,在控制台改变data里面的num值时,虽然在多处使用computedNum方法,但该方法只执行一次。

               

 

 

 

<body>
    <div id="app">
         <p>computedNum:{{computedNum}}</p>
         <p>computedNum:{{computedNum}}</p>
         <p>computedNum:{{computedNum}}</p>
         <p>computedNum:{{computedNum}}</p>
         <p>computedNum:{{computedNum}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num:1
            },
            computed:{
                // 如果有多处
                computedNum:function(){
                    console.log("computing");
                       return this.num*2;
                }
            }
        })
    </script>
</body>

侦听器 watch

   侦听指定属性,属性改变时执行相应的方法。

<body>
    <div id="app">
        <p>watchNum:{{watchNum}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num:1,
                watchNum:""
            },
           // 侦听器 watch  
            watch:{
                // 形式1:num 一发生变化就会执行 num 后面的函数
                // 监听 num 的变化,num发生变化后,newV为变化后的新值,oldV为变化前的旧值。
                // num:function(newV, oldV){
                //     console.log("watch....");
                //     this.watchNum = newV * 2;
                // },
                // 形式2: immediate 为 true 时先执行一次 handler 函数,后续 num 发生变化时也执行handler方法。
                num:{
                    immediate:true, 
                    //  immediate为true时,第一次执行handler函数newValue为data里面的num值,oldValue为undefined
                    handler:function(newValue, oldValue){ 
                        console.log("watch....");
                        this.watchNum = newValue*2
                    }
                }

            },
        })
    </script>
</body>

方法 methods

  在 methods 里面定义的方法可以在模板表达式里面使用。与计算属性不同的是,每当方法里面的数据发生改变,每个使用该方法的地方都会调用一次该方法。如图所示有4处地方调用了该方法,改变 num 值,执行了4次。

            

 

<body>
    <div id="app">
        <p>countNum:{{countNum()}}</p>
        <p>countNum:{{countNum()}}</p>
        <p>countNum:{{countNum()}}</p>
        <p>countNum:{{countNum()}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num:1
            },
            // 里面的方法可以在模板表达式里面使用
            methods:{
                countNum:function(){
                    console.log("counting...");
                    return this.num*2
                }
            }
        })
    </script>
</body>

 

 

加载全部内容

相关教程
猜你喜欢
用户评论