目录
Vue3.0
与2.0的区别
基本代码体
ref、reactive
ref、toref
torefs
inputref
CustomRef
shallowReactive、shallowRef
响应式原理proxy和reflect
setup
生命周期
hooks
readonly、shallowReadonly
toRaw与markRaw
provide、inject
响应式判断
vue3中支持vue2的大多数特性。比如内置指令、自定义指令、watch监听器、computed、methods、路由、组件、vuex...
创建方式：
①脚手架创建。 ，只要vue版本高于4就ok，
②提高vite创建。，npm run sev运行
- 性能提升、打包大小减少了40%，第一次渲染快了55%左右，更新提高了大概130%、内存减少了50%左右
- 可以使用vite构建项目，也可以用脚手架创建
- 响应式原理
使用proxy代理配合reflect反射，不用再和vue2一样每一个属性都写一个set和get
- 重写虚拟DOM的实现和Tree-Shaking（摇树）
- 新增Composition（组合）API
- 不在使用mixin封装函数，而是使用hook封装
- Vue的响应式特性、Vue的生命周期
- 可以使用ts语法
- setup
ref和reactive（写在setup里的数据不是响应式的，需要他们来协助，vue2中data的数据都是响应式的） computed和watch 新的生命周期函数 provide.与inject
- Vue3中Template支持多个根标签（会默认包裹一个Fragment标签，但是不会渲染到页面），Vue2不支持【根标签】
- 新增组件：Teleport瞬移组件、Suspense异步加载组件、loading界面
- 全局api的修改，以前都是Vue.xxx，现在修改为app.xxx
- 模板语法的细微变化
基本代码体
ref是一个函数
作用：定义一个响应式的数据，返回一个ref对象，对象中有一个value属性，如果需要对数据进行操作，需要使用该Ref对象调用value属性的方式进行数据的操作
ref、toref
都是把reactive包裹的对象内的属性变为ref响应式的
区别：toref使得操作对象的属性，{{对象}}和对象内{{属性}}都变为响应式，而ref仅让{{属性}}变为响应式，对象不发生变化
torefs
包裹一个对象，把对象内部的属性变为响应式的。把响应式对象变为普通对象，但是对象内属性变为ref响应式
reactive会将一个对象变成响应式{{obj}}，但是如果页面中的内容是{{具体某一个属性}}，则无法实现页面响应式。
和toref区别：对象内的全部属性都变为ref响应式，可以解构{xxx，xxx}或...state出来
inputref
获取表单元素
例如：实现页面的输入框初始就有焦点
CustomRef
自定义的ref
防抖：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；
shallowReactive、shallowRef
对象的浅劫持
注意：
页面中有除了目标变化以外的任何一个可以刷新页面的操作,都会影响浅度劫持,将其变成深度劫持,发生牵连影响。
也就是说，浅劫持命令只在没有其他刷新操作的页面起作用
好处
对整个对象进行代理proxy，内部的所有属性都可以被劫持到变化，可以实现深度监听（对象内地对象属性）。简单方便，包含到的使用场景多。
setup
细节：setup在beforeCreate.之前执行的，并且只执行一次
推断出：setup在执行的时候，当前组件还没有被创建出来，
意味着：组件实例对象this根本就不能用，this是undefined,所以不能通过this再去调用data/computed/methods/props巾的相关内容了，其实所有的组合API相关的回调函数中都不可以
setup中的返回值是一个对象，内部的属性和方法和data函数中的return对象的属性是给html模板使用的
混合使用
setup中的对象内部的属性和data函数中的return对象的属性会合并为组件对象的属性
setup中的对象中的方法和methods对象中的方法会合并为组件对象的方法
注意
在vue3中尽量不要混合使用，因为methods可以访问setup提供的属性和方法，但是setup中方法不能访问methods(setup比beforecreate先执行，this无法访问加载的方法)
setup尽量不要是个async函数，因为返回值不再是return的对象了，而是promise对象,模板根本看到return对象中对象中的属性数据了
setup可以接收一些参数`setup(props，{atters，slots，emit})` //props参数：是一个对象，里面有父组件向子组件传递的数据，并且是在子组件通过props声明接收的所有属性 /*context参数：是一个对象(可以解构，选择其中的部分对象)，里面有 attrs对象(获取当前组件标签上所有的属性对象，且是在props中没有声明接收过的所有属性的对象)， emit方法（分发事件的）在子组件的方法中直接触发父组件定义的方法（类似自定义事件，直接对父组件的内容进操作）emit（"方法名"，"参数"）， slots对象（插槽）*/ props和atters、slots都是proxy对象
默认导出封装的一些函数，return变量，在组件setup中解构获取变量,以此应用到网络中
比如封装一个点击显示页面鼠标位置方法，通过组合API来实现Vue的响应式特性(ref/reactive)、Vue的生命周期、hooks写法...
readonly、shallowReadonly
readonly深只读和shallowReadonly浅只读
shallowReadonly仍可以对对象内属性是对象，其内的属性可以进行修改，但是，对象内的属性不可以（浅只读）
readonly无论套多少层对象，都是不可修改的
toRaw与markRaw
toRaw：将一个由reactive生成的响应式对象转为普通对象。如果是ref定义的话，是没有效果的（包括ref定义的对象）
但是如果在后续操作中对数据进行了添加的话，添加的数据仍为响应式数据，当然要是将数据进行markRaw操作后就不会变为响应式
provide、inject
父-子孙组件传递数据，不需要借助父组件一层一层传值
父组件provide("color",color)
子孙组件const color =inject('color')
响应式判断
isRef: 检查值是否为一个 ref 对象。 isReactive：检查对象是否是由 reactive 创建的响应式代理。 isReadonly: 检查对象是否是由 readonly 创建的只读代理。 isProxy：检查对象是否是由 reactive 或 readonly 创建的 proxy。
到此这篇vue2和vue3区别很大吗（vue2vue3的区别）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/50462.html