总结：vue2 和 vue3 的区别

1. 区别

　　（1）双向数据绑定原理不同，vue2利用了ES5的API Object.defineProperty()，vue3利用ES6的API Proxy

　　　　详细：vue2利用Object.defineProperty()对数据进行劫持，并且结合发布订阅模式来实现，vue3利用了Proxy对数据代理

　　　　优点：Object.defineProperty()只能监听某个属性，不能对全对象进行监听

　　　　　　　可以省去for in，闭包等内容来提升效率（直接绑定整个对象即可）

　　　　　　　可以监听数组，不用再去对数组进行特异性操作，vue3可以检测到数组内部数据的变化

　　（2）vue3支持碎片，vue2不支持

　　　　详细：vue3组件可以有多个根节点，vue2只能有一个

　　（3）vue3使用合成型API（Composition API），vue2使用的是选项型API（Options API）

　　　　详细：vue2的选项型API在代码里分割了不同的属性（data，computed，methods等），vue3的合成型API能让我们用方法（function）来分割，相比于vue2的使用属性来分组，vue3代码会更加简便和整洁

　　（4）建立数据，vue3使用setup()方法，vue2直接把数据放在data属性中

　　　　详细：vue2中数据直接放在data里，vue3中我们用setup()方法，此方法在组件初始化构造的时候触发，

　　　　　　vue3建立反应性数据的步骤：

　　　　　　1）从vue3中引入reactive

　　　　　　2）使用reactive()方法来声明我们的数据为响应性数据

　　　　　　3）使用setup方法来返回我们的响应性数据

　　（5）生命周期勾子

vue2，vue3生命周期勾子对比

vue2                        vue3                    说明
beforeCreate          ->    setup()                 组件创建之前执行的函数
created               ->    setup()                 组件创建完成执行的函数
beforeMount           ->    onBeforeMount           组件挂载到节点上之前执行的函数
mounted               ->    onMounted               组件挂载完成后执行的函数
beforeUpdate          ->    onBeforeUpdate          组件更新之前执行的函数
updated               ->    onUpdated               组件更新完成之后执行的函数
beforeDestroy         ->    onBeforeUnmount         组件卸载之前执行的函数
destroyed             ->    onUnmounted             组件卸载完成后执行的函数
----------------<keep-alive>独有的两个勾子-------------------
activated             ->    onActivated             组件被激活时执行的函数
deactivated           ->    onDeactivated           组件离开时执行的函数       

　　（6）父子传参不同，setup()函数特性

　　　　详细：

　　　　　　1）setup()函数，接收两个参数(props, context(包含 attrs, slots, emit))

　　　　　　2）setup函数是处在 befortCreate和created两个勾子之前的函数，执行 setup() 时，组件尚未被创建，所以this并不是指向vue，Vue为了避免错误的使用，直接将setup函数内部的this改成了undefined

　　　　　　3）vue3.2之前，在setup() 函数中定义的 变量和方法最后都是需要return出去的，不然无法在模版中使用

　　　　　　4）使用渲染函数：返回一个渲染函数，可以直接用在同一作用域中生命的响应式状态

　　　　注意事项：

　　　　　　1）setup() 中不能使用this

　　　　　　2）setup() 中的 props 是响应式的，props更新时，因为是响应式的，所以不能用ES6去解构，因为会消除props的响应式，如果需要解构，需要使用vue 中的toRefs 来完成

　　　　　　3）vue3传参

import { toRefs } from 'vue'

setup(props, { arrts, slots, emit }) {
  // 父传子 props，解构用 toRefs
  const { title } = toRefs(props)

  // 子传父 直接用setup第二个参数中包含的emit
  const login = () => {
    emit('login', {
      username: state.username,
      password: state.password
    })
  }
}

　　　　　　4）setup() 中使用响应性数据的时候，需要通过 .value 使用数据，但是setup()返回的对象上的property返回在模版中使用的时候，将自动展开内部值，不需要在模版中追加.value

import { ref, toRefs } from 'vue'

setup(props, { arrts, slots, emit }) {
  const num = ref(0)
  console.log(num.value)
}

　　　　　　5）setup() 只能同步不能异步

　　（7）vue3有Teleport组件，vue2没有。

　　　　详细：vue3有瞬移组件，也是一个独立组件，可以把你写的组件挂在到任何你想挂载的DOM上，所以也称为独立组件

　　　　　　如果以之前vue2的方式引入，他跟普通的组件是一样的，但是父组件的DOM结构和css都可能对组件产生影响，为了解决这种问题，我们要用Teleport，像是一个传送门，把组件传送到任何地方。

　　　　使用方法：

　　　　　　1）在根目录下的index.html文件中添加一个id节点

<div id="model"></div>

　　　　　　2）使用 to属性 挂在到DOM节点下面

<template to="#model"></template>

 

__EOF__

本文作者：cros
本文链接：https://www.cnblogs.com/liql/p/16915749.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！