vue2 和 vue3 的区别

vue2 和vue3的区别

数据绑定发生变化

答：vue2 通过Object.definepropert() 进行数据模型双向绑定，vue3通过proxy 代理包装，proxy相当于与琢级的监听省掉的for in 多层级的的嵌套，响应速度更加快速

数据初始化

答：vue2 采用data 的中定义初始化数据，vue3 中在setup 组合式api 在setup中return 对象变量

vue3 新增属性

• 新增组合式api setup 提供我们定义初始化变量
• 新增Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。
• 新增片段 组建中允许存在多个根节点
• 允许自定义事件，自定义指令修饰符
• 创建自定义渲染器
• 支持动态的css
• SFC

vue 2变更

全局 API

• 全局 Vue API 已更改为使用应用程序实例
• 全局和内部 API 已经被重构为支持 tree-shake

模板指令

• 组件上 v-model 用法已更改，以替换 v-bind.sync
• 和非 v-for 节点上的 key 用法已更改
  在同一元素上使用的 v-if 和 v-for 优先级已更改
• v-bind=“object” 现在排序敏感
• v-on:event.native 修饰符已移除
• v-for 中的 ref 不再注册 ref 数组

组件

• 只能使用普通函数创建函数式组件
• functional attribute 在单文件组件 (SFC) 的 和 functional 组件选项中被废弃
• 异步组件现在需要使用 defineAsyncComponent 方法来创建
• 组件事件现在需要在 emits 选项中声明

渲染函数

渲染函数 API 更改

• $scopedSlots property 已移除，所有插槽都通过 $slots 作为函数暴露
• $listeners 被移除或整合到 $attrs
• $attrs 现在包含 class 和 style attribute
• #自定义元素
• 自定义元素检测现在在模板编译时执行
• 特殊的 is attribute 的使用被严格限制在被保留的 标签中

其他小改变

• destroyed 生命周期选项被重命名为 unmounted
• beforeDestroy 生命周期选项被重命名为 beforeUnmount
• default prop 工厂函数不再可以访问 this 上下文
• 自定义指令的 API 已更改为与组件生命周期一致，且 binding.expression 已移除
• data 选项应始终被声明为一个函数
• 来自 mixin 的 data 选项现在为浅合并
• Attribute 强制策略已更改
• 一些过渡的 class 被重命名
  - 不再默认渲染包裹元素
• 当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则必须指定 deep 选项
• 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的 现在被视为普通元素，并将渲染- 为原生的 元素，而不是渲染其内部内容。
• 已挂载的应用不会取代它所挂载的元素
• 生命周期的 hook: 事件前缀改为 vnode-

被移除的 API

• keyCode 作为 v-on 修饰符的支持
• $on、$off 和 $once 实例方法
• 过滤器 (filter)
• 内联模板 attribute
• $children 实例 property
• propsData 选项
• $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。
• 全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们了。