Vue3的ref和reactive区别及使用

一、Vue3的ref和reactive区别及使用

1、1）ref创建一个响应式数据，一般来说用于创建简单类型的响应式对象，比如String、Number、boolean类型；

2、 2）当我们给ref传递一个值之后，如果使用的是基本类型响应式依赖Object.defineProperty()的get()和set()，如果ref使用的是引用类型，ref函数底层会自动将ref转换成reactive; ref(18)=> reactive({value:18})；

3、 3）需要注意的是ref定义的值在Vue中使用直接使用所定义的字段，但是在js中获取或者修改值需要通过value；

4、 4）ref也可以创建引用类型，对于复杂的对象，值是一个被proxy拦截处理过的对象，但是里面的属性不是RefImpl类型的对象，proxy代理的对象同样被挂载到value上，所以可以通过obj.value.key来读取属性，这些属性同样也是响应式的，更改时可以触发视图的更新

5、 1）reactive里面参数定义必须是对象或者数组(json/arr)，本质将传入的数据包装成proxy对象；

6、 2）基于Es6的Proxy实现，通过Reflect反射代理操作源对象，相比于reactive定义的浅层次响应式数据对象，reactive定义的是更深层次的响应式数据对象；

7、 1）一般来说，ref被用来定义简单的字符串或者数值，而reactive被用来定义对象数组等

8、 2）实际上都能用，而且ref也可以去定义简单的对象和数组，也是具有响应式的，不过官方文档中有提到如果将对象分配为ref值，则可以通过reactive方法使该对象具有高度的响应式。

二、1.1 React 介绍

1、React是一个用于构建用户界面的 JavaScript库，起源于 Facebook的内部开源项目。它不仅仅是一个框架，而是一个完整的前端开发生态体系，包含了多个相关的技术组件。学习 React并非仅限于学习框架本身，而是要掌握整个技术栈和生态体系，本书将围绕这个技术栈系统讲解。

2、React的核心组件包括 React.js，这是框架的核心库，需要在应用中先加载；以及 ReactDOM.js，这是用于将 React组件渲染到实际 HTML页面的渲染器。JSX是 React自定义的语法，用于在 JavaScript代码中编写类似于 HTML的标签。组件是 React中的核心概念，所有页面元素都是通过组件表达，我们编写的大部分 React代码都是围绕组件开发的。

3、虚拟 DOM（Virtual DOM）是 React抽象出来的概念，它帮助提高了应用的性能，通过比较虚拟 DOM和真实 DOM的差异，仅更新需要变化的部分，而不是整个页面。单向数据流（one-way reactive data flow）是 React的核心设计模式，数据流向自顶向下，确保了代码的清晰性和预测性。

4、了解了基本概念和一个简单的“Hello React World”示例之后，你可能会有如下疑问：JSX语法与 HTML有何不同？为什么 React除了 JSX之外没有其他特别之处，它与其他框架有何不同？“Hello World”并不能展示 React的全部能力，那它能做些什么？答案分别在后续章节中详细阐述。

5、React的独特之处在于其组件的组合模式，该模式模糊了简单元素和复杂元素的概念，使得客户程序能够像处理简单元素一样处理复杂元素，从而实现了与复杂元素内部结构的解耦。单向数据流设计让前端 bug定位变得简单，页面 UI和数据的对应关系清晰，便于追踪问题。高效的性能得益于虚拟 DOM算法，它只更新需要改变的元素，显著提升了应用的响应速度。

6、React的分离框架设计允许它在 Web、服务端（如 Node.js）、原生应用（如 iOS或 Android）和桌面应用（如使用 NW.js或 Electron）上运行。React.js的源码已分为 ReactDOM和 React.js两部分，这意味着它可以在不同环境中灵活使用。

7、React应用范围广泛，从简单的 Web应用，如 TODOAPP或电商网站，到数据可视化、图表展现甚至游戏开发。在 Web端，React也能实现数据可视化和 UI控制。通过 React Native，开发者可以使用 JSX编写具有原生应用性能的 UI，适用于 iOS和 Android应用开发。此外，React还支持服务器端渲染，使得在服务器端生成 HTML，优化了前后端分离架构。

三、js和vue有什么区别

原生js、jQuery.js、vue.js有什么不同

1、主体不同vue.js：是一套用于构建用户界面的渐进式JavaScript框架。jquery：是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。

1、主体不同vue.js：是一套用于构建用户界面的渐进式JavaScript框架。jquery：是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。

2、首先对这他们两个做一个简单的介绍，Vue.js（读音/vju/，类似于view）是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

3、jq是一个框架，里面是用原生js封装的各种函数。（1）jquery没有分割模块，只能全部导入。

vue.js和jquery的区别

1、两者的主要区别：在build/webpack.dev.conf.js和build/webpack.prod.conf.js中配置即可。

1、两者的主要区别：在build/webpack.dev.conf.js和build/webpack.prod.conf.js中配置即可。

2、vue所提倡的数据驱动视图和jQuery的直接操作DOM在编写页面时的思路是完全不同的。

3、这两者在思路上还是有所区别的，比如我们并不能用jquery操作dom的思维去写vue...不要用jquery那种dom的思路放到vue中去操作。

4、Vue.jsVue.js是Javascript家庭的一个新成员。在它的众多优势中，我认为它“易于学习”应该排在首位。简单性贯穿它的设计始终。

vue.js作为主流框架之一，同样支持SSR，vue.js的PC端网站开发时服务端渲染编译比较慢，使用用单页式效率更高。

在Vue.js中指令和组件分得更清晰。指令只封装DOM操作，而组件代表一个自给自足的独立单元——有自己的视图和数据逻辑。在Angular中两者有不少相混的地方。

他使用起来确实比reactjs简单方便多了。代码也清晰。借鉴了angularjs的declarative的特点。另外文档，例子做的都很漂亮。上手比较快，这些都是很好的优点。

vue和其他前端框架区别与AngularJS的区别相同点：都支持指令：内置指令和自定义指令。都支持过滤器：内置过滤器和自定义过滤器。都支持双向数据绑定。都不支持低端浏览器。

Vue.js和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的API产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。优点：简单：官方文档很清晰，比Angular简单易学。

1、VUE与React区别：React的思路是HTMLinJavaScript也可以说是AllinJavaScript，通过JavaScript来生成HTML，所以设计了JSX语法，还有通过JS来操作CSS，社区的styled-component、JSS等。

2、创建者等react是Facebook公司创建的js框架，并创新了新的语法，JSX（htmlinjavascript），而vue相对来说更容易学习，且使用模板系统，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。

3、react和vue的区别如下：数据驱动视图在jquery时代，我们需要频繁的操作DOM来实现页面效果与交互；而Vue和React解决了这一痛点，采用数据驱动视图方式，隐藏操作DOM的频繁操作。

4、Vue：Vue也使用虚拟DOM，但是和React相比，性能更为优越，而且没有bug。ReactVSVue：框架大小React的体积比Vue.js稍微大一点，大概100KB，Vue则是80KB。框架/库的大小对软件开发项目有深远影响。

5、无需额外的知识；HTML和JavaScript将完成工作。运行速度快，相对于React来说，性能着一方面Vue占有绝大优势。根据不同框架优点，我们在实际项目开发选型中一般中小型项目我们会选择使用Vue，大型项目会选择React。

6、React和Vue有许多相似之处，它们都有：使用VirtualDOM提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。

1、两者的区别是：一个是服务端语言，一个是前端框架。nodejs是一个js运行于服务端的环境，是一个服务端语言；而vue是前端渲染的库，是一个前端框架。

2、nodejs一个是前端框架，vuejs一个是服务端语言。nodejs是js运行时，运行环境，类比java中jvm。

3、vue是一种js框架，wepack是打包工具，nodejs也是js后台框架，三者就相当于是表兄弟，表兄妹的关系，没有直系亲属的关系。Vue.js自身不是一个全能框架——只聚焦于视图层。其它库或已有项目整合。

4、Node.js和Vue.js属于不同的框架。学习它们所需的时间取决于您的背景、知识经验和学习方法。一般来说，学习Node.js和Vue.js可能会需要几个月到一年的时间。