4.VUE实例对象中的computed(计算属性)利用methods生成属性：利用computed计算属性：原理:

利用methods生成属性：

<body>
    <div class="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        姓名：<span>{{fullName()}}</span>  // fullName()方法; (三种模板类型：{{1.data数据; 2.methods()方法 3.computed属性}})
    </div>
</body>
<script>
    new Vue({
        el:'.root',
        data: {
            firstName:'张',
            lastName:'三'
        },
        methods: {
            fullName() {
              return this.firstName + this.lastName
            }
        }
    })
</script>

利用computed计算属性：

原理: 底层借助了 object.defineproperty 方法提供的 getter 和 setter

<body>
    <div class="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        姓名：<span>{{fullName}}</span>  // fullName 属性
    </div>
</body>
<script>
    new Vue({
        el:'.root',
        data: {
            firstName:'张',
            lastName:'三'
        },
        computed: {
            fullName:{
              get(){
                return this.firstName + this.lastName  // this -> vm
              set(value){
                const arr = value.split()
                this.firstName = arr[0]
                this.lastName = arr[1]
              }
            }
        }
    })
</script>

get 当读取 fullName (属性)时，get 就会被调用，且返回值就作为 fullName 的值

get 什么时候调用?

初次读取 fulIName 时
所依赖的数据发生变化时

set 什么时候调用?

当 fullName 被修改时

简写形式：

当只考虑get不考虑修改时可以简写为 fullName:function( ){ }

<script>
    new Vue({
        el:'.root',
        data: {
            firstName:'张',
            lastName:'三'
        },
        computed: {
            fullName:function(){
              return this.firstName + this.lastName
            }  // get
// 或简化为：
            fullName(){
              return this.firstName + this.lastName
            }
        }
    })
</script>