Vue-方法、计算属性（computed）、侦听器（watch）

最新推荐文章于 2023-10-13 14:52:51 发布

是Ryan吖

最新推荐文章于 2023-10-13 14:52:51 发布

阅读量82

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45497246/article/details/105067878

版权

Vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

方法func计算得到的结果不会被系统缓存，每当数据有变化就会重新计算

<body>
    <div id="root">
        <div>{{fullName()}}</div> 
        <!-- 方法想在插值表达式进行调用的时候，需要在后面加括号 -->
        <div>{{age}}</div>
    </div>

    <script>
        var vm = new Vue({
            el:"#root",
            data:{
                firstName:"Z",
                lastName:"Ryan",
                age:18
            },
            methods: {
                fullName：function(){
                    console.log('count 1')
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>

运行结果截图：
在这里插入图片描述

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。

<body>
    <div id="root">
        <div>{{fullName}}</div>
        <!-- 调用computed属性时，直接写属性名即可 -->
        <div>{{age}}</div>
    </div>

    <script>
        var vm = new Vue({
            el:"#root",
            data:{
                firstName:"Z",
                lastName:"Ryan",
                age:18
            },
            computed: {
                fullName:function(){
                    console.log('count 1')
                    return this.firstName + ' ' + this.lastName
                    }
            },
        })
    </script>
</body>

运行结果截图：
在这里插入图片描述

侦听器watch是一个对象，键是需要观察的表达式，值是对应回调函数。
（值也可以是方法名，或者包含选项的对象。）
Vue 实例会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

<body>
    <div id="root">
        <div>{{fullName}}</div>
        <!-- 调用computed属性/侦听器watch时，直接写属性名即可 -->
        <div>{{age}}</div>
    </div>

    <script>
        var vm = new Vue({
            el:"#root",
            data:{
                firstName:"Z",
                lastName:"Ryan",
                fullName:"Z Ryan",
                age:18
            },
            watch: {
                firstName:function(){
                    console.log('count 1')
                    this.fullName = this.firstName + ' ' + this.lastName
                },
                lastName:function(){
                    console.log('count 1')
                    this.fullName = this.firstName + ' ' + this.lastName
                }
            },
        })
    </script>
</body>

运行结果截图：
在这里插入图片描述
总结：当一个功能通过方法、计算属性、侦听器都能实现的时候，首选计算属性computed，不仅有缓存机制，减少系统计算量，性能高，而且代码简洁。

是Ryan吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-方法、计算属性（computed）、侦听器（watch）

方法func计算得到的结果不会被系统缓存，每当数据有变化就会重新计算<body> <div id="root"> <div>{{fullName()}}</div>  <div>{{age}}&l...
复制链接

扫一扫

专栏目录