vue2和vue3双向数据绑定原剃头生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object. defineProperty()对数据举行挟制 联合 发布订阅模式的方式来实现的。
// 数据挟制：当访问大概设置 vm 中的成员的时间，做一些干预操纵 Object.defineProperty(vm, 'msg', { // 可摆列（可遍历） enumerable: true, // 可设置（可以利用 delete 删除，可以通过 defineProperty 重新界说） configurable: true, // 当获取值的时间实行 get () { console.log('get: ', data.msg) return data.msg }, // 当设置值的时间实行 set (newValue) { console.log('set: ', newValue) if (newValue === data.msg) { return } data.msg = newValue // 数据更改，更新 DOM 的值 document.querySelector('#app').textContent = data.msg } })vue3 中利用了 es6 的 ProxyAPI 对数据署理。
// 模拟 Vue 实例 let vm = new Proxy(data, { // 实行署理行为的函数 // 当访问 vm 的成员会实行 get (target, key) { console.log('get, key: ', key, target[key]) return target[key] }, // 当设置 vm 的成员会实行 set (target, key, newValue) { console.log('set, key: ', key, newValue) if (target[key] === newValue) { return } target[key] = newValue document.querySelector('#app').textContent = target[key] } })相比于vue2.x，利用proxy的上风如下
defineProperty只能监听某个属性，不能对全对象监听可以省去for in、闭包等内容来提升服从（直接绑定整个对象即可）可以监听数组，不消再去单独的对数组做特异性操纵 vue3.x可以检测到数组内部数据的厘革vue2和vue3界说数据变量和方法的改变
在vue2中界说数据变量是data(){}，创建的方法要在methods:{}中。
而在vue3中直接在setup(){}中，在这内里界说的变量和方法由于终极要在模板中利用，以是末了都得 return。setup内里没有this。
如：
<script lang="ts">import { defineComponent, ref } from 'vue';export default defineComponent({ name: 'App', setup() { //利用ref，分析这个数组就是全局在面板中可以利用了 const girls = ref(['data1','data2','data3']) const selectGirl = ref('2') //设置一个函数 const selectGirlFun = (index: number) => { //改变selectGirl的值要加value //要得到值要加value ，这些都由于利用了ref函数 selectGirl.value = girls.value[index] } //在标签中利用的变量要利用return //为什么要利用return，由于有的不须要在标签中利用的就不消return return{ girls, selectGirl, selectGirlFun } },});</script>默认举行懒观察（lazy observation）。
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这大概会在页面载入时造成显着的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
更精准的变更关照。
比例来说：2.x 版本中，利用 Vue.set来给对象新增一个属性时，这个对象的全部 watcher都会重新运行；3.x 版本中，只有依靠谁人属性的 watcher才会重新运行。
vue2和vue3生命周期钩子函数的差别
Vue2--------------vue3beforeCreate -> setup()created -> setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy -> onBeforeUnmountdestroyed -> onUnmountedactivated -> onActivateddeactivated -> onDeactivatederrorCaptured -> onErrorCapturedvue2中的生命周期
beforeCreate 组件创建之前created 组件创建之后beforeMount 组价挂载到页面之前实行mounted 组件挂载到页面之后实行beforeUpdate 组件更新之前updated 组件更新之后vue3中的生命周期
setup 开始创建组件onBeforeMount 组价挂载到页面之前实行onMounted 组件挂载到页面之后实行onBeforeUpdate 组件更新之前onUpdated 组件更新之后而且Vue3.x 生命周期在调用前须要先举行引入。
如：
import { reactive, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated,} from "vue";部分下令发生了厘革：
下载安装 npm install -g vue@cli删除了vue list创建项目 vue create启动项目 npm run serve默认项目目次结构也发生了厘革：
移除了设置文件目次，config 和 build文件夹 移除了 static文件夹，新增 public文件夹，并且 index.html 移动到 public中 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
3.0 新到场了 TypeScript 以及 PWA 的支持 |
