一、背景描述技术栈：vue+element报错内容：Cannotsetreactivepropertyonundefined,null,orprimitivevalue:undefined如下图所示：二、报错原因根据报错内容翻译一下，就是不能对undefined,null或者原始值为undefined的属性设置值。大白话就是不能对字段为undefined,null进行赋值，vue是双向数据绑定。总的来说，我们就是不能对未知的对象进行渲染。为什么会出现这个错误内容呢？在我的代码中主要是点击某一个按钮后弹窗显示出来的页面在渲染之前会先调用API进行数据查询，根据查询到的内容渲染到页面，但是API接
一、背景描述技术栈：vue+element报错内容：Cannotsetreactivepropertyonundefined,null,orprimitivevalue:undefined如下图所示：二、报错原因根据报错内容翻译一下，就是不能对undefined,null或者原始值为undefined的属性设置值。大白话就是不能对字段为undefined,null进行赋值，vue是双向数据绑定。总的来说，我们就是不能对未知的对象进行渲染。为什么会出现这个错误内容呢？在我的代码中主要是点击某一个按钮后弹窗显示出来的页面在渲染之前会先调用API进行数据查询，根据查询到的内容渲染到页面，但是API接
前言：前天我们学了ref和reactive，提到了响应式数据和Proxy，那我们今天就来了解一下，vue3的响应式在了解之前，先复习一下之前vue2的响应式原理vue2的响应式：原理：对象类型：通过Object.defineProperty（）对象的读取，修改进行拦截，也就是数据劫持，响应式的根基缺点：因为只有读取和修改（get，set）所以新增属性，和删除属性，页面是不会刷新的数组类型：通过重写，更新数组的一系列方法来实现拦截，假如你调了一个数组的push方法，其实push是被二次重写封装的（对数组的变更方法进行了重写）缺点：直接通过下标修改数组，页面不会更新 解决方法：用this.$set
前言：前天我们学了ref和reactive，提到了响应式数据和Proxy，那我们今天就来了解一下，vue3的响应式在了解之前，先复习一下之前vue2的响应式原理vue2的响应式：原理：对象类型：通过Object.defineProperty（）对象的读取，修改进行拦截，也就是数据劫持，响应式的根基缺点：因为只有读取和修改（get，set）所以新增属性，和删除属性，页面是不会刷新的数组类型：通过重写，更新数组的一系列方法来实现拦截，假如你调了一个数组的push方法，其实push是被二次重写封装的（对数组的变更方法进行了重写）缺点：直接通过下标修改数组，页面不会更新 解决方法：用this.$set
前言：前天我们学了ref和reactive，提到了响应式数据和Proxy，那我们今天就来了解一下，vue3的响应式在了解之前，先复习一下之前vue2的响应式原理vue2的响应式：原理：对象类型：通过Object.defineProperty（）对象的读取，修改进行拦截，也就是数据劫持，响应式的根基缺点：因为只有读取和修改（get，set）所以新增属性，和删除属性，页面是不会刷新的数组类型：通过重写，更新数组的一系列方法来实现拦截，假如你调了一个数组的push方法，其实push是被二次重写封装的（对数组的变更方法进行了重写）缺点：直接通过下标修改数组，页面不会更新解决方法：用this.$set（
前言：前天我们学了ref和reactive，提到了响应式数据和Proxy，那我们今天就来了解一下，vue3的响应式在了解之前，先复习一下之前vue2的响应式原理vue2的响应式：原理：对象类型：通过Object.defineProperty（）对象的读取，修改进行拦截，也就是数据劫持，响应式的根基缺点：因为只有读取和修改（get，set）所以新增属性，和删除属性，页面是不会刷新的数组类型：通过重写，更新数组的一系列方法来实现拦截，假如你调了一个数组的push方法，其实push是被二次重写封装的（对数组的变更方法进行了重写）缺点：直接通过下标修改数组，页面不会更新解决方法：用this.$set（
一、定义数据角度：ref定义：基本数据类型reactive定义：对象（或数组）数据类型备注：ref也可以用来定义对象和数组，它内部通过reactive转为代理对象示例：letp2=ref({ name:'李四', age:18 }) console.log('p2',p2) letp1=reactive({ name:'张三', age:20 }) console.log('p1',p1)从打印的结果可以看出来通过ref定义的数组实际生成了一个引用实例对象，在js中如果需要调用对象的属性值通过.value.name调用，而通过reactive定义的对象直接.n
一、定义数据角度：ref定义：基本数据类型reactive定义：对象（或数组）数据类型备注：ref也可以用来定义对象和数组，它内部通过reactive转为代理对象示例：letp2=ref({ name:'李四', age:18 }) console.log('p2',p2) letp1=reactive({ name:'张三', age:20 }) console.log('p1',p1)从打印的结果可以看出来通过ref定义的数组实际生成了一个引用实例对象，在js中如果需要调用对象的属性值通过.value.name调用，而通过reactive定义的对象直接.n
ref的基础特性ref约等于reactive({value:x})ref()可以定义时无参数，第一次赋值任意类型，然后就不能增加属性constrefa=ref(6)constrcta=reactive({value:12})console.log('refa:',refa)//RefImpl{...}console.log('refa:',refa.value)//6console.log('rcta:',rcta)//Proxy{value:12}console.log('rcta.value:',rcta.value)//12constrefb=ref({name:'bbb'})conso
ref的基础特性ref约等于reactive({value:x})ref()可以定义时无参数，第一次赋值任意类型，然后就不能增加属性constrefa=ref(6)constrcta=reactive({value:12})console.log('refa:',refa)//RefImpl{...}console.log('refa:',refa.value)//6console.log('rcta:',rcta)//Proxy{value:12}console.log('rcta.value:',rcta.value)//12constrefb=ref({name:'bbb'})conso
