前言：前天我们学了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（
情景关键组件没有正确引入函数无限递归解决如果在网上搜索[Vuewarn]:Componentismissingtemplateorrenderfunction.或[Vuewarn]:Invalidvnodetypewhencreatingvnode:null..可能会找到关于组件没有正确引入的解决方法，主要是：引入组件的时候，组件的路径结尾的.vue不要省略。引入组件的时候，要使用规范的驼峰命名法。我使用的是vite，似乎会自动引入组件，即不需要写importComponentNamefrom'@/components/...;'我检查之后，发现是：我为了获取组件的DOM节点，使用了ref，但
情景关键组件没有正确引入函数无限递归解决如果在网上搜索[Vuewarn]:Componentismissingtemplateorrenderfunction.或[Vuewarn]:Invalidvnodetypewhencreatingvnode:null..可能会找到关于组件没有正确引入的解决方法，主要是：引入组件的时候，组件的路径结尾的.vue不要省略。引入组件的时候，要使用规范的驼峰命名法。我使用的是vite，似乎会自动引入组件，即不需要写importComponentNamefrom'@/components/...;'我检查之后，发现是：我为了获取组件的DOM节点，使用了ref，但
一、定义数据角度：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
1.refref的主要作用就是将一个变量变成响应式变量。在vue3中，随处定义的变量并不是响应式的，也就是说，如果模板中渲染了这个变量，那这个变量其实是不会驱使视图变更的。看个例子{{message}}测试letmessage:string='小王'functioncheckBut(val:string){message=valconsole.log(message)//输出大王}修改了message这个变量，值变化了，但是模板却并没有发生变化。这个时候就需要用到ref这个api了。import{ref}from'vue'letmessage:string=ref('小王')functionc
1.refref的主要作用就是将一个变量变成响应式变量。在vue3中，随处定义的变量并不是响应式的，也就是说，如果模板中渲染了这个变量，那这个变量其实是不会驱使视图变更的。看个例子{{message}}测试letmessage:string='小王'functioncheckBut(val:string){message=valconsole.log(message)//输出大王}修改了message这个变量，值变化了，但是模板却并没有发生变化。这个时候就需要用到ref这个api了。import{ref}from'vue'letmessage:string=ref('小王')functionc
前言Vue3有个RefAPI，官网文档说明其主要的用处是：1、将一个原始类型值(例如，一个字符串)，变成响应式的。2、当解构的两个property的响应性都会丢失时，可以将我们的响应式对象转换为一组ref。这些ref将保留与源对象的响应式关联。下面是对应的两个例子：import{ref}from'vue'constcount=ref(0)console.log(count.value)//0count.value++console.log(count.value)//1import{reactive,toRefs}from'vue'constbook=reactive({author:'Vue
前言Vue3有个RefAPI，官网文档说明其主要的用处是：1、将一个原始类型值(例如，一个字符串)，变成响应式的。2、当解构的两个property的响应性都会丢失时，可以将我们的响应式对象转换为一组ref。这些ref将保留与源对象的响应式关联。下面是对应的两个例子：import{ref}from'vue'constcount=ref(0)console.log(count.value)//0count.value++console.log(count.value)//1import{reactive,toRefs}from'vue'constbook=reactive({author:'Vue
