vue :计算属性computed 与方法methods区别

最新推荐文章于 2022-04-14 16:30:53 发布

Mars-xq

最新推荐文章于 2022-04-14 16:30:53 发布

阅读量188

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sinat_31057219/article/details/106074818

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>
<body>
<div id="example">
    <p>{{ nowComputed }}</p>
    <p>{{ nameComputed }}</p>
    <p>{{ ageComputed }}</p>

    <input v-model="name">

    <p>{{ nowMethods() }}</p>
    <p>{{ nameMethods() }}</p>
    <p>{{ ageMethods() }}</p>
</div>
<!--
1.两者的执行结果是完全相同的
2.计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，
也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数
3.每次触发重新渲染时，调用方法将总会再次执行函数
4.上方两个例子，计算属性将总会返回相同值，而方法则不会
-->
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello',
            name: 'xq',
            age: "16"
        },
        computed: {
            nowComputed: function () {
                console.log("---------------- nowComputed")
                return Date.now()
            },
            nameComputed: function () {
                console.log(this.name + "---------------- nameComputed")
                return "xq nameComputed"
            },
            ageComputed: function () {
                console.log(this.age + "---------------- ageComputed")
                return "18 ageComputed"
            }
        },
        methods: {
            nowMethods: function () {
                console.log("============== nowMethods")
                return Date.now()
            },
            nameMethods: function () {
                console.log(this.name + "============== nameMethods")
                return "xq nameMethods"
            },
            ageMethods: function () {
                console.log(this.age + "============== ageMethods")
                return "18 ageMethods"
            }
        }
    })
</script>

</body>
</html>