Vue基础练习之计算属性、方法、监听器 

<body>
    <div id="root">
        {{fullName()}}
        {{age}}
    </div>

    <script>
        var vm = new Vue({
            el: "#root",
            data:{
                firstName:"Yu",
                lastName:"Lee",
                age:21,
            },

            //方法一：计算属性
            computed:{
                fullName:function () {
                    console.log("计算了一次");
                    return this.firstName +" "+this.lastName;
                }
            },

           //方法二：方法(无缓存)
            methods:{
                fullName:function () {
                    console.log("计算了一次");
                    return this.firstName +" "+this.lastName;
                }
            },

           //方法三：监听
           watch:{
               firstName:function () {
                   console.log("计算了一次");
                   return this.firstName +" "+this.lastName;
               },
               lastName:function () {
                   console.log("计算了一次");
                   return this.firstName +" "+this.lastName;
               }
           }
        })
    </script>
</body>

监听与计算属性均有缓存机制，所谓缓存机制就是"不依赖的属性发生改变时，不会重新计算一次“

posted @ 2019-08-02 16:25  且于黑白  阅读(276)  评论(0)  编辑  收藏  举报