Vue （Vue+Vue-router+Vuex）简单梳理-1

最新推荐文章于 2025-01-13 00:31:57 发布

Lucy-

最新推荐文章于 2025-01-13 00:31:57 发布

阅读量828

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/lm1022/article/details/114260443

版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

一，Vue（整体架构）

1，Vue的设计思想

数据驱动应用
MVVM模式的践行者（响应式，模板，渲染）

2，计算属性computed 和监听器watch

监听器适合一个数据影响多个数据，计算属性适合一个数据受多个数据影响
计算属性有缓存性
监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况

3，Vue组件化的理解

组件是可复用的Vue （VueComponent）的实例，继承自Vue。
优点：可以增加代码的复用性、可维护性和可测试性。
-使用场景：通用组件，业务组件，页面组件
组件的本质：组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM，组件的本质是产生虚拟DOM
组件的input：props，用户交互（click），slots 组件的output : emit , 视图的变更，调用全局的fn
组件内的data为什么一定要是个函数：实例化出来的根组件只有一个，你可以将它写成对象，或者是返回一个对象的函数。但是子组件不够健壮，容易在内存的地址中互相影响，data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了。

4，Vue生命周期

Vue 实例从创建到销毁的过程就是生命周期。生命周期中有多个事件钩子，让我们在控制整个 vue 实例的过程时更容易形成好的逻辑
有8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后
有嵌套组件，父子组件的生命周期的执行顺序：父beforeUpdate->子beforeUpdate->子updated->父updated

5，Vue-cli（Vue脚手架）

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create
快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 ESLint 集成、单元测试等， Vue CLI 插件的名以 @vue/cli-plugin- (内建插件) 或
vue-cli-plugin- (社区插件) 开头

6，Vue-test-utils （Vue-cli的插件）和 Jest

单元测试：指对软件中的最小可测试单元进行检查和验证
单元测试好处：自动化，重构，减少调试时间，活文档
Vue-test-utils是Vue.js 官方的单元测试实用工具库。 Jest是由Facebook开发的单元测试框架，也是Vue推荐的测试运行器之一。
Vue-test-utils在Vue和Jest之前提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。
安装：vue add @vue/unit-jest npm install --save-dev jest @vue/test-utils

二，Vue-router（路由）

1， Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本质就是建立起url和页面之间的映射关系

2，router 和 route

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

3，安装

Vue-cli：vue add @vue/router    
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)   //  当使用一个插件的时候 通过 Vue.use()

4，动态路由

响应路由参数变化：复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象，或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫
匹配优先级：谁先定义的，谁的优先级就最高。

5，嵌套路由

以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置

6，命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

7，重定向 redirect 和别名 alias

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}

//a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
//  { path: '/a', component: A, alias: '/b' }    
  ]})

8，导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
每个守卫方法接收三个参数：to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
路由独享的守卫：你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]})

9，完整导航解析流程
1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

三，Vuex（状态管理）

1， Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。安装：npm install vuex --save

2，解决的问题：
当应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

3，什么情况使用：

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
需要构建一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

4，核心概念：

State 全局状态计算属性
mapState 展开运算符

getter

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值
需要从 store 中的 state中派生出一些状态，例如对列表进行过滤并计数
和计算属性一样，会缓存 mapGetters 将 store 中的 getter
映射到局部计算属性

mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
一条重要的原则就是要记住 mutation 必须是同步函数
mapMutation

Action