计算属性

一、差值语法实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>姓名案例_插值语法实现</title>
 </head>
<body>
    <div id="root">
        姓:<input type=text v-model="firstName">
        名:<input type=text v-model="lastName">
        全名:<span>{{firstName}}-{{lastName}}</span>
   </div>

    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        const a  = new Vue({
            el:'#root',
            data:{
                firstName:'李',
                lastName:'斌'
            },
            methods:{
                fullName(){
                    return this.firstName+'-'+this.lastName
                }
            }
        })
    </script>
</body>
</html>

二、method实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>method实现</title>
 </head>
<body>
    <div id="root">
        姓:<input type=text v-model="firstName">
        名:<input type=text v-model="lastName">
        全名:<span>{{fullName()}}</span>
   </div>

    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        const a  = new Vue({
            el:'#root',
            data:{
                firstName:'李',
                lastName:'斌'
            },
            methods:{
                fullName(){
                    return this.firstName+'-'+this.lastName
                }
            }
        })
    </script>
</body>
</html>

三、compulted实现

1.定义：要用的属性不存在，需要通过已有属性计算得来(vm中的属性,不能是变量),vm对象中的不存在当前属性。

2.原理：底层借助了Objcet.defineproperty()方法提供的getter和setter

3.get函数什么时候执行？

a初次读取时会执行一次  
b当依赖的数据发生改变时会被再次调用

4优势：与methods实现相比，内部有缓存机制（复用）,初次调用get方法会做有缓存,下次调用直接使用缓存, 如果get方法中的使用的属性值发生变化,会再次调用。

5备注

a计算属性最终会出现在vm上，直接读取使用即可,不需要有get() 
b如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的属性发生改变  
c如果计算属性确定不考虑修改，可以使用计算属性的简写形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>姓名案例-compited</title>
 </head>
<body>
    <div id="root">
        姓:<input type=text v-model="firstName">
        名:<input type=text v-model="lastName">
        <!-- 需要的属性不存在,需要通过已有的属性计算得到 -->
        全名:<span>{{fullName}}</span>
   </div>

    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        const vm  = new Vue({
            el:'#root',
            // data中的是属性
            data:{
                firstName:'pad',
                lastName:'嘻嘻哈哈哈'
            },
            // computed中的是计算属性
            computed:{
                fullName:{
                    // 有人读取fullName时,get会被调用,返回值作为FullName的值。
                    get(){
                        console.log('get被调用了')
                        return this.firstName+'-'+this.lastName
                    },
                    set(value){
                        // this指的是vm对象,直接获取属性是获取不到的。
                        //fullName被修改是会调用改方法.
                        const str=  value.split('-');
                        this.firstName = str[0];
                        this.lastName = str[1];
                    }
                },
                //简写方式:只存在get的情况下,简写
                funcName:function(){
                    console.log('get被调用了')
                        return this.firstName+'-'+this.lastName
                }
            }
        })
    </script>
</body>
</html>

08_计算属性

计算属性

一、差值语法实现

二、method实现

三、compulted实现