Vue3（监视器watch）

最新推荐文章于 2024-03-29 09:18:52 发布
最新推荐文章于 2024-03-29 09:18:52 发布
阅读量1k 收藏
点赞数
分类专栏： 【VUE.js】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chehec2010/article/details/119765042
版权

监视器(watch)是用来监视数据的变化,对数据进行监控定义监视器的俩种方式:

第一种：
            再Vue实例内部通过watch选项
            Vue.createApp({
                watch:{
                    变量:function(newValue,oldValue){},//监控方法
                    变量:{
                        handler:function(newValue,oldValue){},监控方法
                        deep:true,//开启深度监视
                        immediate:true//开启初始化触发
                    }
                }
            })
第二种：
通过Vue实例的$watch()方法
 var unwatch = vm.$watch(变量,监控方法,[options]);//返回一个取消监视函数

具体操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{name}}</p>
			<input type="text" v-model="name"/>
			
			<p>{{ user.password }}</p>
			<input type="text" v-model="user.password">
		</div>
		<script>
			const vm=Vue.createApp({
				data(){
					return{
						name:'htt',
						user:{
							id:1001,
							username:admin,
							password:'123'
						}
					}
				},
				//方式一：通过watch选填
				watch:{
					name:function(newValue,oldValue){
						console.log('name被修改，原值：${oldValue},新值:${newValue}')
					},
					// //当user的passord变化的时候，可以监视出来
					// user:{
					// 	handler:function(){
							
					// 	},
					// 	deep:true,//开启深度监视，当对象中的属性发生变化时也会监视
					// 	immediate:true //立即触发
					// }
					'user.password':function(newValue,oldValue){
						console.log('user.password被修改，原值:${oldValue},新值:${newValue}')
					}
				}
				
			}).mount("#app")
			
			// //方式2监视普通属性和对象，但是对对象的某个属性无法监视
			let unwatch=vm.$watch('user',function(newValue){
				console.log('user被修改',newValue)
				//取消监视
				if(newValue.password==='000000'){
					unwatch()//回调函数，取消监视
				}
			},
			{
				deep:true,
				immediate:true
			})
			
			
			// 监视器(watch)是用来监视数据的变化,对数据进行监控定义监视器的俩种方式:
			// 再Vue实例内部通过watch选项
			// Vue.createApp({
			// 	watch:{
			// 		变量:function(newValue,oldValue){},//监控方法
			// 		变量:{
			// 			handler:function(newValue,oldValue){},监控方法
			// 			deep:true,//开启深度监视
			// 			immediate:true//开启初始化触发
			// 		}
			// 	}
			// })
			
			// 通过Vue实例的$watch()方法
			// var unwatch = vm.$watch(变量,监控方法,[options]);//返回一个取消监视函数
			
		</script>
	</body>
</html>

 

月疯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 watch 监听器
且听风吟的博客
04-19 898
watch函数
Vue.js watch监视属性知识点总结
01-19
这个属性用来监视某个数据的变化，并触发相应的回调函数执行 ...var vm = new Vue({ el:'#app', data: { name: '郭靖' }, watch: { name(newVal,oldVal){ console.log('name的值发生了变化') co
Vue 监听（watch handler）
梦之归途的博客
03-09 2172
immediate：true立即执行handle方法（首次加载、刷新、数据改变）都会执行，缺点监听不到对象属性中发生的改变。缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。handle：watch中需要具体执行的方法。
vue3中watch详解
最新发布
Br不二
03-29 587
在 Vue 3 中，`watch` 是一个用于观察和响应 Vue 组件中响应式数据变化的选项或函数。当被观察的数据发生变化时，`watch` 可以执行一些副作用或回调操作，比如发送请求、更新 DOM 之外的状态或执行其他逻辑
vue3---watch侦听器总结太到位了！
qq_61950936的博客
08-17 1517
vue3---watch侦听器总结太到位了！watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。✨个人笔记博客✨星月前端博客✨原创不易，还希望各位大佬支持一下✏️评论，你的意见是我进步的财富！......
【Vue3中watch属性详解】
小田是个程序员的博客欢迎你的到来呀~
04-25 2万+
当被监视的属性变化时，回调函数自动调用，进行相关操作，所谓监视属性，就是监测指定的属性是否发生变化，如果发生了，则进行一系列操作，如果没发生变化，则监视属性也不会被触发。
Vue3中watch的用法
ct5211314的博客
04-03 1万+
watch函数用于侦听某个值的变化，当该值发生改变后，触发对应的处理逻辑。
Vue之监视属性（watch）
浩泽学编程的博客
07-09 639
监视属性当被监视的属性变化时，回调函数自动调用，进行相关操作监视的属性必须存在，才能进行监视！监视的两种写法：（1） Vue实例化对象内watch配置（2）通过Vue实例（假设是vm）vm.$watch监视以上就是监视属性。
Vue的watch和computed方法的使用及区别介绍
10-18
`watch` 是Vue中用于监听数据变化的工具，它可以执行自定义的函数当监视的数据发生变化时。在提供的示例代码中，我们创建了一个Vue实例，并在 `watch` 对象中定义了一个名为 `firstname` 的属性，这样每当 `...
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
10-17
- `watch`：用于监听数据变化，可以设置深度监视或自定义回调。 Vue提供了过渡动画机制，通过CSS的`transition`和`animation`实现，配合`<transition>`标签，可以控制元素的进入和离开效果。 Vue的生命周期包括从...
基于vue组件实现猜数字游戏
08-28
在实现该游戏时，我们使用了Vue.js的模板语法，使用`template`属性来定义组件的模板，使用`v-model`指令来实现输入框的双向绑定，使用`watch`函数来监视输入框的变化，并使用`beforeMount`生命周期钩子函数来生成...
vue基础知识学习文档
03-28
监视属性用于监视数据的变化，例如 `watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal); } }`。 五、事件 事件是用户与页面交互的基础，例如 `v-on:click="handleClick"`。 六...
【vue3】watch的用法，watch、watchEffect、computed区别
qq_45406325的博客
06-27 1万+
③computed，初始化时就会调用一次，参数为依赖项，依赖项可以是get函数返回计算之后的值（必须），也可以是带有 get 和 set 函数的对象，引用两次，但只会执行最近一次；①watch，在vue3中以组合api方式使用，3个参数（依赖项，回调，deep），依赖项必填，当依赖项更改时会执行回调，；①watch，可获取先前值和当前值，监听范围广可监听data之外的响应对象，可监听一个，也可以多个组合监听，②watchEffect，不能获取先前值，但支持异步和取消异步。），不需要传依赖项，自动收集依赖；
vue--监视器（watch）
BlackOrange的博客
12-08 1458
vue内容—监视器 监听分为深度监听和浅监听 所需要的代码： <script> new Vue({ el: "#app", data() { return { msg: "66666", stus: [{ name: "jack" }], }; }, </script> 浅监听： 1.在这里先说明浅监听，通过input的文本输入同步
Vue全家桶:vue2+vue3全部搞懂：第五篇，Vue的watch监视器
m0_73991249的博客
03-01 693
这一专栏知识将一次性将vue、、vue3全部讲明白。
Vue学习笔记（5. 计算属性，监视器(侦听器)）
m0_65939803的博客
04-13 449
vue 计算属性，监听器
VUE3的watch监听使用
热门推荐
moxunjinmu的博客
03-02 4万+
VUE3的watch监听使用watch介绍watch监听的不同情况1 监听单个refimpl数据2 监听多个refimpl数据3 监听proxy数据4 监听proxy数据的某个属性5 监听proxy数据的某些属性总结 watch介绍 vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参 watch(监听的数据，副作用函数，配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})
VUE3 中的 Watch 详解
lgdaren的博客
06-28 1419
watch vue3 这种情况，只有当 demo 的子属性发生变更时才会触发 watch 方法。孙属性，曾孙属性… 发生变更都不会触发 watch 方法。也就是说，当你修改 demo.soulmate.name 或者 demo.soulmate.nickName 时是不会触发 watch 方法的。...
vue3 - vue3中的watch监听讲解
qq_43886365的博客
11-14 2772
vue3中的watch监听讲解
vue监视器watch
08-10
Vue的监视器（watcher）是一个用于监听数据变化并执行相应操作的功能。通过监视器，可以在数据变化时触发特定的逻辑。 在Vue中，可以通过以下方式使用监视器： 1. 监视一个具体的数据属性： ```javascript // 在Vue实例的选项中定义一个`watch`属性 new Vue({ data: { message: 'Hello, Vue!' }, watch: { message: function(newVal, oldVal) { // 当`message`属性发生变化时执行逻辑 console.log('message属性的值从', oldVal, '变为', newVal); } } }); ``` 2. 监视一个计算属性： ```javascript new Vue({ data: { firstName: 'John', lastName: 'Doe' }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } }, watch: { fullName: function(newVal, oldVal) { // 当`fullName`计算属性的值发生变化时执行逻辑 console.log('fullName的值从', oldVal, '变为', newVal); } } }); ``` 3. 深度监视一个对象： ```javascript new Vue({ data: { user: { name: 'John', age: 30 } }, watch: { user: { deep: true, handler: function(newVal, oldVal) { // 当`user`对象或其任何子属性发生变化时执行逻辑 console.log('user对象发生了变化'); } } } }); ``` 以上是使用Vue的监视器的基本示例，你可以根据具体需求在监视器中编写相应的逻辑。希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值