文享日志

Vue计算属性

Vue.js JavaScript

发表于2018年05月27日10:47:15

0条评论 149次阅读

        Vue计算属性用来处理一些复杂的业务逻辑,避免在模板内写入过多逻辑而显得难以维护。

        Vue计算属性结果可缓存,调用一次即将结果进行缓存,除非所依赖的数据进行变化,否则缓存值不变。


字符串翻转实例:


<p v-once>初始值:{{name}}p>

<p v-once>翻转值:{{name.split('').reverse().join('')}}p>

<p>改变值:{{name}}p>


<p>计算属性翻转:{{ireverse}}p>


<button v-on:click="name = name.split('').reverse().join('')">翻转button>

<button @click="reverse()">翻转button>


new Vue({
    el: "#app",
    data: {
        name: "Han Qian Jin",
        firstName: "Han",
        lastName: "Qian Jin"
    },
    methods: {
        reverse() {
            this.name = this.name.split('').reverse().join('');
        },
        deal() {
            //调用oreverse计算属性的set
            this.oreverse = "Tom Jack";
        }
    },
    computed: {
        //这种写法,默认get方法
        ireverse() {
            return this.name.split('').reverse().join('');
        },
        oreverse: {
        //一般只用到get
            get() {
                return this.firstName + " " + this.lastName;
            },
            set(str) {
                let nameary = str.split(' ');
                this.firstName = nameary[0];
                this.lastName = nameary[1];
        }
    }
}
})


可以看到,这里调用计算属性就像是调用data中的数据一样。

方法翻转,每次都要调用执行一遍代码,效率比使用计算属性低。


某计算属性中,有两个方法get与set

通常会用get,set看样子是用来劫持的。

当为计算属性设置值时,会调用set方法,进行set内部的逻辑处理。

👍 1  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广