桐庐城乡建设局网站,百度助手,wordpress赚钱插件,房地产销售述职报告一、为什么要重写数组方法#xff1f;
Vue 为了实现响应式数据绑定#xff0c;需要能够捕获到数据的变化#xff0c;以便在数据发生改变时自动更新视图。JavaScript 中的数组是引用类型#xff0c;所以常规的引用跟踪机制不能捕获数组内部的变化。因为Vue的响应式是通过 O…一、为什么要重写数组方法
Vue 为了实现响应式数据绑定需要能够捕获到数据的变化以便在数据发生改变时自动更新视图。JavaScript 中的数组是引用类型所以常规的引用跟踪机制不能捕获数组内部的变化。因为Vue的响应式是通过 Object.defineProperty()实现的这个api没办法监听数组长度的变化也就没办法监听数组的新增。所以为了更友好的操作数组并触发响应式检测Vue对改变原数组(数组本身)的方法进行了重写。
Vue通过原型拦截的方式重写了数组的7个方法首先获取到这个数组的Observer。如果有新的值就调用observeArray对新的值进行监听然后调用notify通知render watcher执行update。 二、vue重写数组的七个方法分别是哪些
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
说明vue只重写了这7个方法使用其它数组方法不会主动触发试图更新例如 concat、slice 等如果需要触发更新我们可以使用Vue.set() 或 this.$set() 方法手动触发更新。另外Vue3处理响应数据使用了Proxy系统会自动捕获这些操作并在数据变化时触发视图更新所以不需要重写数组方法。 三、重写数组方法源码
// 获取数组的原型Array.prototype
var arrayProto Array.prototype// 新建一个继承于Array的对象
var arrayMethods Object.create(arrayProto)// 列出需要重写的数组方法名
var methodsToPatch [push,pop,shift,unshift,splice,sort,reverse,
]// 遍历上述数组方法名依次将上述重写后的数组方法添加到arrayMethods对象上
methodsToPatch.forEach(function (method) {// 缓冲原始数组的方法var original arrayProto[method]// 利用Object.defineProperty对方法的执行进行改写def(arrayMethods, method, function mutator(val) {var args [],len arguments.length;while (len--) args[len] arguments[len]// 执行原数组方法var result original.apply(this, args)var insertedswitch (method) {case push:case unshift:inserted args;break;case splice:inserted args.slice(2);break;}// 在此处进行通知return result})
})// 进行监听
function def(obj, key, val, enumerable) {Object.defineProperty(obj, key, {value: val,enumerable: !!enumerable,writable: true,configurable: true})
}具体来说当调用重写的数组方法时Vue 会执行以下步骤
1.调用原始的数组方法例如 push()、pop()、splice() 等。
2.在执行数组方法后Vue 检测到数组发生了变化。
3.Vue 发出通知触发视图的重新渲染确保视图与数据保持同步。
这种重写机制使得开发者在操作数组时无需手动去触发视图更新Vue 自动为你处理了这部分逻辑。
说明这些重写仅适用于通过 Vue 实例声明的数组。如果你直接使用原生的数组方法Vue 将无法捕获到变化可能导致视图不更新。
