Vue中的计算值和methods的简单的区别

一、vue中的计算值的几个简单的区别和实现的方式

1.vue中的计算值有缓存，构成的过程中有set方法和get方法，其本质是一个属性在vue中的文件中使用的过程中直接使用不用像methods中的方法使用的时候要用()让其主动的执行。
2.vue中的set方法和get方法能改变计算属性中的值，并且必须要使用return出去。不像方法一样要计算好多次。计算值得更改是有变化的时候菜执行。并且有缓存

二、简单的实现一个计算属性

{{userName}}

data(){
    return {
        firstName； 'Du',
        lastName: 'BaoQiang'
    }
}
computed :{
    userName: {
        set() {
            console.log('计算值中的值有所改变')
        } ,
        get() {
            return this.firstName + '  ' + this.lastName
        }
    }
}

// 这是计算属性中定义的原始方式简化版使用下面的语法糖
computed: {
    userName() {
        return this.firstName + ' ' + lastName 
    }
}

// 要是改变计算属性中的值的时候一定使用set方法，其方法中接收一个参数
set (newValue) {
    this.firstName = newValue
}
get() {
    console.log(this.firstName)
}
执行的时候可以改变计算值中的值，不然vue会报警告。没有set只有get

三、在使用vue中的vuex的时候，要想在vue中的文件中更改store中的值和计算属性中的值的时候。通过 $store.commit('userName',data)来触发mutation中的计算属性，或者通过接口通过action来commit mutation中更改的方法。当然在mutation中更改state中的值是最划算的方式。这样逻辑层和.vue中页面中的渲染逻辑可以提出来。互不影响

四、vue中使用到递归的时候通过function直接定义然后再相应的mutation中直接调用。递归处理的值也 就是调用它的state中的值。

methods中的方法和计算值中的方式和计算值的实现简单的归结以便下次面试之用，这里的get和set和原生中的object.defineProperty中的set和get类似。但是原生中的参数有可读和可写属性，注意一定要记清楚。不然就乱了