vue2和vue3的区别 - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

    这周呢主要就是整理整理学的东西，不然看的也记不住，把这些学的东西做成笔记，感觉会清楚许多，这次就把vue2和vue3的区别总结一下，明天要考四级，嗐，本来想着复习四级，结果只写了一两套题，四级这有点悬呀。

1.API

vue2:vue2使用选项类型API，选项类型API在代码里分割了不同的属性data,computed,methods等，一个逻辑散乱在文件不同的位置，导致代码可读性变乱

vue3:vue3中使用组合式API，将逻辑内容写到一起，增强了代码的可读性，还提供了逻辑复用性方案

2.生命周期

整体变化不大，但在vue3在组合式API中使用生命周期的时候，要先引入。而Vue2在选项API中可直接调用生命周期钩子。

vue2	vue3
beforeCreate
created
beforeMount	onbeforeMount
mounted	mounted
beforeUpdate	onbeforeUpdate
updated	onupdated
beforeDestory	onbeforeDestory
destoryed	ondestoryed

除了这些钩子函数，vue3还增加了onRenderTracked 和onRenderTriggered函数。

setup是围绕beforeCreate和created钩子函数去运行的，所以不需要显示去定义

3.多根节点

vue2中多根节点会报错

//vue2中存在多个节点会报错,但是vue3中支持多个节点
template>
	header>/header>
	main>/main>
	footer>/footer>
/template>
//只能存在一个根节点,需要一个div包裹
template>
    div>
		header>/header>
		main>/main>
		footer>/footer>
	/div>
/template>

4.异步组件Suspense

vue3提供的Suspense组件，有两个插槽：#default和#fallback，来确保加载完成异步内容是显示默认插槽，并将#fallback插槽用作加载状态。

Suspense常见的使用场景：

配合vue3中的defineAsyncComponent来加载异步组件时，进行loading处理

配合路由使用，当未加载完毕时不显示router-view，而是渲染fallback的内容

template>
    div class="child">
      h3>我是Child组件/h3>
    /div>
/template>

script>
import {ref} from 'vue'
export default {
  name:'Child',
  setup(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve({sum})
      },3000)
    })
  }
}
/script>
style>
.child{
  background-color:rgb(206, 225, 65) ;
  padding: 10px;
}
/style>

Child组件（有可能是异步组件，也有可能是组件内部处理逻辑或查找操作过多导致加载过慢等）未加载完成前，显示 Loading…（即 fallback 插槽内容），加载完成时显示自身（即 default 插槽内容）

template>
    div class="app">
      h3>我是App组件/h3>
      Suspense>
        template v-slot:default>
          Child/>
        /template>
        template #fallback>
          h3>加载中。。。/h3>
        /template>
      /Suspense>
    /div>
/template>

script>
// import Child from './components/Child.vue'//静态引入
import {defineAsyncComponent} from  'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue')) //异步引入
export default {
  name:'App',
  components:{Child}
}
/script>

style>
.app{
  background-color:royalblue ;
  padding: 10px;
}
/style>

Suspense组件会触发三个事件：pending，resolve和fallback。

pending：pending事件是在进入挂起状态时触发。
resolve：resolve事件是在default插槽完成获取新内容时触发。
fallback：fallback事件是在fallback插槽的内容显示时触发

5.Telport

vue3提供了Telport组件可将部分DOM移动到vue app之外的地方。比如说经常要是用的dialog弹框

template>
  button @click="isShow = true">点我弹个窗/button>
  teleport to="#teleport-target">
      //将对话框移动到了teleport-target盒子下面
    div v-if="isShow" class="mask">
      div class="dialog">
        h4>我是一个对话窗组件/h4>
        h4>我是一个对话窗组件/h4>
        button @click="isShow = false">关闭弹窗/button>
      /div>
    /div>
  /teleport>
/template>

6.响应式原理

1.vue2响应式原理基础是Object.defineProperty，通过Object.defineProperty来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调

Object.defineProperty基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象

2.vue3响应式原理基础是Proxy相较于vue2，提供语言全范围响应能力，消除了局限性

3.差异如下：

vue2

Object.defineProperty，不具备监听数组的能力，需要重新定义数组的原型来达到响应式

Object.defineProperty无法监测到对象属性的添加和删除

由于vue会在初始化实例时对属性执行getter和setter转化，所有属性必须在data对象上才能让vue将它转化为响应式

深度监听需要一次递归，对性能影响较大

vue3

基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除

不需要一次性遍历data的属性，可以显著提高性能

7.TypeScript支持

vue3由typeScript重写，相对vue2有更好的typeScript的支持

最后，vue3比vue2还新增了响应式的API（reactive、ref等），响应式侦听（watchEffect）等

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net