目录

一、计算属性

1、计算属性需要定义在computed选项中。

2、getter和setter。

3、计算属性缓存。

二、监听属性

---

 

一、计算属性

1、计算属性需要定义在computed选项中。

当计算属性依赖的数据发送变化时，这个属性的值会自动更新，所有依赖该属性的数据绑定也会同步进行更新，在一个计算属性中可以实现各种复杂的逻辑，包括运算、函数调用等。

<div id="element">
    <p>原字符串：{{str}}</p>
    <p>新字符串：{{newstr}}</p>
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            str: 'Hello * World * !'
        },
        computed:{
            newstr:function(){
                return this.str.split('*').join('+');//对字符串进行分割并重新连接
            }
        }
    })
 
</script>

上述代码定义了一个计算属性newstr，并在模板中绑定了该计算属性，newstr属性的值怡莱于str属性的值，当str属性发生变化时，newstr属性的值也会自动更新。

2、getter和setter。

每一个计算属性都包含一个getter和setter。当没有指明方法时，默认使用getter方法来读取数据，getter用来执行读取操作，而setter用来执行设置值的操作，当手动更新时就会触发setter，并触发视图更新。

<div id="element">
    <p>姓名：{{fullname}}</p>
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            name1: '法外狂徒',
            name2: '张三'
        },
        computed:{
            fullname:{
                //getter
                get : function(){
                    return this.name1+this.name2;
                },
                //setter
                set:function(value){
                    this.name1=value.substr(0,4);
                    this.name2=value.substr(4)
                }
            }
        }
    })
    
    demo.fullname='法外狂徒———————————张三'
</script>

如上， 在代码中定义了一个计算属性fullname，在为其重新赋值时，Vue.js会自动调用setter，模板中绑定的值也会随之更新，如果没有设置setter方法重新赋值的话，fullname的值会改变，但视图并不会更新。

3、计算属性缓存。

实现一个功能，通过computed计算属性和methods方法同样可以实现，结果也相同，然而不同的是计算属性是基于他们的依赖进行缓存的，当页面发生改变时，如果依赖的数据未发生变化，使用计算属性获取的值就一直是缓存值，只有依赖的数据发生改变时才会重新执行getter。

<div id="element">
    <input v-model="message">
    <p>methods方法：{{getTimeA()}}</p>
    <p>computed方法：{{getTimeB}}</p>
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            message:''
        },
        computed:{
            getTimeB:function(){
                var hour=new Date().getHours();
                var minute=new Date().getMinutes();
                var second=new Date().getSeconds();
                return hour+":"+minute+":"+second;
            }
        },
        methods:{
            getTimeA:function(){
                var hour=new Date().getHours();
                var minute=new Date().getMinutes();
                var second=new Date().getSeconds();
                return hour+":"+minute+":"+second;
            }
        }
    })
    

</script>

 

 如上，每次在input输入时，vue实例的数据发生改变，页面会进行重新渲染，methods方法将会更新新的时间，而computs依赖于缓存，每次访问getTimeB计算属性时会立即返回之前返回的计算结果，而不会再次执行函数，因此会输出缓存的时间。

二、监听属性

        监听属性是Vue.js提供的一种用来监听和响应Vue实例中的数据变化的方式。在监听数据对象中的属性时，每当监听的属性发生变化时，都会执行特定的操作。监听属性可以定义在Vue实例选项之中，也可以使用实例方法xxx.$watch()

<div id="element">
    <input v-model="name">
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            name:'法外狂徒张三'
        },
        watch:{
            name:function(newValue,oldValue){
                alert("原值："+oldValue+"新值："+newValue)
            }
        }
    })
    //使用xxx.$watch
    // demo.$watch('name',function(newValue,oldValue){
    //     alert("原值："+oldValue+"新值："+newValue)
    // })

</script>

        deep选项，如果要监听的属性是一个对象，为了监听对象内布值的变化，可以在选项参数中设置deep选项的值为true。 

<div id="element">
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            dogs:{
                name:'雄文岸田',
                sex:'gay',
                hobby:'e.a.t s.h.i.t'
            }
        },
        watch:{
            dogs:{
                handler:function(val){
                    alert("新值："+val.name+"-"+val.sex+"-"+val.hobby)
                },
                deep:true
            }
        }
    })
    demo.dogs.name='文雄岸田'

</script>