计算属性、方法、侦听器

最新推荐文章于 2023-06-08 01:10:39 发布

Halo丶小时光

最新推荐文章于 2023-06-08 01:10:39 发布

阅读量94

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44324366/article/details/102530275

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在computed、methods、watch方法中，对于优缺点
computed是存在缓存机制
当对于computed，在其他变量进行变化时候，触发computed，只有computed相关变量进行变化的时候才会触发

<!DOCTYPE html>
<html>
<head>
	<title>计算属性、方法、侦听器</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">{{fullName}}</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data(){
				return{
					firstName:"DELL",
					lastName:"Lee",
					//fullName:"DELL lEE"
					age:20


				}
			},
			/*methods:{
				fullName:function(){
					return this.firstName + "" +this.lastName
				}
			},*/
			computed:{
				fullName:function(){
					console.log("变化一次")
					return this.firstName + "" +this.lastName
				}
			}
			/*watch:{
				firstName:function(){
					console.log("变化一次")
					this.fullName = this.firstName + "" + this.lastName
				},		
				lastName:function(){
					return this.fullName = this.firstName + ""  + this.lastName
				}
			}*/
					
		})	

	</script>
</body>
</html>

在age变化的时候，并不会触发computed,只有当firstName和lastName变化的时候才会触发
methods在页面渲染的时候就会重新触发
依旧是上面的代码，当methods方法进行渲染，改变age，此时页面会触发methods方法
watch侦听器也是存在缓存机制，只有在侦听的元素进行变化的时候，这个函数才会被触发。
当age改变得时候，并不会触发watch侦听器，当你改变firstName得时候，会触发一次watch函数里面得firstName方法，从而得到变化一次得响应

Halo丶小时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性、方法、侦听器

在computed、methods、watch方法中，对于优缺点computed是存在缓存机制当对于computed，在其他变量进行变化时候，触发computed，只有computed相关变量进行变化的时候才会触发<!DOCTYPE html><html><head> <title>计算属性、方法、侦听器</title> &...
复制链接

扫一扫

专栏目录