Vue中watch和computed的使用演示

最新推荐文章于 2024-05-13 17:58:23 发布

行动是最好的承诺

最新推荐文章于 2024-05-13 17:58:23 发布

阅读量1.7k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u010505805/article/details/79039330

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

watch的使用

:使用watch 监听firstName的变化

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue1026.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="firstName">
		<input type="text" v-model="lastName">
		{{fullName}}
	</div>
</body>
<script>
new Vue({
	el :'#app',
	data:{
		firstName :'itcast',
		lastName:'heima',
		fullName :'itcast.heima'
	},
	watch:{
		'firstName':function(newval,oldval){
			// console.log(newval,oldval);
			this.fullName = this.firstName + this.lastName;
		},
		'lastName':function(newval,oldval){
			// console.log(newval,oldval);
			this.fullName = this.firstName + this.lastName;
		}
	}
});
</script>
</html>

watch监听路由route的变化

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue221.js"></script>
	<script src="vue-router231.js"></script>
</head>
<body>
	<div id="app">
		<router-link to="/login">登录</router-link>
		<router-link to="/register/itcast">注册</router-link>

		<router-view></router-view>
	</div>
</body>
<script>
// 1.0 准备组件
var App = Vue.extend({});

var login = Vue.extend({
	template:'<div><h1>登录</h1></div>'
});

var register = Vue.extend({
	template:'<div><h1>注册{{name}}</h1></div>',
	data:function(){
		return {
			name:''
		}
	},
	created:function(){
		this.name = this.$route.params.name1;
	}
});

// 2.0 实例化路由规则对象
var router = new VueRouter({
	routes:[
		{path:'/',redirect:'/login'},
		{path:'/login',component:login},
		{path:'/register/:name1',component:register}
	]
});

// 3.0 开启路由对象
new Vue({
	el :'#app',
	router : router, //开启路由对象
	watch:{
		'$route':function(newroute,oldroute){
			// console.log(newroute,oldroute);
			// 将来就可以在这个函数中获取到当前的路由规则字符串是谁了
			// 那么就可以针对一些特定的页面做一些特定的处理
		}
	}
});

</script>
</html>

computed的使用:

特点:1.计算属性会依赖于它使用中的data的属性,只要属性发生变化,他就将发生变化

2.如果他所依赖的属性值没有发生改变,那么属性的值就是从缓存中取得,而不是重新编译,那么性能会更高,所以尽量使用computed代替watch

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue1026.js"></script>	
</head>
<body>
	<div id="app">
	<input type="text" v-model="firstName">
	<input type="text" v-model="lastName">


	{{fullName}}
	</div>
	
</body>
<script>
new Vue({
	el:'#app',
	data:{
		firstName:'heima',
		lastName:'itcast'
	},
	computed:{
		fullName:function(){
			return this.firstName + this.lastName;
		}
	}
});
</script>
</html>

行动是最好的承诺

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue中watch和computed的使用演示

watch的使用:使用watch 监听firstName的变化 Document {{fullName}} new Vue({ el :'#app', data:{ firstName :'itcast', lastName:'heima', fullName :'itcast.heima' }, watch:{ '
复制链接

扫一扫

专栏目录