vue笔记之watch、computed、methods的对比

1.computed：computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用；

	<div id="app">
		<!-- 1.我们要监听到文本框数据的改变，这样才能知道什么时候去拼接出一个fullname -->
		<!-- 2.如何监听到文本框的数据改变 -->
		<input type="text" v-model="firstname" name="">+
		<input type="text" v-model="lastname" name="">=
		<input type="text" v-model="fullname" name="">
		<p>{{fullname}}</p>
		<p>{{fullname}}</p>
		<p>{{fullname}}</p>
	</div>
	
	<script>
		
		var vm = new Vue ({
			el:'#app',
			data:{
				firstname:'',
				lastname:'',
			},
			methods:{
				
			},
			computed:{//在computed中可以定义一些属性，这些属性叫做计算属性，计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用，当作方法去调用
				//注意：计算属性在引用的时候一定不要加()去调用，直接把它当作普通属性去使用就好
				//注意：只要计算属性，这个function内部，所用到的任何data中的数据发送了变化，就会立即重新计算这个计算属性的值
				//3.计算属性的求值结果会被缓存起来，方便下一次直接使用，如果计算属性的方法中，所得来的任何数据都没有发生过变化则不会重新对计算属性求值。
				'fullname': function () {
					console.log('ok')
					return this.firstname + '-' + this.lastname
				}
			}
			
		});
		
	</script>

2.methods：methods方法表示一个具体的操作，主要书写业务逻辑

	<div id="app">
		<!-- 1.我们要监听到文本框数据的改变，这样才能知道什么时候去拼接出一个fullname -->
		<!-- 2.如何监听到文本框的数据改变 -->
		<input type="text" v-model="firstname" name="" @keyup="getFullname">+
		<input type="text" v-model="lastname" name="" @keyup="getFullname">=
		<input type="text" v-model="fullname" name="">
	</div>
	
	<script>
		
		var vm = new Vue ({
			el:'#app',
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			methods:{
				getFullname () {
					this.fullname = this.firstname + '-' + this.lastname;
				}
			}
			
		});
		
	</script>

3.watch：watch一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体

<div id="app">
		<!-- 1.我们要监听到文本框数据的改变，这样才能知道什么时候去拼接出一个fullname -->
		<!-- 2.如何监听到文本框的数据改变 -->
		<input type="text" v-model="firstname" name="">+
		<input type="text" v-model="lastname" name="">=
		<input type="text" v-model="fullname" name="">
	</div>
	
	<script>
		
		var vm = new Vue ({
			el:'#app',
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			methods:{
				
			},
			watch:{//使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数
				'firstname':function (newVal,oldVal) {
					this.fullname = newVal + "-" + this.lastname;

				},
				'lastname': function (newVal){
					this.fullname = this.firstname + "-" + newVal;
				}
			}
			
		});
		
	</script>

watch监听路由地址的改变

 <div id="app">
		<!-- <a href="#/login">登录</a>
		<a href="#/register">注册</a> -->
		<!-- router-link默认渲染为一个a标签 -->
		<router-link to="/login" tag="span">登录</router-link>
		<router-link to="/register">注册</router-link>
		<!-- 这是vue-router提供的元素，专门用来当作占位符的，将来路由规则匹配到的组件就会展示到router-view -->
		<transition mode="out-in">
			<router-view></router-view>
		</transition>
	</div>


	
	<script>
		var login = {
			template:"<h1>登录组件</h1>"
		}
		var register = {
			template:"<h1>注册组件</h1>"
		}
		//创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫做VueRouter
		//在new路由对象的时候，可以为构造函数，传递一个配置对象
		var routerObj = new VueRouter({
			//route //这个配置对象中的router表示路由匹配
			routes:[//路由匹配规则
				//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性；
				//属性1是path，表示监听哪个路由链接地址
				//属性2是component，表示如果路由是前面匹配到的path，则表示component属性对应的那个组件
				//component的属性值，必须是一个组件的模版对象，不能是组件的引用名称
				// {path:'/',component:login},
				{path:'/',redirect:'/login'},//这里的redirect和node中的redirect完全是两码事
				{path:'/login',component:login},
				{path:'/register',component:register}
			],
			//修改默认样式名router-link-active
			linkActiveClass:'active'
		})
		var vm = new Vue ({
			el:'#app',
			data:{
				
			},
			methods:{
				
			},
			router:routerObj,
			watch:{//使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数
				'$route.path': function (newVal,oldVal) {
					console.log(newVal+'---'+oldVal)
					if(newVal=='/login'){
						console.log("欢迎进入登录页面")
					}else if(newVal=='/register'){
						console.log('欢迎进入注册页面')
					}
				}
			},

			
		});
		
	</script>