vue简单总结复习回顾

最新推荐文章于 2022-07-15 22:38:30 发布

阡陌路人

最新推荐文章于 2022-07-15 22:38:30 发布

阅读量397

点赞数

分类专栏： vue前端框架文章标签： vue.js

本文链接：https://blog.csdn.net/Iwokei/article/details/106384494

版权

vue前端框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue全家桶

vue-cil + vuex（状态管理） + vue-router（路由） + vue_resource（已停止更新，用axios代替） || axios（ajax请求） + mint-UI(移动端UI框架库) || element-ui(饿了么公司PC端UI框架库)

vue的生命周期

开始创建 - 初始化数据 - 编译模板 - 挂载Dom - 渲染 - 更新 - 渲染 - 销毁。

vue的生命周期钩子函数

beforeCreate：在开始创建一个vue实例后，只有一些默认生命周期钩子和函数，执行beforeCreate时，data 和 methods 中的数据方法都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法。
create：data中的数据和methods中的方法初始化好了，最早可在这里操作
beforeMount：编译好模板，未挂载到页面中，页面还是旧的
mounted：Vue实例化初始化完成，脱离创建阶段，进入运行阶段，可在这时进行操作dom节点
beforeUpdate：页面数据是旧的，data中是更新后的，未完成同步
updated：同步
beforeDestory：进入销毁阶段，这个时候所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还未被销毁
destroyed：销毁，不可用

在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能。

注意：第一次加载页面会触发以下钩子

beforeCreate， created， beforeMount， mounted

父子组件生命周期顺序

加载渲染过程

beforeCreate（父）–created（父）- beforeMount（父）-beforeCreate（子）- created（子）- beforeMount（子）- mounted（子） -mounted（父）

父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted

子组件更新过程

beforeUpdate（父） - beforeUpdate（子）-updated（子）- updated（父）

父组件更新过程

beforeUpdate（父）- updated（父）

销毁过程

beforeDestroy（父）- beforeDestroy（子）- destroyed（子）- destroyed（父）

总结：

1.类似于俩个for循环嵌套，进入内部执行完子组件后再执行父组件。
2.父—子----父
3.更新阶段，父组件可直接更新。

注意：vue组件的引入有俩种方式，会对父子组件生命周期造成影响

一、同步引入（顺序同上）

例子： import Page from '@/components/page'

同步引入时生命周期顺序为：父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted

二、异步引入（顺序如下）

例子：const Page = () => import('@/components/page')
或者： const Page = resolve => require(['@/components/page'], page)

异步引入时生命周期顺序：父组件的beforeCreate、created、beforeMount、mounted --> 子组件的beforeCreate、created、beforeMount、mounted

vue-router

俩种（其实有三种）模式 hash和history
三种钩子函数
博主其他的博文中

vuex状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
小型项目不需要vuex，，使用 Vuex 可能是繁琐冗余的。

1.在src创建 store 文件夹，里面添加一个 index.js 来存储共享数据。
2.在 main.js 中引入 store文件，并在 Vue 实例中注入 store 。

在这里插入图片描述

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

在这里插入图片描述

使用vuex的理解：vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。
如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

核心概念

State - Getter - Mutation - Action - Module

State 单一状态树

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。

定义:state(vuex) ≈ data (vue)

vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.

state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.
如果你用data去接收$store.state,不能及时响应更新

mapState 辅助函数

getters 从State 派生的数据

mapGetters 辅助函数

mutations 必须同步

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
在这里插入图片描述

Action 使其包裹mutations，使之可以异步

ction 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

Module 模块

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

文档真香

总结：

vuex是一个状态管理模式，核心就是 store（仓库）。
–state（数据）–显示在----view（视图，页面上）----触发事件----actions（改变状态事件）- -----state（数据）–
五个属性 state数据源，getter派生数据，mutation更改状态，同步，action包裹mutation，使其可以异步，module模块化。

父子组件传递值：

父----传------子：prop
子----传------父：$emit
同级：bus

let bus = new Vue()
Vue.prototype.bus = bus

…
或者用vuex状态管理传值(非父子时较好）

vue-resource（被取代）

Vue.js的插件提供了使用XMLHttpRequest 或 JSONP进行Web请求和处理响应的服务。
vue-resource像 jQuery的 $,ajax，用来进行数据交互。主要用于发送ajax请求。

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
1.在浏览器中发送XMLHttpRequests请求
2.在node.js中发送http请求
3.支持Promiss API
4.拦截器请求和响应
5.转换请求和响应数据
6.取消请求
7.自动转换JSON数据
8.客户端支持保护安全免受CSRF/XSRF攻击