VUE3对比VUE2改动知识点(区别)

vue2和vue3 对应的文件

vue2	vuex2	vue-router3	element-ui	vant2
vue3	vuex3	vue-router4	element-ui-plus	vant3

VUE2 和VUE3的区别：

Performance:（优化）

• 重写了虚拟DOM的实现（跳过静态节点，只处理动态节点）<DIFF算法>
• update性能提高1.3~2倍
• SSR速度提高了2~3倍(服务端)

Tree shaking

• 可以将无用模块“剪辑”，仅打包需要的（打包体积更小）

Fragment<空标签> 

• 不再限于模板中的单个根节点(vue2中的template中只能有一个根节点，vue3允许每一个组件template有多个根节点，相当于把多出来的那一个层级用空标签表示，不显示，同时允许多个根节点)

 <Teleport>

• 以前称为<Portal> ，译作传送门(使用Teleport标签：把当前组件中的某一部分抽离，出来单独放到另一个容器中<非#app的容器>  基于to的属性)

<Suspense>异步测试组件

• 可在嵌套层级中等待嵌套的异步依赖项   

 

<template>
  获取用户的信息是：<br />
  用户编号：{{id}}<br />
  用户姓名：{{name}}<br />
</template>
<script>
const query = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: 1, name: "hahaha" });
    }, 2000);
  })
};
export default {
  name: "AsyncTest",
  async setup () {
    let { id, name } = await query()
    return {
      id, name,
    }
  }
}
</script>

<template>
  <h2>你好世界</h2>
  <Suspense>
    <template #default>
      <async-test></async-test>
    </template>
    <template #fallback>
      loading.....
    </template>
  </Suspense>
</template>

<script>
import AsyncTest from './AsyncTest.vue'
export default {
  components: { AsyncTest },
  name: "App",
};
</script>

TypeScript

• 更好的TypeScript支持(TypeScript 可以称之为  预编译的 JS，基于TS语法写代码，最后编译为JS,TypeScript 相当于 JS来讲  最大的好处：严谨。TS一般用于 @1 开源级类库、插件、组件的开发，@2 大型项目 多人协作开发)

 Custom Renderer API

• 自定义渲染器API

• 用户可以尝试WebGL自定义渲染器

 Composition API<函数式API  组合式API>

• 组合式API，替换原有的 Options [ˈɒpʃnz] API

  • 根据逻辑相关性组织代码，提高可读性和可维护性

  • 更好的重用逻辑代码（避免mixins混入时命名冲突的问题）

• 但是依然可以延用 Options  API

 Proxy<vue3中的数据劫持>  :响应式原理不再基于 Object.defineProperty
Proxy - JavaScript | MDN

vue2是基于0bject.defineProperty实现数据劫持的(get/set)

• 需要给对象中的每一个属性分别遍历做劫持「对于后期新增的属性是没有做劫持的, vue2中可以基于$set实现新增属性的劫持」 
• 对于数组中的每一项没有做劫持「vue2中重写了数组7个方法，后期通过这7个方法修改数组中的某一项，才会让视图重新渲染」 
• 默认劫持是"浅"的, vue2自动基于递归的方式实现了深度劫持 
• ES5的API,兼容IE9及以上 +ES5的API，兼容IE9及以上>

vue3中的响应式数据，是基于ES6中的Proxy实现的 定义性质是基于实现数据劫持的(GET/Set)vue 3中的响应式数据，是基于ES6中的代理实现的

• ES6的API、不兼容IE
•  Proxy除了提供get/set监听器之外，还提供了其它大量的监听函数，当我们操作对象的时候，可以做到全方位劫持监听
• Proxy无需自己依次遍历对象的每个属性，只需要代理整个对象，则所有属性都做代理了[哪怕是后期自己新增的属性也会做代理，后期更改也会通知视图重新渲染]
• Proxy对数组的处理也很友好,vue3中直接对数组每一项做代理，后期我们操作数组每一项，也会触发视图更新,没必要重写7个方法
•  Proxy默认也只是对对象中第一层做代理，而vuz3中基于递归的方式，也实现了深层次代理