标签:更新 product cannot 显示 dex notify max targe word
1.$set
用法:this.$set(Object, key, value)或 Vue.$set(Object, key, value)
原理:当data数据中存在某个属性时,我们对他进行更改,页面会更新;但是如果data数据中没有某个属性值,我们对其更改,页面不会显示此属性;那是因为再vue初始化的时候,已经将data中定义的数据处理成响应式的了,所以数据的改变会触发页面的更新;但是新增的属性却不是响应式的,虽然打印可以看到对象确实多了此属性,但是由于不是响应式的,所以不会体现在页面上
##源码 位置:src/core/observer/index.js //set接收三个参数,target/key/val target的类型为对象或者数组 export function set (target: Array<any> | Object, key: any, val: any): any { //当前环境为生产环境并且 target为null/undefined 或者 || target为string/number/symbol/boolean的一种时 抛出警告 if (process.env.NODE_ENV !== ‘production‘ && (isUndef(target) || isPrimitive(target)) ) { warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`) } //数组 //判断是数组并且key为有效的数组索引 if (Array.isArray(target) && isValidArrayIndex(key)) { //将target数组的长度设置为target.length和key中的最大值 target.length = Math.max(target.length, key) //做替换操作 target.splice(key, 1, val) return val } //对象 //key为数据中的一个属性并且不是Object原型上的属性 if (key in target && !(key in Object.prototype)) { //已经存在说明是响应式的,直接更新 target[key] = val return val } //之前不存在的情况 //定义ob的值为target._ob_ const ob = (target: any).__ob__ //target对象是vue实例对象或者根数据对象,就会抛出错误 if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== ‘production‘ && warn( ‘Avoid adding reactive properties to a Vue instance or its root $data ‘ + ‘at runtime - declare it upfront in the data option.‘ ) return val } //ob不存在,target不是响应式的 if (!ob) { target[key] = val return val } //对新添加的key或者val做响应式 defineReactive(ob.value, key, val) //通知更新 ob.dep.notify() return val }
参考链接:https://www.cnblogs.com/heavenYJJ/p/9559439.html
标签:更新 product cannot 显示 dex notify max targe word
原文地址:https://www.cnblogs.com/znLam/p/13153779.html