关于前端:vue2x版本中computed和watch的使用入门详解computed篇

前言

在基于vue框架的前端我的项目开发过程中，只有波及到略微简单一点的业务，咱们都会用到computed计算属性这个钩子函数，能够用于一些状态的联合解决和缓存的操作。

根底应用

在computed中，申明一个函数，并须要提供一个返回值，用于在页面展现或者联合其余办法进行解决

联合state状态应用

通过changeName返回一段依赖于name的字符串

<li>computed根本应用</li>
<li>name值：{{ name }}</li>
<li>{{ changeName }}</li>

data() {
        return {
            name: "zhangsan",
        };
    },

computed: {
    changeName: function () {
        return `一段依赖于name：${this.name}的文字`;
    },
},

应用其余组件状态

被动触发computed办法，比照不依赖于其余状态下的区别，通过点击事件，被动触发一些操作

<li>{{ isCache }}</li>
<li>{{ cacheTip }}</li>
<li>{{ changeCache }}</li>
<li><button @click="handleChange">批改文字</button></li>

data() {
    return {
        cacheTip: "cacheTip原始值",
    };
},

computed: {
    isCache: function () {
        return `不依赖于任何属性值的一段文字`;
    },
    changeCache: function () {
        return `依赖于cacheTip，${this.cacheTip}`;
    },
},

methods: {
    handleChange() {
        this.cacheTip = "cacheTip状态被批改";
    },
},

当咱们点击批改状态时，能够看到，cacheTip被批改只会，依赖于cacheTip的changeCache也会产生扭转
isCache因为不和其余状态关联，所以还是放弃原来的值不变

getter VS setter

下面的cacheTip，或者isCache，在computed的通用办法中，默认都是应用了getter办法去获取解决过的值

能够写成

isCache: {
    setter:function () {
        return `不依赖于任何属性值的一段文字`;
    }
}

通过getter和setter，能够进一步对须要解决的状态进行解决

<li>{{ firstName }}</li>
<li>{{ lastName }}</li>
<li>{{ setterGetter }}</li>
<li><button @click="handleChangeFirst">批改文字</button></li>

data() {
    return {
        firstName: "lewyon001",
        lastName: "布欧001",
    };
},

computed: {
    setterGetter: {
        // getter
        get: function (newValue) {
            console.log("newValue", newValue);
            return this.firstName + " " + this.lastName;
        },
        // setter
        set: function (newValue) {
            console.log("newValue", newValue);
            this.firstName = `${newValue.firstName}`;
            this.lastName = `${newValue.lastName}`;
        },
    },
}

methods: {
    handleChangeFirst() {
        this.setterGetter = { firstName: "lewyon", lastName: "布欧" };
    },
},

get属性能够获取最原始的依赖值并解决，
set办法，能够获取批改后的依赖值，在批改之后一并展现到页面上或者进行其余业务须要的解决

computed办法的根底，包含进阶的操作，以及setter和getter办法如上

应用倡议

作为常常应用的办法，

• computed能够作为依赖于其余状态的缓存进行应用，包含一些不常常更新的内容，缩小开销
• 简略的字符串模板联合其余状态
• 还有其余的场景在开发中，咱们都能够进行应用，联合watch等。

对于vue和watch的区别，以及watch的应用详解，在集体的博客中继续更新中。以上例子的源码中已开源，后续对于vue的笔记也会持续更新

• 码云 https://gitee.com/lewyon/vue-note

• githup https://github.com/akari16/vue-note

文章集体博客地址：vue2.x版本中computed和watch的应用入门详解-computed篇

创作不易，转载请注明出处和作者。