Vue全家桶

Posted 2023-04-27

参考技术A 用vue那么久，你清楚vue全家桶都有谁不？
构建工具vue-cli，路由vue-router，状态管理vuex， http请求工具vue-resource，再加合适的UI组件库，就可以实现一个完整的前端工程项目。

vue-cli是快速构建应用的脚手架。
安装：npm install -g @vue/cli
创建：vue create my-project

（1）嵌套的路由/视图表
（2）模块化的、基于组件的路由配置
（3）路由参数、查询、通配符
（4）基于 Vue.js 过渡系统的视图过渡效果
（5）细粒度的导航控制
（6）带有自动激活的 CSS class 的链接
（7）html5 历史模式或 hash 模式，在 IE9 中自动降级
（8）自定义的滚动条行为

vuex是vue的状态管理模式，它采用集中式存储管理所有组件的状态，并以相应规则保证状态以可预测的方式发生变化。她比较适合中大型单页应用。它主要包括这几个部分：

State是vuex中的数据源，在页面中可以通过this.$store.state获取数据。

如果需要修改store中的值怎么办？唯一的办法就是提交Mutation。比如我们在按钮的点击事件中提交mutations中的方法来修改值。

官方不建议直接修改store中的值，而是建议我们提交一个actions，在actions中提交mutation再去修改状态值。

getter相当于vue中的computed属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变时才会被重新计算。Getters 可以用于监听state中值的变化，返回计算后的结果。

axios是一个http请求包，它基于promise，可以用在浏览器和node.js中。它可以从浏览器中创建xhr，从Node.js创建http请求，支持Promise API，转换请求数据和响应数据，自动转换JSON数据等。
安装方法：npm install axios --save

适用于移动端的有：vant、mint-ui等。
适用于pc端中后台的：ivew、Ant Design Vue、elementUI等。

助你上手Vue3全家桶之Vue3教程

参考技术A

这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档。其实 V2 到 V3 的学习成本不高，熟悉 V2 的话，看完这篇文章就可以上手 V3 。

Vue3官网

在线源码编译地址

setup 是所有 Composition API 的容器，值为一个函数。组件中所用到的数据、方法等等，均要配置在 setup 中，它会在 beforeCreate 之前执行一次，注意： V3 里 this 不再是指向 Vue 实例，访问 this 会是 undefined

尽量不要与V2配置混用

V2 配置（ data 、 methos 、 computed ...）中可以访问到 setup 中的属性、方法。
但在 setup 中不能访问到 V2 配置（ data 、 methods 、 computed ...）。
如果有重名, setup 优先。

setup不能是一个async函数

因为返回值不再 return 的对象, 而是 promise , 模板看不到 return 对象中的属性。（后期也可以返回一个 Promise 实例，但需要 Suspense 和异步组件的配合）

使用 ref 可以创建一个包含响应式数据的引用对象（reference对象，简称ref对象），可以是基本类型、也可以是对象。

语法

定义一个对象类型的响应式数据，内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作

语法

与 V2 中 computed 配置功能一致

语法

与 V2 中 watch 配置功能一致，语法有点改动

语法

和 watch 的区别是， watch 既要指明监视的属性，也要指明监视的回调。而 watchEffect ，不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性，不用写返回值。

语法

生命周期全都写在 setup 中

创建一个 ref 对象，其 value 值指向另一个对象中的某个属性

语法

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

语法

只处理对象最外层属性的响应式（浅响应式）。适用于：一个对象数据，结构比较深, 但变化时只是外层属性变化

语法

只处理基本数据类型的响应式, 不进行对象的响应式处理。适用于：一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换

语法

让一个响应式数据变为只读的（深只读），应用于不希望数据被修改时

语法

让一个响应式数据变为只读的（浅只读），应用于不希望数据被修改时

语法

将一个由reactive生成的响应式对象转为普通对象，对这个普通对象的所有操作，不会引起页面更新。

语法

标记一个对象，使其永远不会再成为响应式对象，有些值不应被设置为响应式的，例如复杂的第三方类库等，当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

语法

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

语法

实现祖与后代组件间通信，父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

语法

检查一个值是否为一个 ref 对象

语法

检查一个值是否为一个 isReactive 对象

语法

检查一个对象是否是由 readonly 创建的只读代理

语法

检查对象是否是由 reactive 或 readonly 创建的 proxy

语法

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML ，而不必求助于全局状态或将其拆分为两个组件。

语法

等待异步组件时先渲染一些额外内容，让应用有更好的用户体验

语法

将全局的API，即：Vue.xxx调整到应用实例（app）上

由于 V3 中不在存在 this ，所以 ref 的获取调整了

语法

V3 中在 for 循环元素上绑定 ref 将不再自动创建 $ref 数组。要从单个绑定获取多个 ref ，请将 ref 绑定到一个更灵活的函数上

语法

定义一个组件可以向其父组件触发的事件

使用方式修改

通过事件来监听组件生命周期中的关键阶段

语法

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；
END

往期文章

个人主页