vue

标签：vue Vue 组件 router 数据 路由

一、vue核心

1、vue简介

1.1、vue概念

动态构建用户界面的渐进式 JavaScript 框架

1.2、vue特点

采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

2、MVVM模型

2.1、简介
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，实现了数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理
2.2、Vue.js中mvvm的体现
Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新，如下：
a、Observer相当于Model层观察vue实例中的data数据，当数据发生变化时，

通知Watcher订阅者（通过Object.defineProperty将data中的属性添加到vue实例身上，

为每个添加到vue实例身上的属性都配置getter和setter，在内部它们让Vue追踪依赖。在属性被访问和修改时通知变化
b、Compile指令解析器位于View层，初始化View的视图，将数据变化与更新函数绑定，传给Watcher订阅者。
c、Watcher是整个模型的核心，对应ViewModel层，连接Observer和Compile。

Watcher将Observer监听到的数据变化对应相应的回调函数，处理数据，反馈给View层更新界面视图

3、数据代理

3.1、原理
Object.defineProperty
vue是采用Object.defineProperty的getter和setter，并结合观察者模式来实现数据绑定的。
3.2、概念
通过一个对象代理另一个对象中属性的操作（读/写）

3.3、Vue中的数据代理
a、通过vm对象来代理data对象中属性的操作
b、Vue中数据代理的好处
更加方便操作data中的数据
c、基本原理
通过Object.defineProperty()把data中所有属性添加到vm上
为每个添加到vm上的属性，都指定一个getter和setter
在getter和setter内部操作（读/写）data中对应的属性

4、Vue监测数据的原理

4.1、Vue会监测data中所有层次的数据
4.2、Vue如何监测data中对象中的数据
a、通过setter实现监测，且要在new Vue时就传入要监测的数据
b、对象中的所有属性都有专门的setter
c、对象中后加入的属性，Vue默认不做响应式处理
d、如需要给对象中后加入的属性做响应式，要使用如下API去添加对象中新的属性：
    Vue.set(target,propertyName/index,value)
    vm.$set(target,propertyName/index,value)
4.3、Vue如何监测data中数组中的数据
a、通过包裹数组更新元素的方法实现，本质上做了两件事
  调用原生对应方法对数组进行更新
  重新解析模板，进而更新页面
b、数组中的每一项没有单独为其服务的setter，所以整体修改数组中的每一项Vue不会监测，即arr[0] = …没有效果
c、如需在Vue修改数组中某个元素一定要用如下方法
使用这些数组本来的API：push（）、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）
Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)

二、vue中的AJAX

1、配置代理  ：vue.config.js

 

 

 2、配置axios

下载axios以及nprogress：npm install --save axios nprogress, 并引入到页面，

配置创建axios并配置请求拦截器、相应拦截器，并向外暴露requests

 

 

 

 

 3、配置API

配置：

使用：

 

三、vuex

1、vuex概念

专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，

对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，

且适用于任意组件间通信

2、vuex工作原理图

 

3、vuex

3.1、vuex构造

actions：
由子组件this.$store.dispatch('actions名',传递的数据）触发
actions： { action名（{commit}，数据）{...}}
mutations：
由actions中的commit('mutations名',传递的数据）触发
mutations：{mutations名（state,数据）{...}}
state：
存储数据：state：{userInfor：{}}
getters：
计算state中的数据：getters：{getters名（state）{...}}

 3.2、vuex中的模块(module)和命名空间(namespaced)

 

四、vue-router

1、概念

1.1、vue-router

vue 的一个插件库，专门用来实现 SPA 应用

1.2、SPA 应用

单页 Web 应用（single page web application，SPA）
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过 ajax 请求获得

1.3、路由

1.3.1、路由概念

一个路由就是一组映射关系（key - value）
key 为路径, value 可能是 function 或 component

1.3.2、路由分类

a、后端路由：
理解：value 是 function, 用于处理客户端提交的请求
工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据
b、前端路由：
理解：value 是 component，用于展示页面内容
工作过程：当浏览器的路径改变时, 对应的组件就会显示

2、路由组件与非路由组件区别

非路由组件放在components中，路由组件放在pages或views中
非路由组件通过标签使用，路由组件通过路由使用
在main.js注册完路由，所有的路由和非路由组件身上都会拥有$router 、$route属性
$route： 一般获取路由信息（ path query params meta等）
$router：一般进行编程式导航进行路由跳转（push replace 【还有forward（）、back（）、go（参数：可正可负）】）

3、路由跳转

 路由跳转方式
3.1、声明式导航<router-link to="/home"></router-link >
直接跳转，无需业务逻辑的处理
router-link（可以理解为a标签，可以加class修饰）【就是把a替换成router-link】

3.2、编程式导航this.$router.push/replace( )
需要处理业务逻辑，比如发送ajax请求，需要响应数据
push、replace【就是利用点击事件等配置methods，methods里面写this.$router.push("路径")（直接写路径的是无需传参数）】
push有历史记录，replace没有历史记录

4、路由守卫

4.1、守卫分类
4.1.1、全局守卫

a、前置路由守卫--router.beforeEach((to,from,next){...})
b、后置路由守卫----router.afterEach((to,from){...})

 后置路由守卫没有next
c、全局解析守卫--router.beforeResolve
4.1.2独享守卫
beforeEnter：（to,from,next）=>{...}
写在哪个路由组件配置信息中就表示哪个组件需要权限

 

 

4.1.3、组件内守卫

组件内路由守卫是在组件内写

beforeRouteEnter(to,from,next){...}
beforeRouteupdate(to,from,next){...}
beforeRouteLeave(to,from,next){...}

4.2、守卫next（）问题
next（）直接放行
next（‘/home’）放行到home路由
next（false）【停留在来的时候原来的页面】

5、缓存路由组件

include后面跟的是组件名：

 

 

当要缓存多个组件时，可以写成数组形式，include前面要加冒号：

 

 6、路由history与hash模式

 

 

 

 

五、vue ui组件库

移动端常用 UI 组件库：
  Vant https://youzan.github.io/vant
  Cube UI https://didi.github.io/cube-ui
  Mint UI http://mint-ui.github.io
PC 端常用 UI 组件：
  Element UI https://element.eleme.cn
  IView UI https://www.iviewui.co

 

标签：vue,Vue,组件,router,数据,路由
From： https://www.cnblogs.com/gs-top/p/16888546.html