Vue 计算属性和侦听器

一、计算属性

---

用关键字computed来实现，每一个计算属性本质上是一个函数

当我们需要对数据进行大量操作时，例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

对message进行翻转字符串操作，当我们需要对多个数据都进行反转操作时，使用计算属性 就很简便

<!-- 计算属性 -->
<div id="app">
    <p>{{content}}</p>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            text:'123,456,789'
        },
        computed:
        {
            content:function(){
                return this.text.split(',').reverse().join(',')
            }
        }
    })
</script>

• 应用于大量计算或遍历大数组，可以获得缓存，提高效率

1.计算属性VS事件方法

我们可以使用 methods 来替代 computed，效果上两个都是一样的

• 但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
• 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

2.计算属性`getter(读取数据)`和`setter(改变属性的值)`

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

<div id="setter">
    FirstName:
    <input type="text" v-model='Firstname'>
    <br><br>
    LastName:
    <input type="text" v-model='Lastname'>
    <br><br>
    FullName:{{fullname}}
</div>

<script>
    new Vue({
        el:'#setter',
        data:{
            Firstname:'lalisa',
            Lastname:'manoban'
        },
        computed:{
            fullname:{
                get:function(){      //getter方法用于读取数据，默认被调用
                    return this.Firstname+' '+this.Lastname;
                },
                set:function(newvalue){    //setter方法，在设置属性值时该方法被调用
                    let names=newvalue.split(',')
                    this.Firstname=names[0]
                    this.Lastname=names[1]
                }
            }
        }
    })
</script>

二、侦听器

---

当数据发生变化（执行异步操作）时，及时做出响应处理

使用：在vue对象上挂在watch属性，监听data中的数据

<!-- 侦听器watch -->
<div id="cat">
    <input type="text" v-model='msg'>
    <br>
    <p>{{born}}</p>
</div>
<script>
    new Vue({
        el:'#cat',
        data:{
            msg:'abc',
            born:'未改变'
        },
        watch:{
            msg:function(e){
                this.born='已改变'
                console.log(e)
            }
        }
    })
</script>

以上代码中我们创建了一个输入框，data 属性中， msg 初始值为 abc。watch 对象创建了 data 对象的监控方法： msg。

当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值born。