Vue 中计算属性的 setter 和 getter

素颜马尾好姑娘i 2022-03-07 05:04 246阅读 0赞

计算属性其实是非常强大的，这一节深入的学习下计算属性，先看一段代码：

<div id="app">
        {
        {fullName}}
    </div>
    let vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Dell',
            lastName: 'Lee'
        },
        computed: {
            fullName(){
                return this.firstName + ' ' + this.lastName
            }
        }
    })

插值表达式`{ {fullName}}`首先回去`data`中去找`fullName`这个属性，找不到再去计算属性中去找，找到之后在将它显示在页面之中。

计算属性中的`fullName`我们换一种写法：

<div id="app">
        {
        {fullName}}
    </div>
    let vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Dell',
            lastName: 'Lee'
        },
        computed: {
            fullName:{
                get(){
                    return this.firstName + ' ' + this.lastName
                },
                set(value){
                    var arr = value.split(' ')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })

当我去使用这个计算属性的时候，调用插值表达式，去读这个内容，它就会走`get`的方法

当我去设置这个属性属性值的时候，`set`方法会被执行，同时会拿到设置的这个值，我就可以通过这个值去设置`firstName`和`lastName`。

`computed`有这样一个特性，它呢什么时候会重新计算，当它依赖的值发生变化时，它就会重新去计算 ，重新计算之后，那么你看，当你`set fullName`时，`this.firstName`的值就会发生变化，恰好这个值又是`fullName`所依赖的一个值，所以就会引起`fullName`的重新计算，重新计算之后，`fullName`的值变了，页面上显示的`fullName`也就跟着变了。