Vue.js中computed、methods、watch的使用

最新推荐文章于 2024-04-29 14:18:06 发布

soosgo

最新推荐文章于 2024-04-29 14:18:06 发布

阅读量1.1k

点赞数

分类专栏： Vue Vue.JS

Vue.JS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Vue

11 篇文章 1 订阅

订阅专栏

1、computed计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例，在HTML DOM加载后马上执行的，如赋值,它是依赖缓存的，当相关依赖发生变化时才会重新取值。

2、methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例，必须要有一定的触发条件才能执行，如点击事件。

3、watch是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性，用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

具体代码测试如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>watch测试</title>
		<script src="js/vue.js"></script>
		<style>
			/*移除HTML5 input在type="number"时的上下小箭头*/
			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button{
			    -webkit-appearance: none;
			    margin: 0;
			}
			input[type="number"]{-moz-appearance:textfield;}
		</style>
	</head>
	<body>
		<div class="wrap">
			<input type="number" />
			<div id="app">
				{{x}}--{{y}}--{{z}}--{{D}}
				<p>
					<button @click="someMethod">Click</button>
				</p>
				<p>
					D:<input :value="DF" type="" name="" id="" value="" />
				</p>
				<p>
					A:<input v-model="x" type="" name="" id="" value="" />
				</p>
			</div>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					x:1,
					y:2,
					z:3,
					D:99
				},
				watch:{
					//x值发生变化时会触发
					x:function(val,oldValue){
						console.log('[watch]==>new:%s,old:%s',val,oldValue);
					},
					y:'someMethod',
					//深度watcher
					z:{
						handler:function(val,oldVal){
							console.log('deep:'+val+':::'+oldVal)
						},
						deep:true
					},
					
				},
				methods:{
					//被调用时触发
					someMethod:function(){
						this.z=this.z+999;
						this.D=this.D+10;
						console.log('fn:'+this.z+'==='+this.D)
					}
				},
				//界面加载时触发
				computed:{
					DF:function(){
						return this.D;
					},
					doubleDF:function(){
						return this.DF*2
					},
					doDF:{
						get:function(){
							return this.D+11;
						},
						set:function(v){
							this.D=this.D-11;
							this.x=v-222;
						}
					}
				}
			})
			vm.x=88;
			vm.z=999;
			vm.doDF
			console.log(vm.doDF)//99+11=110
			vm.doDF=111;
			console.log(vm.doDF)//D:110-11=99(在上一步的基础上)  x:111-222=-111
			console.log(vm.D)//88  在上一步vm.doDF=111;设置的时候this.D=this.D-11;对D进行了重新赋值
			vm.doDF
			console.log(vm.doDF)//99
		</script>
		
	</body>
</html>

点击click按钮触发methods中的someMethod事件，改变输入框A中的值触发watch中的监听事件，页面加载时触发computed中的事件。

soosgo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js中computed、methods、watch的使用

1、computed计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例，在HTML DOM加载后马上执行的，如赋值,它是依赖缓存的，当相关依赖发生变化时才会重新取值。2、methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例，必须
复制链接

扫一扫