vue3 基础

安装脚手架

 

绑定原理

vue2 绑定原理：访问器属性 + 虚拟DOM树

但是访问器属性只能在首次创建new vue()对象时初始就有的属性，添加监视（访问器属性）。1.今后动态添加进来的成员，就无法自动添加访问器属性，也就无法自动得到监视；2.无法给索引数组的数字下标添加访问器属性；结果在vue 程序中后添加成员，或通过下标修改索引数组中的元素值，页面都不自动更新。

 vue3 中的绑定原理（解决2中的以上两点缺点）：

ES6 的Proxy 代理对象，proxy在目标对象的外城搭建了一层拦截，外界对目标对象的所有操作，都必须通过这层拦截。

proxy优点 == 对象内部所有现有属性自动被监视，而且后添加的属性，一进入对象就被监视。缺点 == 兼容性问题

数组：

 对象：

 vue2 对比vue3 变化：ES6的proxy 代替了访问器属性

脚手架的变化

main.ts 中的变化：

// 1.替代了new Vue() ,因为 vue3 更倾向于函数式编程，而不是面向对象式编程

import {createApp} from 'vue' // 用于创建vue Vue对象
import App from './App.vue'  // 相当于旧的脚手架中的容器
import router from './router'  
import store from './store'  
import axios from 'axios';  // vue3中可以不用非要放到vue原型中，靠模块化开发的引入也可使用
axios.defaults.baseURL = '/'

createApp(App).use(store).use(router).mount('#app')  

页面组件内的变化