Vue的数据监听是非常重要的,它允许开发人员对组件状态的变化做出相应的响应。Vue的数据监听机制基于ES6的Proxy,这意味着Vue不仅仅是对组件状态对象进行简单的属性描述符的设置,而是将对象封装到一个代理中,这个代理是可以观察数据变化的。
在创建Vue实例时,Vue会遍历组件的状态对象,在遍历时会把每个属性都转换成getter和setter函数。然后将这些getter和setter函数存放到一个Observer实例中,这样在修改组件状态的时候就能够自动触发视图更新。
const obj = { a: 1, b: 2 } const vm = new Vue({ data: obj }) obj.a = 2 // 视图自动更新
在上面的例子中,当我们修改了obj的属性a的值时,由于Vue的数据监听机制,视图会自动更新。
除了对象,Vue还支持对数组的监听。Vue将数组的push、pop、shift、unshift、splice、sort、reverse等常用方法进行了重写,重写后的方法会触发视图更新。
const arr = [1, 2, 3] arr.push(4) // 视图自动更新
除了对属性和数组的监听,Vue还支持对计算属性和watcher的监听。通过计算属性让我们可以在模板中使用函数返回的值,当然,这个值是由data中的数据计算出来的,而不是固定的。
const vm = new Vue({ data: { a: 1 }, computed: { b: function() { return this.a + 1 } } }) vm.a = 2 // 视图自动更新 console.log(vm.b) // 3
watcher则是一个非常强大的监听功能,它允许我们对组件状态做出更为复杂的监听操作。当我们使用watcher对某个属性进行监听时,当这个属性值发生变化时,watcher会被触发。
const vm = new Vue({ data: { a: 1, b: 2 }, watch: { a: function(newValue, oldValue) { console.log('a变化了:', newValue, oldValue) } } }) vm.a = 2 // 'a变化了:2 1' 会被打印出来
总的来说,Vue数据监听机制是通过ES6的Proxy对组件状态进行代理,然后通过getter和setter函数来实现对状态变化的监控。Vue同时支持对象、数组、计算属性和watcher的监听,让我们可以做出更为复杂的响应式操作。