一 vue3基础composition api,typeof,keyof

vue是渐进式框架
就是可以不全会,可以会一点用一点
vue3新特性:
破坏性变化:
迁移会出问题或者运行不了
移除:
api
为vue应用提供更好的逻辑复用和代码组织
主要替换,各个生命周期(例如),(方法),计算属性等 。把它们统一在一个setup函数里面,去组织、去复用代码
main.js中
初始化方式变了
实例获取变成一个函数
以前:new一个构造函数获得实例
现在: 工厂函数直接获取,然后通过.mount(id)直接挂载
setup
setup中最早的生命周期就是,没有和
setup中
setup中生命周期
vue2与.js中引入写法区别
vuex
双向绑定
vue2的双向绑定不太友好
vue2的双向绑定,比如直接通过数组的去修改长度是监听不到的
还有数组的方法,比如push也是监听不到的
vue2通过进行属性劫持,然后在walk方法中调用
walk中是通过.keys方法把对象中的key拿出来变成数组,然后再循环,把key一个一个的传到的方法里
然后再通过传进来的key去做属性的劫持
vue3通过proxy重写的双向绑定:
里面的prop其实就是key,它会省去for…in的操作
vue3的优势:
vue2中,每次更新diff,都是全量对比,vue3则只对比带有标记的,这样大大减少了 非动态内容的对比消耗
vite的优势:
模版插值法
例子
字符串里每个前面都加一个特殊符号(通过split和map)
模板字符串``中变量要用${ }
指令:
将对象的内容通过mount渲染到#上
更改安装vue的版本:
`yarn add vue@3.0.0`
移除
yarn remove vue
会移除node 里的包,然后会移除.json中的vue配置
脚手架 (vue cli)
官方不推荐使用vuex作为vue3.0的全局管理
vue3.0的底层是用ts写的
main.js
main.js只负责入口的工作,不负责页面的逻辑
app.vue是整个页面的根本,引入app.vue,注入所有的依赖,并挂载到#app上
app.vue是页面的根本,它负责和main.js对接,然后通过root这个中间件来调配页面和路由的切换关系
上面是整个页面的逻辑,上面就是项目的模版
如果项目中访问不到.json,那就获取不到当前vue的版本,那就会默认为vue2,
vue2不支持标签下有多个标签,app.vue中可能会报错
vue3中的下是支持多个标签的
组建中添加插槽
调用带有插槽的组件,要使用组建中的插槽的话,组件必须使用双标签
vue3中 要使用的变量一定要出去,否则无法使用
封装一个axios请求
引入axios
超时时间
如果返回的都是json格式没有什么atmr之类的返回值的话,“-Type”:“/json”
有其他返回格式的话就得通过配置,不能写死json
请求发送之前要做的都放在.use(拦截具体操作)
请求发送之后拦截.use(具体拦截内容)
上方是简单的写法,正常还需要比如:
请求报错的时候,进行二次请求
或者
一次发出多个请求,只要一个报错,后面的请求就不发送
这样的都需要两次的拦截结合,第一次需要记录所有发出请求的还没有得到响应的数据,也就是每发送一次都要去存储一下,每响应一次都要把上一次存储的请求的过程从存储器里剔除
如果有错误,要去存储器里找到这个发生接口的配置项,再次去发送二次或者三次四次的请求机制,这种就叫做请求补偿
补偿机制取决于业务
比如社交类的,几乎百分之90的页面不登陆也可以访问,所以一般问题都是业务错误或者网络问题,这就需要补偿机制给用户一个较好的体验