Vue中，计算属性computed和methods的区别

写在前面：
关键点：

计算属性computed是有缓存的。
计算第一次结果后会存入缓存，第二次调用该计算属性computed的时候，他会先读取需要返回的结果是否发生改变，如果没有就直接返回缓存的结果，如果改变了才会从新计算。

应用场景小demo：
在内容拼接时，直接在html代码中书写mustache语法{ { }}的时候，若内容较多，则会导致篇幅较大。因此可以通过创建methods中的方法或者创建computed中的属性来进行代码可读性优化。

代码如下：

<body>
    <div id="app">
        <!-- 1.直接拼接：语法过于繁琐 -->
        <h2>{
    
    {
    
    firstName+' ' + lastName}}</h2>
        <!-- 2.通过定义methods -->
        <h2>{
    
    {
    
    getFullName()}}</h2>
        <h2>{
    
    {
    
    getFullName()}}</h2>          <!-- methods中的方法打印了4次 -->
        <h2>{
    
    {
    
    getFullName()}}</h2>
        <h2>{
    
    {
    
    getFullName()}}</h2>
        

        <!-- 3.通过computed属性 -->
        <h2>{
    
    {
    
    fullName}}</h2>
        <h2>{
    
    {
    
    fullName}}</h2>               <!-- computed打印了1次 -->
        <h2>{
    
    {
    
    fullName}}</h2>
        <h2>{
    
    {
    
    fullName}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el:'#app',
            data:{
    
    
                firstName:'Kobe',
                lastName:'Beyant'
            },
            methods:{
    
    
                getFullName: function(){
    
    
                    console.log('调用的methods');
                    return this.firstName + ' ' + this.lastName;
                }
            },
            computed:{
    
    
                fullName: function(){
    
    
                    console.log('调用的computed');
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
        //  计算属性会做一次缓存， 如果内容没有改变，则这个缓存就不会改变，每次访问都是访问这个缓存
        // 因此， 计算属性的性能 要好于 methods属性 
    </script>
</body>

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

说明：
计算属性会做一次缓存，如果内容没有改变，则这个缓存就不会改变，每次访问都是访问这个缓存。
因此， 计算属性computed的性能要好于 methods属性

Vue中，计算属性computed和methods的区别

Vue中，计算属性computed和methods的区别

猜你喜欢