vue2.x版本中computed和watch怎么使用

这篇文章主要介绍了vue2.x版本中computed和watch怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue2.x版本中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，具体参考 vue2.x版详解computed和watch的使用

• watch除了callback回调函数外，还有两个属性值为布尔值的属性，用于首次绑定immediate，以及对对象的深度监听deep

• 两者相同点就是可以通过方法参数获取新值，结合其他状态处理相关的业务

补充

在官方文档中，除了在组件中使用的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()

关于“vue2.x版本中computed和watch怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue2.x版本中computed和watch怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。