Vue中观察者模式的实现

Vue中实现观察者模式的方法可以有三种：

1、v-on方法

exp: 

<div id='test'>

<button v-on:event='functionName'>buttonName</button>

</div>

var vm = new Vue（｛

　　el:'#test',

　　method:{

　　　　functionName: function(){};

　　}

}

v-on 可以将DOC中发生的事件与相应的函数绑定，当事件发生时，绑定的函数会被调用！

2、compute属性

<div id='test'>

<p>{{fullName}}</p>

</div>

var vm = new Vue({

　　el:'#test',

　　data:{

　　　　firstName=' '

　　　　lastName=' '

　　}

　　compute:{

　　fullName:function(){

　　return firstName + lastName;

　　}

　　}

}

每当firstName和lastName更新值时，fullName就将会被调用。事实上调用了vm.fullName.getter(）。

3、使用watch属性

<div id='test'>

<p>{{fullName}}</p>

</div>

var vm = new Vue({

　　el:'#test',

　　data:{

　　　　firstName=' '，

　　　　lastName=' '，

　　　　fullName=' ’

　　}

　　watch:{

　　firstName:function(){

　　fullName = firstName + lastName;

　　return;

　　}，

　　lastName:function(){

　   fullName = firstName + lastName;

　　return;

　　}

　　}

}

每当watch中的观察值变化时，相应的函数就会被调用。

转载于:https://www.cnblogs.com/ustc-se-lihanlin/p/9837572.html