关于Vue的整理(随时更新)

关于Vue

1、Vue.js目前最火的的一个前端框架，三大主流前端框架之一。
2、Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。
3、提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

关于MVVM

1、前端视图层的概念，主要把每个页面分成了M（Model）、V（View）、VM（VM ViewModel）。VM是其中核心，M和V间的调度者。
2、M，保存的是每个页面中单独的数据（比如要渲染页面表格，ajax请求到后台的你个数组，此数据即为M）。
3、V，每个页面的html结构。
4、VM，一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。
5、前端中使用MVVM思想，主要让开发更方便，MVVM提供了数据的双向绑定（由VM提供）。

Vue底层原理和双向绑定

双向绑定原理:Object.definProperty
vue:优点:虚拟dom,模块化开发,数据驱动,双向响应，浏览器统一兼容。
缺点：由于是js生成的虚拟dom,不利于seo爬虫爬取,首屏加载相对于静态页面慢。
问题：vue页面中data数据打印出来是更新后的数据，页面未显示
解决：使用$.set,vue.set强制绑定，或者用nexttick刷新
原因1：有时页面初始化时没有选项值，后来页面变化，data值刷新，页面值没有跟着变化

data为什么是函数

因为组件的data会提升,而根实例上的data是对象,会导致一个合并。把data变成函数,以调用的方式来使,避免了覆盖和冲突
在入口页面App.vue中的data是没有return的，其他页面的data数据是有return，目的就是为了防止页面数据混淆。

diff算法与key

同层对比,只要发现不一样的节点就会用新的dom替换旧的dom。正是因为diff算出来的虚拟dom没有跟踪标识,当一个循环出来的虚拟dom列表中
任意一个元素被修改,diff算法没办法找到它,只能重新循环渲染一份新的dom。加了key之后,每个dom有了自己唯一的标识,这样修改的时候可以
精准的找到并修改,从而节省了性能。所以,key的值必须唯一,而且不可以用随机数,用时间,不建议用下标

一般的for循环会要求写上key值，因为key值是可以标注组件的唯一性，为了区分各个组件，从而更高效的更新组件，vue中在for循环中如果没有写key值会自动给循环加上key值，后在控制台报警告

vue的生命周期

下面展示一些 内联代码片。

beforeCreate(){
        //页面未加载时的骨架屏来占位
        //打开页面时候的日志上传
        // 打开页面的埋点事件
    },

create(){
        //发起ajax请求，【不推荐】因为ajax异步，生命周期同步
        //在服务器端渲染的时候，这个函数是最后一个生命周期
        //DOM元素未渲染，在此节点使用ref取DOM元素会报错
    },

    beforeMount(){
    	// 挂载阶段
        // 可以对一些数据进行格式化
    },

    mounted(){
        // 发起ajax【推荐】前端项目大多数都是运行在浏览器，极少数是服务器渲染
        // 可以取DOM元素，页面渲染完成
    },

    beforeUpdate(){
	    // 更新阶段
        // 可以二次对数据进行修改
        // 在页面更新前的操作
    },

    updated(){
        // 只能观察到更新的数据
    },

    // 销毁之前
    beforeDestroy(){
        //清除常驻内存的垃圾
        //对用户的离开行为进行提示
        // 清除计时器或者一些其他操作
    },

    destroyed(){
        
    }

vuex

什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

vuex的好处

1、数据的存取一步到位，不需要层层传递

2、数据的流动非常清晰

3、存储在Vuex中的数据都是响应式的

vuex的五个模块

state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）

mutations ： 使用它来修改数据(类似于methods)

getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

actions： 发起异步请求

modules： 模块拆分

vuex高版本和低版本有较大的差异，在运行项目时注意自己的vuex版本

向vue中注册vuex

导出vuex

import Vue from 'vue'
import Vuex from 'vuex'
​
Vue.use(Vuex)
​
const store = new Vuex.Store({
  state(){
    return {
      // 就是公共的数据，所有的组件都可以直接使用
      count: 100
    }
  }
})
export default store

// 省略其他
// 1. 导入store
import store from './store' 
​
new Vue({
  // 省略其他...
  store // 2. 注入Vue实例
})

访问数据仓库store

this.$store.state.属性名来访问

修改数据仓库store

this.$store.commit(‘mutation名’, 实参)

路由router

路由的种类

路由一般有hash路由history路由
区别：
1.hash路由在地址栏URL上有#，而history路由没有会好看一点
2.hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，所以改变hash不会重新加载页面，所以这也是单页面应用的必备
3.history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法（需要特定浏览器的支持），它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。

路由守卫

beforeEach 前置守卫
affterEach 后置守卫
beforeResolve 解析守卫
都带三个参数
to 表示要去哪里
from 表示从哪里来
next 表示是否方向

next(false) 表示不能通过
next（‘/login’）表示跳转到登录页面
不写next()默认是通不过的，此时也不能进入页面。

跳转路由带参方式

三种

this.$router.push({path:"index/" +‘携带的参数’,});

this.$router.push({path:"index",
        query:{
          name: '参数'
        }
      });

 this.$router.push({path:"index",
       params:{
         name: ‘参数’
       }
     });
     ```