vue计算属性的getter和setter以及set方法的使用

示例：使用计算属性

<div id="app">{{fullName}}</div>
<script>
    var vm = new Vue({
        el : "#app",
        data: {
            firstName: "Denny",
            lastName: "Zhang"
        },
        computed:{
            fullName:function () {
                return this.firstName + " " + this.lastName
            }
        }
    })
</script>

先去data中找fullName，没有找到会到计算属性中去找fullName，通过计算得出fullName 为 Denny Zhang

computed的特性：当他依赖的值发生变化的时候会重新计算其属性

计算属性支持get和set方法，如下：

<div id="app">{{fullName}}</div>
<script>
    var vm = new Vue({
        el : "#app",
        data: {
            firstName: "Denny",
            lastName: "Zhang"
        },
        computed:{
            fullName:{
                get:function () {
                    return this.firstName + " " + this.lastName
                },
                set:function (value) {
                    var arr = value.split(" ");
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                    console.log(value)
                }
            }
        }
    })

示例：显示一个对象的数据

<div id="app">
    <div v-for="(item,key,index) of userInfo">
        {{item}} --- {{key}} --- {{index}}
    </div>
</div>
<script>
    var vm = new Vue({
        el : "#app",
        data :{
            userInfo:{
                name : "Denny",
                age :28,
                gender : "male",
                salary : "secret"
            }
        }
    })

向对象中添加数据的两种方法

1.给对象重新赋值

直接给对象重新赋值

2.使用vue的set方法

使用Vue的set方法

Vue的set方法既是Vue的全局方法也是Vue的实例方法

image.png

set方法用户数组操作

操作数组我们之前可以用数组的变异方法和数组的引用，此次使用set方法直接将某个下标的数据修改成自己想要的数据页面就跟着变化

image.png