复习：

Vue3: 追求极致的性能, 把vue2中一些自动化的操作 转为手动操作 -- 监听器的添加

vue2: 采用 ES5 ES2009 的 defineProperty 方案, 为数据项添加监听器 需要为每个数据项添加监听, 消耗更多的资源

vue3: 采用 ES6 ES2015 的 Proxy 代理方案, 为数据对象添加代理 一次性监听多个数据项. 节省资源

采用 TypeScript 语言, 提供更加强大的 强类型 能力, 带有各种静态报错分析

• 新的语法: 变量名:类型名
• 对象类型, 提供新的关键词 interface 接口. 为对象类型制定标准

Vue3的新语法

• template中 不再要求唯一的根元素
• script  新的配置项 setup : 相当于vue2的创建周期. 数据创建时触发。 在这个周期中, 制作 数据项data, 方法methods, 监听器watch, 计算属性 computed 。最终返回到页面上。
• 数据项修改为带有监听器的 ref(): 把一个数据封装到监听器里, 底层是 defineProperty。 reactive(): 把一个 对象类型进行监听, 底层是 Proxy 。toRefs(): 把代理方案管理的对象 拆分成多个 由 defineProperty 方式监听的数据
• axios: 只能局部引入
• 组件: 同 vue2 . components 目录, props声明参数
• 生命周期: 挂载 : onMounted

一、监听器

var num = ref(10);  ---  ES5的definProperty监听

var data=reactive({count:10}) --- ES6的Proxy实现监听

两种监听方案写法不同，先在html中写两个按钮对应两个变量

 

二、路由系统

使用路由系统的router-link实现跳转的用法与vue2是相同的，不同之处在于编程式跳转。 在vue2中，各种资源都存储在vue对象中，用this.$router直接使用，但在vue3中，各种资源都必须手动引用，给按钮绑定方法，打印this，找不到$router，由此可知，$router并没有被引入到proxy里

手动引用useRouter()，添加一个$router，再利用push实现页面跳转

 路由传参：

还是这个按钮，给即将跳转的页面传递两个参数

也是一样的，没有自动的功能，只能手动添加，这里添加useRoute()，查找到参数存放的位置，放到html中就可以显示到页面上了。

 router和route的区别

•  带r是跳转的
• 不带r的是读取路由的参数

三、vuex

Vuex：全局的状态共享，把数据存放在共享的 state中

全局的变量和方法都放在index.ts中

 

 但是Vue3不支持vuex的辅助函数，Vue3兼容vue2的语法，可以用vue2的代替，写在setup外面，别忘了引用，

 如果要使用$store，还是需要用到useStore()方法，而且一定要引用。