Vue中侦听器watch的基本使用

 侦听实际上就是侦听组件中数据属性的变化。一般来说,侦听划分为简单侦听和深度侦听。对基本数据类型的侦听我们只需要使用简单侦听即可,而对复杂数据类型诸如对象数组的侦听,我们需要使用深度侦听。侦听时我们使用watch作为组件定义时的一个option。
 1.基本数据类型之简单侦听基本用法

	watch:{
     
    	msg:function(newV,oldV) {
     
    	    // 相关操作
    	}
    }

 2.复杂数据类型之深度侦听用法基本用法

	watch:{
     
    	arr:{
     
           deep:true,
           handler:function(newV,oldV) {
     
    	      // 相关操作
    	   }
        }
    }

  3.侦听器使用之详细代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>监听器的使用</title>
	</head>

	<body>
		<div id='app'></div>
		<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
		<script type='text/javascript'>
			var vm = new Vue({
     
				el:'#app',
				data:function() {
     
					return {
     
						msg1:'Come On',    //字符串类型在input中使用
						msg2:[{
     name:'张三'}]    //对象类型,点击按钮后进行更改
					}
				},

				// 下面的input需要使用双向数据绑定v-model这样才能真正的修改msg1,所以才能监听;对于msg2也是因为实实在在的改变这一数据属性,所以才得以监听到
				template:`
					

我msg2:{ {msg2}}

`
, methods:{ modifyMsg2: function(e) { this.msg2[0].name = '李四' } }, watch:{ // 针对msg1修改后的监听是简单监听 msg1:function(newV,oldV) { console.log('我监听了msg1这一简单数据类型的最新值为:'+newV) }, // 针对msg2这类对象的监听是复杂监听 msg2:{ deep: true, handler:function(newV,oldV) { console.log('通过侦听得到msg2这一复杂数据类型的最新值:'+newV[0].name) } } } }) </script> </body> </html>

结果:
数据修改之前----
Vue中侦听器watch的基本使用_第1张图片
修改input中的内容后----
Vue中侦听器watch的基本使用_第2张图片
修改msg2这一对象数组(因为modifyMsg2方法中修改的是msg2数组中对象中的一个具体的值,为了让这一具体值变化的也能被侦听,所以必须对msg2使用深度侦听)----
Vue中侦听器watch的基本使用_第3张图片

你可能感兴趣的:(vue,vue,javascript,js,vue.js)