从业务开发中重新理解Computed和Watch
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。当你想要在模板中的多处处理时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时。然而，通常更好的做法是使用计算属性而不是命令式的
watch回调。
引言
上面两段话摘自Vue.js官方文档。
在参加面试或技术文章中我们经常会听到或看到关于的Vue计算属性与watch监听属性的话题，例如：
- Compunted与Watch的区别
- Compunted与watch的实现原理
等一系列的问题，而我是从业务开发中开始又重新开始重新认识它们。
实际场景
场景一
最初的代码，为不同数据配置不同的表头，但是每次对表格进行操作获取数据的时候都会去重新计算设置表头。
<template>
<Table :source-data="data" :columns="columns" />
</template>
<script>
export default {
data() {
return {
data: {}, // 表数据
columns: [], // 表头
};
},
methods: {
async getTableSourceData() {
// 获取表格数据
this.setColumns(data.xxx);
},
setColumns(xxx) {
// tableName 为外部配置的各种表头
// xxx为表名
this.columns = tableName["xxx"];
},
},
};
</script>
复制代码变更后，使用computed，入参通过$attrs或者this拿到，这样也是利用计算属性的缓存机制，减少表头计算成本，表里的数据时常会变化，但表头却不一定。
<template>
<Table :source-data="data" :columns="setColumns" />
</template>
<script>
export default {
data() {
return {
data: {}, // 表数据
columns: [], // 表头
};
},
computed: {
setColumns($attrs) {
// tableName 为外部配置的各种表头
// xxx为表名
this.columns = tableName["$attrs.data.xxx"];
},
},
methods: {
async getTableSourceData() {
// 获取表格数据
},
},
};
</script>
复制代码场景二
这次我们拿到了所有水果和所有水果的数量，这就需要我们去做一次匹配,这正好是一个计算的场景，
但这时我们就会发现这是一个计算属性传参的方式，如果我们使用这种的方式的话，就会直接报错getNumber is not a function,所以它是不希望我们这么去做的
虽然使用闭包的方式，可以做到传参的效果，但是却失去了它可以缓存这么一个重要的特性，那跟使用methods则没有什么区别。
<template>
<div v-for="item in fruitList" :key="item.id" :value="item.id">
{{ item.fruitName }}
<span>{{ `数量：${getNumber("item.id")}` }}</span>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
getNumber() {
// 匹配水果和水果数量
},
},
};
</script>
复制代码场景三
当我们需要不同操作来请求不同表格数据watch就排上了用场，因为它可以做到监听，听起来像是废话，因为从它的名字我们就可以知道，它是用来watch的。
因为最近在关注如何构建一个可维护的代码，这里又让我更深刻的理解了好的命名对于代码的意义，扯远了，哈哈。
通过监听我们的操作，当它改变的时候就回去请求数据以及一系列我们想做的事情。从这里也就看到了体现了它与computed的区别。也是希望以后面试官不要在问这个问题了，它俩有什么异同，一个是计算，一个是监听，就这么简单，并没什么异同，它们本就是两个东西。
<template>
<Table :source-data="loadData" :columns="columns" />
</template>
<script>
export default {
data() {
return {
operate: "", // 操作方式
data: {}, // 表数据
columns: [], // 表头
};
},
watch: {
operate(newVal, oldVal) {
this.loadData();
},
},
methods: {
async loadData() {
// 获取表格数据
},
},
};
</script>
复制代码总结
通过这三个我平时使用Vue进行业务开发过程中比较常见的场景，拿出来和大家做一个分享，聊一聊关于computed和watch的那点事，后续继续分享computed与watch的源码
- computed
- 多个数据进行计算用
- 能缓存结果
- watch
- 根据一个数据的变化来用
- 支持同步和异步操作
- 不能用箭头函数
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。