侦听器watch及其和计算属性、methods方法的总结

目录

一、watch侦听器

二、侦听器的处理函数

解决深度监听新老值同源问题

三、侦听器的格式

 1. 方法格式的侦听器

  2.对象格式的侦听器

四、侦听器watch、计算属性、methods方法的总结

---

一、watch侦听器

     watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

     语法格式如下：

const vm = new Vue({
    el:'#app',
    data:{
        username: ''
    }，
    watch:{
        // 监听 username 值的变化
        //newVal 是变化后的新值,  oldVal 是变化之前的旧值
        uesrname(newVal, oldVal) {
            console.log(newVal, oldVal);        

        }
    }
})

监听数据变化，一般只监听一个变量或数组 

使用场景：watch(异步场景)，computed(数据联动) watch可以在所监听的数据后面直接加字符串形式的方法名

	
		
		
		
	
	
		

			
{{firstName}}
		
		
	

使用如下方法也可实现上图效果：

使用侦听器监听 firstName 数据里字符串形式的change 方法名

                watch:{

                    firstName:'change'

                },

                 methods:{

                    change(newVal, oldVal){

                        console.log(newVal);

                        console.log(oldVal);

                    }

                 }

二、侦听器的处理函数

handler方法就相当于普通侦听器触发的事件，从结果可以看到，组件初始化的时候，侦听器并没有handler方法 ，所以fullName是没有值的

当修改以上代码，加上immediate: true，immediate:true代表watch里面声明了之后会立马执行handler里面的函数。执行相应的逻辑。组件初始化的时候，侦听器会立马（immediate）触发handler方法

    
    
        
        
        
        
        
    
    
        

          

            
FullName: {{person.fullname}}
            
FirstName: 
          
        
        
    
    

immediate 的作用是：控制侦听器是否自动触发一次，默认值是 false

当在输入框中输入数据时， 可以发现fullName的值并没有随之改变 。这是因为vue无法检测到对象内部属性值的变化，比如person.firstname的变化；所以此时 需要用到vue的深度监听（deep）此时加上代码 deep: true可以发现 每次输入框数据变化 fullname随之改变，上面的可以发现handler监听的新值和老值是一样的 这是有vue2.0的坑 犹豫同源导致的 可以用computed来修改

解决深度监听新老值同源问题

	
		
		

	
	
		

             
FullName: {{person.fullname}}
             
FirstName: 
		
		
		
	

三、侦听器的格式

 1. 方法格式的侦听器

• 无法在刚进入页面的时候，自动触发
• 如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器

  2.对象格式的侦听器

• 可以通过immediate 选项，让侦听器自动触发
• 可以通过deep 选项，让侦听器深度监听对象中每个属性的变化

四、侦听器watch、计算属性、methods方法的总结

	
		
		
		
	
	
		

			
计算属性：computed
			{{fullName}}
			
方法：methods
			{{fullName2()}}
			
侦听器：watch
			{{watchFullName}}
			
年龄：age
			{{age}}
		
		
	

 初始化：

 修改firstName/lastName/两者都修改 

 修改computed中没计算的age

修改Vue实例外的对象

修改Vue实例外对象后在修改Vue实例内的对象

 

测试结论：

1. 使用computed计算了fullName属性，值为firstName+lastName。计算属性具有缓存功能，当firstName和lastName都不改变的时候，fullName不会重新计算，比如我们改变age的值，fullName的值是不需要重新计算的。
2. methods并没有缓存特性，比如我们改变age的值，fullName2()方法会被执行一遍。
3. 当一个功能可以用上面三个方法来实现的时候，明显使用computed更合适，代码简单也有缓存特性。
4. 计算属性范围在vue实例内，修改vue实例外部对象，不会重新计算渲染，但是如果先修改了vue实例外对象，在修改vue计算属性的对象，那么外部对象的值也会重新渲染。