methods与computed区别

〆﹏为你伏笔

于 2022-05-24 09:17:53 发布

阅读量1.2k

点赞数 2

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Q2159621453/article/details/124930635

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

methods与computed用法差不多

区别：

1.methods属性内的方法调用可以加括号，而computed属性内的方法调用不能加括号（computed内的fullName其实并不是function，他是简写，内部的setter与getter才是方法）。

<body>
    <div id="app">
        <h2>{{getFullName()}}</h2>
        <h2>{{fullName}}</h2>
    </div>
    <script>
        Vue.config.productionTig = false;

        const app = new Vue({
            el:"#app",
            data(){
                return {
                    firstName:"牛",
                    lastName:"顿"
                }
            },
            methods:{
                getFullName(){
                    return this.firstName + this.lastName;
                }
            },
            computed:{
                fullName(){
                    return this.firstName +this.lastName;
                }
            }
        })
    </script>
</body>

    <div id="app">
        <h2>{{getFullName()}}</h2>
        <h2>{{fullName()}}</h2>
    </div>

2、computed计算属性有缓存，同样代码只执行一次，methods没有缓存，需要执行多次。所以计算属性效率更高。

3、计算属性是一个属性，必须要有返回值，methods不一定

4、methods即使firstName与lastName没有改变，也会再次执行

computed，计算属性有缓存，只有关联属性改变才会再次执行

5、更改vue外的变量，vue不刷新但值已经更改。

<body>
    <div id="app">
        <!-- methods即使firstName与lastName没有改变，也会再次执行 -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <!-- computed，计算属性有缓存，只有关联属性改变才会再次执行 -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <!-- 非关联属性 -->
        <p>{{age}}</p>
    </div>

    <script>
        let other = 'this is other'
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    firstName: "天线",
                    lastName: "宝宝",
                    age: 18
                }
            },
            methods: {
                getFullName() {
                    console.log("你调用了getFullName方法");
                    return this.firstName + "" + this.lastName + other;
                }
            },
            computed: {
                fullName() {
                    console.log("你调用了fullName属性");
                    return this.firstName + "" + this.lastName + other;
                }
            }
        })
    </script>
</body>