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

36次阅读

共计 1941 个字符,预计需要花费 5 分钟才能阅读完成。

前言

在基于 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 篇

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

正文完
 0