侦听器的的基本使用

 1.通过watch的使用，我们可以获取改变的新的和老的值，从而去改变一些东西
 2.如果改变和方法及计算属性没有关系的比如age，只要age发生变化，methods就会执行
 3.如果改变实例外的对象，方法及计算属性还有监听器都不会发生改变，但是如果重新编译方法及计算属性还有监听器的某个值，实例外的对象也会跟着发生变化。
 4.如果添加了immediate 就会立刻监听   如果不加只能改变的时候才会监听
 5.也可以用函数的方式监听，格式是  监听的对象："函数名"，然后在方法中调用函数

代码如下:

            <div id="app">
			
				---方法---
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
				---计算属性---
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
				---监听器---
			<h2>{{firstName}}-{{lastName}}</h2>
			<h2>{{watchFullName}}</h2>
			
				---年龄---
			<h2>{{age}}</h2>
		</div>
		
		<script src="./vue.js"></script>
		<script type="text/javascript">
			var other = "this is other"
			const vm = new Vue({
				el:"#app",
				data(){
					return{
						firstName:"zhang",
						lastName :"san",
						watchFullName:"zhangsan",
						age:40
					}
				},
				methods: {    //方法
					getFullName() {
						console.log("调用了方法");
						return this.firstName+'-'+this.lastName+other
					},
					change(){
						return this.lastName = "111"
					}
				},
				computed:{	  //计算属性
					fullName(){
						console.log("调用了计算属性");
						return this.firstName+'-'+this.lastName+other
					}
				},
				
				watch:{		 //监视器
					firstName:{  
						handler:function(newval,oldval){
							console.log(newval);
							console.log(oldval);
						},
						immediate:true   //立即监听
					},
					
					//方式二 假如现在再监听lastName
					lastName:"change"
			
					
					
					
			    //方式三(不常用)
				// firstName(newval,oldval){
				// 	console.log(newval);
				// 	console.log(oldval);
				// }
				
				
			//  方式四(不常用)
			// 	vm.$watch("firstName",(newval,oldval)=>{
			// 		console.log(newval);
			// 		console.log(oldval);
			// 	})
			
				}
			})
      </script>