您的位置：首页 > 产品设计 > UI/UE

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

2018-01-17 15:36 1006 查看

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中的事件。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航