vue2.x版本中computed和watch的使用入门详解-关联和区别_在线工具

2022年5月1日08:08:23

前面两篇介绍了computed和watch的基本使用

两者的区别,继续通过代码实现的方式具体去了解

html

<li>最开始的value值:{{ name }}</li>
<li>computed计算后的值:{{ computedName }}</li>
<li>
	watch修改后的值:{{ watchName }}
	<input type="text" v-model="watchName" />
</li>
<li><button @click="handleNumber">修改名字</button></li>

JS

data() {
	return {
		name: "zhangsan",
		watchName: "张三",
	};
},
watch: {
	watchName(newVal, oldVal) {
		console.log("旧的值---->", newVal);
		console.log("新的值---->", oldVal);
		console.log("watch下所有的状态都会监听this.name---->", this.name);
		console.log(
			"watch下所有的状态都会监听this.computedName---->",
			this.computedName
		);
		this.watchName = newVal;
	},
},
computed: {
	computedName: function (currentThis) {
		console.log(
			"和计算属性无关的状态发生更改时,不会执行,只要依赖的状态发生更改,缓存才会更新",
			currentThis
		);
		return `依赖于name,:${this.name}`;
	},
},
methods: {
	handleNumber() {
		this.name = "lisi";
	},
},

区别

依赖值: computed依赖于所使用的状态,类似在data中声明的name,
而watch中监听的值不依赖于某个值,只要组件状态发生更改,监听的值就实时获取最新值,
computed的实现使用的是getter和setter获取值,属于同步操作。

使用方法:

  • computed最后需要进行return处理返回值,并且可以使用更深层次的getter和setter,具体参考computed篇
  • watch除了callback回调函数外,还有两个属性值为布尔值的属性,用于首次绑定immediate,以及对对象的深度监听deep
  • 两者相同点就是可以通过方法参数获取新值,结合其他状态处理相关的业务

**补充##

在官方文档中,除了在组件中使用的watch外,官方文档中,还有对于示例中watch的介绍

具体用法可以在官网中:

https://cn.vuejs.org/v2/api/#vm-watch

$watch基础使用--来自官方文档例子

官方文档提示:

注意:在变更 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})

// 函数
vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)


需要注意的是,如果使用vm.$watch,那么使用unwatch有助于我们取消对某个状态的监听,减少不必要的监听和交互开销

var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

结尾

花了三个篇幅去介绍watch和computed的使用方法,以及这两个钩子函数的区别,在实际的企业项目开发中,使用的场景和次数较多,所以尽量写的稍微详细一些,同时也将笔记的代码放在了开源仓库,希望对大家在开发vue2.x的项目中有所帮助

文章个人博客地址:vue2.x版本中computed和watch的使用入门详解-关联和区别

欢迎关注公众号:程序猿布欧,不定期更新一些前端入门文章

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

  • 作者:程序猿布欧
  • 原文链接:https://www.cnblogs.com/akari16/p/16053224.html
    更新时间:2022年5月1日08:08:23 ,共 1815 字。