vue2全家桶知识点及个人理解

以下内容是个人整理的v2知识点和一些概念，帮助自己记忆的。如有错误欢迎纠正。
vue
以数据驱动视图的渐进式MVVM框架
渐进式：循序渐进的使用vue，可选择性强，可以只是用其中的一些小功能，不必完全使用。
MVVM：vm视图层 通过接口从后台m层请求数据，vm视图层和view层实现数据的双向绑定。
MVC：m:mode v:view c:控制器 数据改变控制页面也改变

vue底层原理
-原理：Object.defineProperty 通过getter和setter来劫持数据，实现数据的双向绑定
-vue
优点：虚拟dom，数据驱动，双向绑定，模块化开发，浏览器兼容好
缺点：由于是js生成的虚拟dom，不利于seo爬虫获取，首屏加载相对于静态页慢

data为什么是一个函数
是因为作用域的问题，函数有自己的作用域，这样data就是专属于这个组件的。如果是对象的话会提升。多个组件的data就会产生冲突

什么是虚拟dom
就是js动态生成的dom叫做虚拟dom，虚拟dom不会引发回流和重绘，性能更好
不同场景使用不同，看是否要频繁的触发大面积内容的更新

diff算法和key的关系
diff算法：同层对比，只要发现不一致的节点，就用新的替换旧的。
因为diff算出来的dom没有跟踪标识，当循环出来的dom列表任意一个元素被修改，就无法找到。但是当加了key之后，就相当于给每个元素都加了唯一标识，当想要修改时直接修改对应元素就行，节省性能。key值必须是唯一的，不推荐使用下标和随机数

生命周期
四个阶段八个函数，最大的争议为在哪发起ajax请求。服务端渲染在created发起。服务端只有创建阶段。
创建阶段：
beforeCreate：骨架屏占位，日志上传
Created：发起ajax请求。
挂载阶段：
beforeMounted：对一些数据进行初始化
Mounted：发起ajax请求
更新阶段：
beforeUpdate：二次对更新的数据进行修改
Updated：只能观察到更新后的数据
卸载阶段：
beforeDestroy：清除常驻垃圾，对用户离开进行提示
Destroyed
-组件初次挂载生命周期
创建阶段和挂载阶段
-父组件和子组件的生命周期
父 beforeCreate created beforeMounted
子 beforeCreate created beforeMounted mounted
父 mounted beforeUpdate
子 beforeUpdate Updated
父 Updated beforeDestroy
子 beforeDestroy Destroyed
父 Destroyed
都是在before前阶段执行子组件的生命周期
- 子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子Updated -> 父Updated
- 父组件更新过程
影响到子组件 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
不影响子组件 父beforeUpdate updated
- 销毁过程
父beforeDestroy 子beforeDestroy 子destroyed 父destroyed

内置组件
- slot 插槽
自定义组件的高级形式，多用于模板复用，动态渲染传入的内容和组件
使用场景：插件的封装，网站结构布局等
匿名插槽
上游组件内传入内容，下游组件用slot接收
具名插槽
上游组件的内容用template模板slot或者v-slot命名，下游组件用name接收
作用域插槽 && 插槽传参
下游组件自定义属性传递参数，上游组件用template模板 scoped属性接收参数
v-slot缩写 ‘#’
- keep-alive 缓存组件
凡是被它包裹的组件都会被缓存
属性：include 只缓存指定的组件 exclude不缓存指定的
生命周期
activated 缓存的组件被激活了
deactivated 缓存的组件被停用了
component 动态加载组件
必须使用is属性动静态加载组件的名称，释放了大量书写v-if和v-show的问题
- transition 动画组件
使用name属性控制动画类名的前缀，从而可以产生不同的动画效果，一般用于嵌套在路由视图组件或动态组件

nextTick
所有dom更新完毕后获取节点
在watch监听中获取color值，这个值在修改时不能被同步到视图上，就要用$nextTick过去更新后的dom节点

ref
加载普通元素上，用this.$refs.（ref值）获取到的是这个dom元素加载组件上面，用this.$refs.（ref值） 获取到的是这个组件实例，可以使用组件的所有方法
比如用在表单，获取form表单实例，就可以用ref方法清空所有表单，还可以修改dom元素的样式
这样就减少了获取dom节点的消耗

指令
html：专门渲染字符串的dom片段，底层做了防注入攻击。
text：只能渲染文本
for：可以循环 字符串 对象 数组 数字
model：数据的双向绑定，一般用于表单元素
on：缩写 @ 绑定原生事件 或者 自定义事件
bind：可以绑定原生属性，也可以自定义属性，在自定义属性上是传参方式
once：让元素的值永远保持在第一次渲染时的样子
pre：不会使用vue解析里面的内容，当字符串渲染
clock：防止闪烁，在页面中，当使用的值是ajax返回值时，那么初始为空就会导致页面闪烁。
show：控制元素的显示与隐藏。css的display：none
id：控制元素的加载与销毁。
slot：插槽的指令

监听和计算属性
都可以监听数据的变化
computed：有返回值，不受数据类型影响，不能执行异步，因为它会立即返回一个值
watch：没有返回值，可以执行异步，对引用数据类型要开启深度监听 deep:true
immediate:true 初始化执行一次

修饰符
事件的：
once 事件只执行一次
native 绑定原生事件
stop 阻止冒泡
prevent 阻止默认事件
属性的：
v-bind.sync 伪数据双向绑定
v-bind.prop 把属性转为不可见的属性
指令：
v-model.lazy 当用户失去焦点时触发
v-model.number 转为数组
v-model.trim 去掉首尾空格
按键：
13 和 enter
鼠标：
right 和 left

骨架屏优化
当页面基于数据渲染，数据尚未获取时。使用骨架屏占位

组件通信
父传子：父组件自定义属性，子组件props接收
子传父：父组件自定义事件，子组件$emit调用
父子双向：provider inject
兄弟之间：让父组件当中间人， $parent获取父组件实例 $children获取子组件实例跨级：$root 获取根实例对象

vue项目优化
组件懒加载，防抖节流，按需加载，模板化代码，事件委托，精灵图

自定义系列
自定义指令的directive
- 函数写法：里面有两个参数，element和bind 第一个是当前元素，第二个是一些属性，name Rowname value什么的
- 对象写法，有三个函数，例：
第一个函数bind，指令与元素成功绑定
第二个函数inserted，指令绑定的元素渲染在页面上
第三个函数updated，指令绑定的元素被重新渲染
每个函数中有俩参数 element和bind

mixins 混入
减少当前组件的代码体积，相当于js代码复用。但是不要在全局使用，避免出错。
如果混入里面的值和函数 跟 组件重复了，要用组件的。生命周期重复，合并掉。
使用: 组件 mixins:[name] js组件 export default name

el 和 $mount 区别
el是配置，mount是方法，el更快

Vue.set方法
因为Object.defineProperty方法的缺陷，直接操作对象或者数组中的值不能被监听到，数据改变了但是页面不会变。这时就要用set添加或者delete删除

路由底层原理
-hash
地址栏有个 ‘#’ ，但是对服务器没影响，他利用windows监听onChange事件实现的，hash值每次改变都会在历史记录中天机一条，后退按钮可以返回。改变hash值不刷新页面
获取路由信息用window.location.hash
-history
利用h5，history.pushState()来完成url跳转的，修改地址时刷新页面。
获取路由信息用window.location.history

路由传参
-query
在地址栏后 ? 后面写上参数，用this.$route.query获取参数
-params
可以在后面直接写参数，或者用params属性进行配置，获取参数用this.route.params

路由拦截器
-全局守卫
beforeEach 进入前守卫
afterEach 进入后守卫
-路由独享
beforeEnter 确认进入前
-组件守卫
beforeRouteUpdate 更新 获取动态组件字段
beforeRouteLeave 离开 对用户离开行为提示

route 和 router的区别
router是new的vueRouter的实例对象，拥有路由的全部功能。
route仅表示当前路由信息

路由跳转方式
push：向历史记录中添加
go：在历史记录中前进后退，数字
back：后退
forward：前进
replace：用当前地址切换历史记录中最后一条

路由配置方式
动态路由：/:name
嵌套路由：children
别名：alias
重定向：name属性
路由组件懒加载() => import{ ‘’ }
声明式导航和编程式导航
router-link
this.$router.push()

vuex组成部分
state
getters
mutations
actions
modules
plugins
strict

严格与非严格模式
严格 mutations只能执行同步代码，且只能在这修改state
非严格，state可以在任何地方修改，mutations可以执行异步

mutation 和 action 区别
mutation是唯一修改state的，且只能执行同步代码。
action是专门处理异步的，通过调用mutation来修改state

state和getters关系
state相当于组件中的data，getters相当于组件的computed。
getters计算state

vuex模块化
modules用于大型项目的开发，直呼赋值模块的独立独享状态
默认state和getters属于当前模块作用域下，但是mutation和action自动提升到根store下。
所以需要开启命名空间，namespace

vue - loader
可以理解为转换vue文件，提取里面的html，css，js。再交给对应的loader去处理。用途，降级