computed属性跟methods方法的区别

最新推荐文章于 2024-10-05 01:22:45 发布

00不吃香菜.

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量98

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/llj1028/article/details/128871684

版权

computed属性跟methods方法的区别

我们可以将同一个函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实完全相同的。
然而，不同的是计算属性是基于他们的依赖进行缓存的,只在相关依赖发生改变时它们才会重新求职。
这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
计算属性computed初次执行函数后，值会存储到缓存中，依赖项未改变，不会再执行函数而是从缓存中立即取出；
methods中的函数每次调用都会执行一次

<body>
    <div id='app'>
        {{nameValue}}--{{name}}
        <button @click="btn">{{nameValue}}</button>
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            name:'今天早点回去睡！！！'
        },
         //计算属性
         //可以没有set事件,但是必须要有get事件(默认)
        computed:{
            nameValue:{
                // 直接进行赋值传递内容
                get:function(){
                    return this.name
                },
                //nameValue发生改变的时候才会执行这个set事件
                //通过点击事件-点击按钮改变内容，再通过传参进行赋值传递。
                set:function(newName){
                    this.name = newName
                },
            },
        },
        methods: {
            btn(){
                this.nameValue = '不能熬夜'
            }
        }
    })
    </script>