5、computed計算属性和监听器watch

<div id="app">
        a <input type="text" v-model.number="a">
        b <input type="text" v-model.number="b">
        <input type="text" v-model="sum()"> //这里函数要写上()
    </div>

let vm = new Vue({
            el:'#app',
            data:{
                a:'',
                b:''
            },
            methods:{
                sum(){
                    return this.a + this.b
                }
            }
        })

實現了computed 的計算功能

 

computed:{
                res(){
                    return this.a + this.b
                }
            }

{{res}}

 

 

 

 

 

 

计算属性 set 方法设置

计算属性的 setter

computed计算属性默认只有getter（此时为单向绑定），

如果需要可以自行指定getter和setter 实现双向绑定。

 

 

 计算属性的传参

 

 

 

 

 

 将计算属性的返回值改为函数，再进行传值操作。函数作为传参中间途径。

 

总结

函数 每次都调用；函数，当修改总数(sum)的input 时会报错，单向绑定，不能通过input修改 function 内容

 计算属性     计算属性有缓存，数据改变才会重新计算,计算属性默认只有getter 没有 setter 所以为单向

 

 

 

我们为什么要用 计算属性

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

 

监听器watch

通过 watch 选项 或者 vm 实例的 $watch() 来监听指定的属性

el:通过watch实现计算属性计算总值的功能

 

监听器方式2：通过vm对象调用

 

 

深度监听

 

 

 

 watch: {
                a (newValue,oldValue){
                    this.sumSroce = newValue + this.b
                    console.log(this.sumSroce)
                },
                myObj:{
                    deep: true,
                    handler(val, oldVal){
                        console.log('深监听到')
                    }
                }
            }

深监听可以监听到对象里的值的改变，

深监听为一个对象，普通监听是函数

 

 

 

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：