新玩家Vue笔记07

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

---

监听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

---

一、基础例子

<div id="root">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data:{
            firstName: '张',
            lastName: '三',
            fullName: '张-三'
        },
        watch: {
            firstName(value) {
                this.fullName = value + '-' + this.lastName
            },
            lastName(value) {
                this.fullName = this.firstName + '-' + value
            }
        }
    })
</script>

二、深度监视

deep: true 实现深度监视。Vue中的watch默认不监测对象内部值的改变，配置deep:ture可以监测对象内部值的改变。

---

总结

1. computed能完成的功能，watch都能完成

2. watch能完成的功能，comouted不一定能完成，例如：watch能完成异步操作