Vue入门 - 计算属性与watchers

1 计算属性

data {
    computed:{
        prop1:function(){
            return this.message.split('').reverse().join('')
        }
    }
}

1. 在dataset中定义computed选项来定义计算属性。
2. prop1属性值依赖于message属性值，因此message发生变化时prop1也发生相应变化。
3. 计算属性可以基于它的依赖对值进行缓存，若使用方法，每次都需要执行调用。
4. 由于是根据依赖值进行缓存，所以依赖发生改变时才会重新求值。
5. 计算属性内部采用getter来实现，也可以自己定义setter。

data {
    computed:{
        prop1:{
            get:function(){
                return this.message.split('').reverse().join('')
            },
            set:function(){
                this.message="xxx";
            }
        }
    }
}

---

2 观察watchers

1. 在dataset中定义watch选项来响应数据变化。
2. 想要在数据变化响应时，执行异步操作或开销较大的操作时，使用watchers。

data:{
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
},
watch:{
    question:function(newQuestion){
        this.answer = 'Waiting for you to stop typing...'
        this.getAnswer()
    }
}

---

深度watch

//...
watch:{
    prop:{
        deep:true,
        handler:function(){
            //...
        }
    }
}

---

3 其他

vm.$watch API