12计算属性

计算属性

    计算属性:
        1.定义:要用的属性不存在,要通过已有属性计算得来。（已有属性：vue实例管理的）
        2.原理:底层借助了objcet.defineproperty方法提供的getter和setter。
		3.get函数什么时候执行?
            (1).初次读取时会执行一次。
            (2).当依赖的数据发生改变时会被再次调用。
        4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
		5.备注:
            1.计算属性最终会出现在vm上，直接读取使用即可。
            2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

实例

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.produtionTip=false;
        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三',
            },
            computed:{
                fullName:{
                    // get有什么作用? 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    // get什么时候调用? 1.初次读取fullName时。2.所依赖的数据发生变化时。
                    get(){
                        return this.firstName +"-"+this.lastName;       //此处的this是vm
                    },
                    //set什么时候调用? 当fullName被修改时。
                    set(value){
                        const arr = value.split('-');
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        });
    </script>
</body>

简写形式

只读不改时使用

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.produtionTip=false;
        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三',
            },
            computed:{
                fullName(){
                   return this.firstName +"-"+this.lastName; 
                }
        });
    </script>
</body>
posted @ 2022-09-06 16:05  Redskaber  阅读(46)  评论(0)    收藏  举报