计算属性+侦听器+方法methods

最新推荐文章于 2022-07-19 21:20:11 发布

poki-Q

最新推荐文章于 2022-07-19 21:20:11 发布

阅读量164

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lycsdn/article/details/104978285

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

计算属性 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>

poki-Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性+侦听器+方法methods

计算属性 computed 当数据改变时，方法的结果也会发生改变。如果多处地方调用计算属性里面的同一个方法时，该方法只会执行一次。如图，在控制台改变data里面的num值时，虽然在多处使用computedNum方法，但该方法只执行一次。<body> <div id="app"> <p>computedN...
复制链接

扫一扫

专栏目录