Vue实例方法 $watch

最新推荐文章于 2024-07-30 16:34:14 发布

初心鸿鹄

最新推荐文章于 2024-07-30 16:34:14 发布

阅读量1.6k

点赞数

分类专栏： Vue-51CTO 文章标签： Vue 监视数据

本文链接：https://blog.csdn.net/codesWay/article/details/79386912

版权

Vue的$watch方法允许开发者监视数据变化并执行回调。当数据变动时，回调函数接收newValue和oldValue参数。通过option对象的deep属性可实现深度监视，尤其在处理对象数据时。该方法在监控基本数据和引用类型数据时略有不同。

摘要由CSDN通过智能技术生成

可能会经常遇到这样的问题，怎么监视数据的变化，当数据发生变化的时候，要做一些事情该如何实现，其实不用担心，Vue有一个方法来解决这个问题：

vm.$watch(data,callback,[option]):监视数据的变化，当数据发生变化的时候，执行callback函数，这里的callback函数可以接受两个参数newValue和oldValue作为改变后（前）数据的值，还有option选项，其实就是一个对象{deep:true(false)}，用来决定是否深度监视（当监视数据对象的时候用到）。

当然监视的数据可以分为基本数据和引用类型的数据（对象数据），对于两者用法大体上一样，但是还是有些区别：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Vue-$watch</title>
	<style type="text/css" media="screen">
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body>
	<div id="container" v-cloak>
		<h3>{
  {user.name}}</h3>