vue计算属性

计算属性

定义：要用的属性不存在，通过已有得属性计算得来

原理：借助底层的defineproperty来实现！！！！！

---

当我们确定计算属性不需要修改的时候我们只需要写get函数，简写成：

    <script>
        new Vue({
            el:"#root1",
            data:{
                first:"zhang",
                second:"san",
            },
            computed:{
                fun(){
                    return this.first+'-'+this.second
                }
            }
        })
    </script>

---

当我们还要写set函数的时候

<div id="root1">
        姓<input type="text" v-model="first"><br>
        名<input type="text" v-model="second"><br>
        <span>{{fun}}</span>
    </div>

    <script>
        new Vue({
            el:"#root1",
            data:{
                first:"zhang",
                second:"san",
            },
            computed:{
                fun:{
                    get(){
                        return this.first+'-'+this.second
                    },
                    set(value){
                        let arr=value.split('-')
                        this.first=arr[0]
                        this.second=arr[1]
                    }
                }
            }
        })
    </script>

get函数：

当有人读取我们的计算属性的时候我们会去调用我们get函数，然后返回值作为计算属性的值。

get函数的调用时机

1.初次读取计算属性的时候
2.依赖的属性发生改变的时候

其余时候将会产生一个缓存，因为这个缓存的存在我们能减少不少vue的负担（复用）

set函数

当计算属性要被修改的时候，我们就必须要写set函数去响应