computed && methods && watch

最新推荐文章于 2024-04-18 11:14:44 发布

yesyoucan_

最新推荐文章于 2024-04-18 11:14:44 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： computed methods watch

本文链接：https://blog.youkuaiyun.com/yesyoucan_/article/details/80474416

24 篇文章

订阅专栏

methods一般用在事件绑定的方法中，每次函数调用，函数都要被重新运行一遍。

computed计算属性是基于依赖缓存的，计算属性只有当所依赖的条件发生改变时才会执行。

<body>

	<div id = "app"> 

		{{msg}}

		<br>

		{{msg}}

	</div>

</body>

<script>

	var app = new Vue({

		el: "#app",

		data:{

			num:1

},

	computed:{

		msg:function(){

			alert("hello");		// 两次函数调用，弹出框只会弹出一次返回的数据也是完全相同的

			return this.num+Math.random(); 		

}

}

});

</script>

methods:

<body>

	<div id = "app"> 

		{{msg}}

		<br>

		{{msg}}

	</div>

</body>

<script>

	var app = new Vue({

		el: "#app",

		data:{

			num:1

},

	methods:{

		msg:function(){

			alert("hello");		//弹出框弹出两次，返回的两个内容结果完全不同

			return this.num+Math.random();

}

}

});

</script>

  window.onload=function(){

            var vm=new Vue({

                el:'#box',

                data:{

                    a:{name:'strive',age:16},

b:2

}

});

            vm.$watch('a',function(){

                alert('a发生变化了');

                vm.b=this.a.name;

            },{deep:true});       //要对json数据类型的数据进行监听，要添加，{deep:true},对于数组不用添加

            document.onclick=function(){

                vm.a.name='aaa';      //文档加载后点击任意一处，修改a的值。a的值改变后vm.$watch函数被触发。

};

};