vue的计算属性与方法的不同

计算属性

vue的模板里可以使用表达式，但是它的设计初衷是用于简单计算，在模板中放入太多逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

这里很难一眼看出是要显示什么，而且要多次使用的话也很麻烦，因此对于复杂逻辑应使用计算属性

错误示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message.split('').reverse().join('') }}</p>
</div>
<script>
    let app = new Vue({
        el:"#app",  //关联dom对象
        data:{
            message:'I have a dream'   //模板使用的数据
        },
    })

</script>
</body>
</html>

正确写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--   直接使用方法名就行，不用加括号   -->
    <p>{{ reversedMessage }}</p>
</div>
<script>
    //建议vue的变量命与作用的标签id一致
    let app = new Vue({
        el: "#app",  //关联dom对象
        data: {
            message: 'I have a dream'   //模板使用的数据
        },
        //定义计算属性
        computed: {
            // 在computed里定义方法，使用的时候直接写方法名
            reversedMessage: function () {
                // `this` 指向 app 实例，data里面的数据可以直接获取到htis.message
                return this.message.split('').reverse().join('')
            }
        }
    })

</script>
</body>
</html>

计算属性与方法的不同

上述例子中也可以通过调用方法来达到同样的目的

在组件中定义方法

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

调用方法

<p>Reversed message: "{{ reversedMessage() }}"</p>

就得到的结果而言，两种方式是完全一致的。但是不同的是，计算属性是基于它们的依赖进行缓存的，也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值，对于上述的例子，只要message不发生改变，多次访问reversedMessage计算属性会立即返回结果而不必再次执行函数

下面我们来验证这个结论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>


<div id="app">
    <p>使用计算属性</p>
    <p>{{reversedMessage}}</p>

    <hr>


    <p>使用方法</p>
    <p>{{reversedMessageMethod()}}</p>

</div>

<script>
    //建议vue的变量命与作用的标签id一致
    let app = new Vue({
        el:"#app",
        data:{
            message:"I have a dream",
        },
        //计算属性
        computed:{
            reversedMessage:function () {
                console.log("in computed");
                return this.message.split("").reverse().join("")
            }
        },

        methods:{
            reversedMessageMethod:function () {
                console.log("in method");
                return this.message.split("").reverse().join("")
            }
        }

    })
</script>


</body>
</html>

打开html，右键检查-console

小结

模板内表达式包含复杂逻辑时，应使用计算属性
只要计算属性使用的数据不发生变化，计算属性就不会执行，而是直接使用缓存

vue的计算属性与方法的不同

计算属性

计算属性与方法的不同

小结

猜你喜欢