Vue必懂的知识点

把本身的学习使用记录在本地电脑，此次整理出来分享一下。我的认为都是平时工做当中用到的比较多的。但愿对大家有帮助。

基础复习

跨域： 域名、端口

一、跨域是浏览器之间的， 由于服务器之间是不存在跨域的，因此，配置代理以后，浏览器先发给代理服务器，而后 代理服务器去跟接口交流 不存在跨域了。 二、 多个请求地址，就在proxy那配置 多个对象就好了。

负载均衡

只须要在ngix中添加一个 配置就能解决。

options的根属性

• el:目的地(string||DOM元素)
• template 模板
• data是一个函数,return一个对象, 对象中的key data中的属性...在dom中直接用，在js中 this.xxx
• components: key是组件名，value是组件对象
• methods: 通常用来配合 xxx事件
• props: 子组件接收的参数设置 ['title','name']

指令

• v-if: (留坑:<!----> 插入\移除 ) 和 v-show: (添加样式:display:none)
• v-else-if/v-if: 必须和v-if是相邻的元素
• v-bind/v-on: bind是给属性赋值, v-on 绑定事件
• v-bind:单项数据流(vue -->-html): 对象、数组、三目运算、绑定内联样式
• v-model:双向数据流(vue --> html --> vue):
  v-model 指令在 <input> (<input> 标签有多种类型，如 button、select 等等)及 <textarea> 元素上进行双向数据绑定。但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 区别详情

附加功能: 过滤器&监视改动

• 过滤器 能够给 数据显示 进行 添油加醋

<!-- 在双花括号中 -->
{{ message | filterA }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | filterA"></div>
复制代码

1. 组件的选项中定义本地的过滤器： filters: {filterA: function (value) {return value}}
2. 建立 Vue 实例以前全局定义过滤器： Vue.filter('filterA', function (value) {return value})

• 监视单个(data)watch 官方详解

• {{ watchfn1: 'xxx' }} //监视xxx并经过watchfn1函数处理输出
• key是属于data属性的属性名,value是监视后的行为
• 基础类型 简单监视、复杂类型 深度 监视

• computed(计算属性) 监视多个(data) 官方详解

• 全局： 组件/过滤器 让你们直接用 全局不带s
• 过滤器： function(原数据,参数1,参数2){return 结果;} 调用 {{ '原数据'| 过滤器名(参数1,参数2) }}
• watch：单个监视
• computed： 群体监视

slot

• 内置的组件

vue响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例做为 data 选项，Vue 将遍历此对象全部的属性，并使用 Object.defineProperty 把这些属性所有转为 getter/setter。 这些 getter/setter 对用户来讲是不可见的，可是在内部它们让 Vue 可以追踪依赖，在属性被访问和修改时通知变动。 每一个组件实例都对应一个 watcher 实例，它会在组件渲染的过程当中把“接触”过的数据属性记录为依赖。以后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件从新渲染。

• 注意：属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的，由于 Vue 会在初始化实例时对属性执行 getter/setter 转化。

异步更新队列 (重灾区)

由于Vue 在更新 DOM 时是异步执行的。若是你想基于更新后的 DOM 状态来作点什么，这就可能会有些棘手。 为了在数据变化以后等待 Vue 完成更新 DOM，能够在数据变化以后当即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})
复制代码

vue双向数据绑定原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

MVVM做为数据绑定的入口，整合Observer、Compile和Watcher三者，经过Observer来监听本身的model数据变化，经过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通讯桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变动的双向绑定效果。

Vue实现这种数据双向绑定的效果，须要三大模块：

Observer：可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者 Compile：对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 Watcher：做为链接Observer和Compile的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数，从而更新视图

vue生命周期的执行过程

首先建立一个vue实例，Vue()； 在建立Vue实例的时候，执行了init()，在init过程当中首先调用了beforeCreate。

• beforeCreate：初始化了部分参数，若是有相同的参数，作了参数合并，执行beforeCreate；el和数据对象都为undefined，还未初始化；

• created：初始化了 Inject、Provide 、props、methods、data、computed和watch，执行created ；data有了，el尚未；

• beforeMount：检查是否存在el属性，存在的话进行渲染dom操做，执行beforeMount；$el和data都初始化了，可是dom仍是虚拟节点，dom中对应的数据尚未替换；

• mounted：实例化 Watcher,渲染dom，执行mounted；vue实例挂载完成，dom中对应的数据成功渲染；

• beforeUpdate：在渲染dom 后，执行了mounted 钩子后，在数据更新的时候，执行 beforeUpdate；

• updated：检查当前的watcher列表中，是否存在当前要更新数据的watcher，若是存在就执行updated；

• beforeDestroy：检查是否已经被卸载,若是已经被卸载,就直接return出去,不然执行beforeDestroy；

• destroyed：把全部有关本身痕迹的地方，都给删除掉；

---

组件传值

父传子

1. 在调用组件的时候 绑定一个属性，此属性就能够在 子组件中获取到 <fu-component v-bind:users="users"></fu-component>
2. 在子组件中获取并使用: props: ["users"], 这样就可使用了:<div>User {{ users }}</div>

总结:

• 父用子 先有子，声明子, 使用子。
• 父传子 绑定属性, 子声明(接收), 子直接用。

子传父$emit

• 在子组件注册 this.$emit("eventName","子向父传 值"); 再父组件上 v-on:eventName="xxx($event)".
• 在eventName事件中就能够写逻辑代码了.

兄弟组件通讯

跨多层级组件通讯

1. provide & inject 父组件中经过provider来提供变量，而后在子组件中经过inject来注入变量。不论子组件有多深，只要调用了inject那么就能够注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件均可以调用。
2. eventBus模式 而若是两个组件不是父子关系呢？这种状况下可使用中央事件总线的方式。新建一个Vue事件bus对象，而后经过bus.$emit触发事件，bus.$on监听触发的事件。

• 避免 this.$parent

Vue.js 支持组件嵌套，而且子组件可访问父组件的上下文。访问组件以外的上下文违反了 基于模块开发 的 第一原则 。所以你应该尽可能避免使用 this.$parent 。

任意传值使用 vuex

已下有详细讲解

---

Vue路由

• 首先安装路由 npm install vue-router
• main.js 使用路由 Vue.use(VueRouter)
• 配置路由:const router = new VueRouter({ routers: [ {path: "/", component: Home}],//配置路由地址 mode: "history" //去除# 配置(发布后刷新404的话就须要服务器配置WEB-INF) })
• 同时在使用的地方加上 <router-view></router-view>
• a标签会从新加载页面，因此 使用 <router-link></router-link>标签
• jsonplaceholder.typicode.com 在线json接口

参数传递

1. "动态路径参数"(dynamic segment)

• 路由 参数的声明: { path: '**/user/:id**', component: User }
• 参数的获取(使用)： this.$route.params.id

2. 捕获全部路由

• path: '*': 会匹配全部路径
• path: '/user-*' : 会匹配以 /user- 开头的任意路径.$route.params 内会自动添加一个名为 pathMatch 参数.

3. query传参

• path:'/componentsB' query:{que:'我是经过query传到组件B的参数'} 页面经过this.$route.query来获取参数

精讲路由

路由的跳转

一、第一种 router-link 声明式

• <router-link to="name"> </router-link> tag属性 可自定义 显示标签； :to="{name:'xxx',params:{key:value}}" 这种写法就是 根据路由定义的 name来动态获取跳转路由 {{this.$route.params.username}} 获取路由参数

二、第二种 编程式

this.$router.go(-1);   //跳转到上一次浏览的页面

 //不会向 history 添加新记录，而是跟它的方法名同样 —— 替换掉当前的 history 记录。
 this.$router.replace('/index');
 this.$router.replace({name: 'routerNmae'});    //指定跳转到路由name

 this.$router.push('/index');   //经过push跳转
 this.$router.push({name: 'routerNmae'});   //经过push跳转，新增history记录
 // 命名的路由
 router.push({ name: 'user', params: { userId: '123' }})-> /user/123
 // 带查询参数，变成 /register?plan=private
 router.push({ path: 'register', query: { plan: 'private' }})

复制代码

二级路由 — 路由嵌套

通常都用做导航

• 一、依然在 路由.js 中import 页面路径
• 二、在须要展现二级的 path中 配置 {path:'/', name:'index', meta:{title:'主页',}, component:index, children:[{path:'/index/xxx',name:"erjiLink",component:routerName}]}
• 三、配置 redirect:'/默认显示路径' -- 重定向

导航守卫

完整的导航解析流程

全局守卫

• 全局前置守卫 使用更多(登陆拦截) router.beforeEach((to, from, next) => { // ... })

路由独享的守卫

​routes: [ {path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ...**进入该页面以前todo** } } ]

组件内守卫

• beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用，不能 访问 this。可是,next(vm => { // 经过 **vm** 访问组件实例 })
• beforeRouteUpdate (2.2 新增)：在当前路由改变，可是该组件被复用时调用
• beforeRouteLeave：导航离开该组件的对应路由时调用

完整的导航解析流程（路由守卫）

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用建立好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
复制代码

---

组件结构化

按照必定的结构组织，使得组件便于理解。

<template lang="html">
    <div class="Ranger__Wrapper">
        <!-- ... -->
    </div>
</template>

<script type="text/javascript">
  export default {
    // 不要忘记了 name 属性
    name: 'RangeSlider',
    // 组合其它组件
    extends: {},
    // 组件属性、变量
    props: {
        bar: {}, // 按字母顺序
        foo: {},
        fooBar: {},
    },
    // 变量
    data() {},
    computed: {},
    // 使用其它组件
    components: {},
    // 方法
    watch: {},
    methods: {},
    // 生命周期函数
    beforeCreate() {},
    mounted() {},
};
</script>

<style scoped>
  .Ranger__Wrapper { /* ... */ }
</style>

复制代码

优化组件

检查全部的事件。子组件向父组件通讯通常是经过事件来实现的，可是大多数的开发者更多的关注于 props 从忽视了这点。 Props向下传递，事件向上传递！ 。以此为目标升级你的组件，提供良好的 API 和 独立性。 当遇到 props 和 events 难以实现的功能时，经过 this.$refs 来实现。 当须要操做 DOM 没法经过指令来作的时候可以使用 this..$ref 而不是 JQuery , document.getElement*,document.queryElement 。

提供组件 API 文档

在模块目录中添加 README.md 文件： 在 README 文件中说明模块的功能以及使用场景。对于 vue组件来讲，比较有用的描述是组件的自定义属性即 API 的描述介绍。

状态管理器 教程

state: 存储数据

getter: 获取store 属性方法

mutatuon: 更改 Vuex 的 store 中的状态的惟一方法是提交 mutation,相似于事件。

action: Action 提交的是 mutation，而不是直接变动状态。

若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。 确实是如此——若是您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。

这个状态自管理应用包含如下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入致使的状态变化。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地获得高效更新。
复制代码

你不能直接改变 store 中的状态。改变 store 中的状态的惟一途径就是显式地提交 (commit) mutation。这样使得咱们能够方便地跟踪每个状态的变化，从而让咱们可以实现一些工具帮助咱们更好地了解咱们的应用。

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地获得高效更新。

• 你不能直接改变 store 中的状态。改变 store 中的状态的惟一途径就是显式地提交 (commit) mutation。这样使得咱们能够方便地跟踪每个状态的变化，从而让咱们可以实现一些工具帮助咱们更好地了解咱们的应用。

经过 store.state 来获取状态对象，以及经过 store.commit 方法触发状态变动：

store简单状态管理起步使用

• this.$store.state.products;// 获取 store中的数据
• getters:Getter 会暴露为 store.getters 对象，你能够以属性的形式访问这些值：

**store.js 中定义**
getters: {
  // ...1经过属性定义
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  },
  // ...2经过方法定义
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
** 咱们能够很容易地在任何组件中使用它：**
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount; //经过属性访问
    store.getters.getTodoById(2) //经过方法访问 -> { id: 2, text: '...', done: false }
  }
}
复制代码

mapGetters 辅助函数

仅仅是将 store 中的 getter 映射到局部计算属性：

computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ]).
  }

复制代码

Mutation

更改 Vuex 的 store 中的状态的惟一方法是提交 mutation,相似于事件。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变动状态
      state.count++
    }
  }
})
//要唤醒 mutation handler
store.commit('increment')

复制代码

---

登陆成功以后重定向到redirect

watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  
  //登陆成功方法里
  this.$router.push({ path: this.redirect || '/' })
复制代码