Vue 项目知识点 记录

1，vue的常用指令

v-text 用来解析js表达式 底层原理用的innerText v-text 等价与 {{}}

v-html 底层原理 innerHTML v-html 简写 {{{}}} vue1.0中起作用

v-show 元素的显示隐藏 值：布尔值 true 显示 false 隐藏 默认值为false 底层原理是操作元素 的display属性
v-if 元素的显示隐藏 用来做条件判断 底层原理是操作元素的移除和新建
v-else-if && v-else 前面必须要有v-if v-else-if
v-else不需要表达式的结果

v-bind 绑定元素的属性 简写 :属性class id title src value style....

vue中的事件绑定用 v-on:事件名称 简写 @事件名称
修饰符:
stop 阻止冒泡
prevent 默认事件
enter 回车
once 只绑定一次 非form表单外
$event 如果在vue中需要使用事件对象了 需要在函数中传递形参$event

v-for 遍历数组

v-model实现一个双数据绑定 v-model使用的时候要注意只能给form表单使用
底层的原理 Object.defineProperty getter setter ES5提出的 (看博客)
proxy ES6

v-pre 不需要解析表达式 v-cloak v-text {{}} 区别 v-once 只解析一次
v-text 等价与 {{}}

自定义指令 Vue.directive() 指令名称 指令实现的函数 directives 自定义组件

2，v-model 的理解 双向绑定的原理

v-model实现一个双数据绑定 v-model使用的时候要注意只能给form表单使用
底层的原理 Object.defineProperty getter setter ES5提出的 (看博客)
proxy ES6

双向绑定的原理：使用ES5提供的object.definePropety()方法，监控对数据的操作，从而可以自动触发数据同步，并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都惊醒一次监测。

3，vue的自定义指令

自定义指令 Vue.directive() 指令名称 指令实现的函数 directives 自定义组件

4，computed 和 watch 的区别

computed 计算属性 通过属性计算得来的属性
computed:专门用来做计算属性
1、computed用来进行属性的计算
2、computed里面的方法必须要有一个返回值
3、computed里面的方法在调用的时候是不需要加()的
只要data中的属性发生了改变那么就会自动执行computed里面的方法
计算属性只要属性发生改变那么就会执行computed里面的方法，但是如果属性没有方法改变方法是不会执行 的，计算的结果会从缓存当中读取

watch 监听属性的变化
1、watch里面都是存放着属性的方法 方法的名称就是需要监听的属性的名称
2、watch里面的方法是不需要调用的，只要属性发生了改变那么watch就会被调用
3、watch里面的函数触发的时候(只要属性发生了改变的时候)会接受到2个值 一个值是新值 一个值是旧值
4、watch如果需要进行深度监听的时候(引用数据类型监听的时候) 需要在当前对象中 书写一个函数handler 以及deep:true 进行深度监听
例子：
watch:{
obj:{
handler(newval){},
deep:true
}
}

5，过滤器

过滤器：过滤数据
全局 Vue.filter()
参数1：过滤器的名称
参数2：过滤器实现的函数
参数是需要过滤的数据
使用的时候通过管道进行使用 |
局部 filters

6，vue的生命周期

生命周期 钩子函数
一个组件从创建到销毁的过程就是生周期
beforeCreate:创建前
1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading
2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问

created:创建后
1、当beforeCreate执行完毕以后，会执行created. 在当前函数中我们可以访问到data中的属性
2、当前生命周期函数执行的时候会将data中所以的属性和methods身上所有的方法添加到vue的实例身上，同时会将data中所有的属性添加一个getter/setter方法
3、如果需要进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用

beforeMount:挂载前
(渲染)
render函数初次被调用---->数据和模板没有进行相结合，同时还没有渲染到html页面上
渲染前data中数据最后的修改

mounted:挂载后
1、数据和模板进行相结合，渲染成真实的DOM结构
2、在当前生命周期函数里面我们可以访问到真实的DOM结构,
3、在vue中我们可以通过$refs来访问到真实的DOM结构 4、ref类似与id一样 值必须是唯一的 访问的时候我们可以通过this.$refs.属性

beforeDestroy:销毁前
销毁之前还可以访问到DOM结构 以及相关的数据(data)
在这个生命周期函数中我们可以将绑定的事件进行移除

destroyed:销毁后
在这个生命周期函数中会将数据和模板之间的关系断开(不是你的做的)
在这个生命周期函数中我们还是可以访问到data中的属性
但是访问不到真实的DOM结构了

beforeUpdate:更新前
只要data中的属性发生了改变，那么这个生命周期就会执行，render函数再次会执行
在这个生命周期函数中我们可以对数据进行最后的修改，同时也可以访问到最新的DOM结构和数据

updated:更新后
在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据

实例方法
vm.$mount() 绑定el 优先级 Vue中的el优先级要比$mount高
vm.$destroy() 销毁组件 vm.$forceUpdate() 强制更新

7，vue的组件 vue的组件传值 组件封装

组件：页面上的任何一部分都是组件
包含：html css js
作用：复用
组件创建的方式：
1、全局组件
Vue.component()
参数1:组件的名称 注意：组件的名称一般首字母大写 为了区分标签和组件的区别
参数2:组件的配置项
new Vue构造函数中有什么属性那么参数2中就有什么属性

不同的是
1、配置项中多了一个属性 template:当前组件的模版文件 类似于HTML文件 其实就是
当前文件的布局
2、data从对象变成了函数
使用方式 直接将当前的组件名称当做标签使用即可
局部组件 components

组件传值
父->子
1、当子组件在父组件中当做标签使用的时候，给子组件传递一个自定义属性 值为想要传递的数据
2、在子组件中通过props进行接收,props是用来专门接收外部数据
3、props接收的方式有2种 一种是数组 一种是对象
区别：对象可以限制数据的类型

子->父
1、当子组件在父组件中当做标签使用的时候，如果子组件需要给父组件传递数据的时候需要在子组件中定义一个
自定义事件 事件函数名称是不需要加()的
2、在子组件中通过this.$emit触发自定义事件 将需要传递的参数 通过emit的第二个参数进行传递

非父子组件传值
通过创建公共的Vue实例对象 将实例对象绑定在Vue的原型身上即可
传值的一方掉$emit() 接受值的一方调用$on()

封装Vue组件的过程？
1、组件的复用性
2、组件需要暴露的API

8，keep-alive slot插槽 的理解

keep-alive 内置组件
如果组件需要进行缓存的时候只要在需要缓存的组件标签外部加上一个内置组件keep-alive 那么这个组件就可以进入缓存状态
keep-alive会使组件增加2个生命周期函数 一个是activated(活跃状态) deactivated(缓存状态)
keep-alive会有3个属性
include 包含哪些组件进入缓存
exclude 排除哪些组件进入缓存

max:最多可以缓存多少个组件
值的类型:字符串 也可以是正则
如果是正则表达式的时候需要将属性进行绑定

Keep-Alive的益处

• 1.减少CPU使用：创建一个新的TCP链接会消耗一些资源，例如CPU和内存的使用。使链接保持存活的时间长一点可以避免频繁的创建新链接，从而减少资源使用。

• 2.网页加载速度：使用同一个链接来加载多个文件可以是网页加载的快点。

• 3.HTTPS：https非常消耗资源，所以强烈建议对https开启keep-alive，并尽可能使用HTTP/2进行一些调整。

slot插槽 slot是一个内置组件
1、最基本使用
当组件当做标签使用的时候,如果在组件标签内部嵌套一些标签的时候，这些元素是无法进行显示的
如果需要进行显示的话 需要在组件内部通过slot进行接收 slot会将所以标签在同一个位置全部进行接收显示
2、命名插槽
好处：可以增加插槽的灵活性
在组件标签内部属性书写标签的时候 给标签添加一个slot属性 值为插槽的名称
在组件内部通过slot进行接收 接收的同时将name属性添加到slot插槽中去 name的值为插槽的名称

3、作用域插槽：带参数的插槽
当组件当做标签使用的时候 如果需要将插槽中的数据使用组件内部的数据的时候 需要在组件标签内部加一个
template标签 属性为scope 值任意值 用来接收当前组件传递过来的数据
使用的时候通过 属性值(props).属性(这个属性来自于组件内部绑定的属性)(val)

组件内部

9，vue路由传参 路由解耦 路由守卫

1、动态路由
a、在配置路由的时候需要在路径后面加上传递参数的属性 属性前需要加: path:"/details/:id/:name"
b、参数的接受：在组件内部通过this.$route.params进行接收
c、路由跳转: 通过绑定to属性 进行路由的跳转 在跳转过程中将需要传递的参数通过路由路径进行传递

2、query传值
1、不需要在路由中做配置
2、在做路由跳转到的时候通过query的方式将参数拼接过去 ?
3、接收this$route.query进行接收

3、编程式导航
this.$router.push 跳转 this.$router.back 后退
this.$router.forward 前进 this.$router.go
this.$router.replace 替换
4、路由解耦
只适用于动态路由
在路由的配置项中定义props 为true
在接收路由参数的组件中通过props进行接收

路由解耦 只适用于动态路由
在路由的配置项中定义props 为true
在接收路由参数的组件中通过props进行接收

路由守卫 路由钩子函数
路由进入之前和离开需要做的一些验证
to:到哪个路由的信息
from:从哪个路由来的一些信息
next:接下需要执行的一些操作

beforeRouteEnter: 注意 在当前函数中是无法获取this的指向 如果想要使用则通过next的回调使用
1、登陆的验证
2、热力图
3、管理员与非管理员权限页面
4、会员等级权限
5、地理位置信息权限
beforeRouteUpdate

beforeRouteLeave
1、用户支付
2、答题系统
3、用户信息保存
4、退出登陆

全局守卫 beforeEach

# v-if 和 v-show 的区别

v-show 元素的显示隐藏 值：布尔值 true 显示 false 隐藏 默认值为false 底层原理是操作元素的display属性
v-if 元素的显示隐藏 用来做条件判断 底层原理是操作元素的移除和新建

# 单向数据流 和 动态组件

**单向数据流
当父组件给子组件进行传递的时候，子组件不允许修改父组件的值，因为有可能父组件给其他子组件也传递
了相关的数据，如果子组件进行了修改。可能会导致其他组件发生错误。造成错误无法捕获
动态组件：多个组件通过一个挂载点 来显示不同的组件
核心是一个内置组件
挂载点 is 是Component身上的一个属性 值为组件名称
# 为什么组件中的data是一个函数而不是一个对象
因为对象是引用类型，如果将组件进行导出后。其他组件也有可能对data进行复用
因此是一个函数，函数每次执行完毕后都会返回一个新的对象

**

# 回流和重绘

     当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就     会发生回流。每个页面都至少发生一次回流，也就是页面第一次加载的时候。在回流的时候，浏览器     会使渲染树中受到影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流以后，浏览器会重     新绘制受到影响的部分元素到屏幕中，这个过程就是重绘

     回流必定发生重绘。但是重绘不一定引起回流     

     什么时候会发生回流？     

     1、添加或者删除可见的DOM元素的时候

     2、元素的位置发生改变

     3、元素尺寸改变

     4、内容改变

     5、页面第一次渲染的时候

**# 单例模式
单例模式：保证系统中，使用该模式的类只有一个实例
# 适配模式
简单的来说，原来的接口不能满足现在的需求了，就需要另外写一个函数或者接口进行对接
**

# 怎么理解mvvm框架

渐进式的JavaScript框架

**MVVM框架 (查)
M:Model层 数据的增删改查
V:view层 视图层 类似与HTML的模板
vm:viewModel 视图层与数据层之间的一个桥梁 映射关系 (镜子)
数据驱动视图：提高性能
**

# 为什么操作虚拟DOM比操作真实DOM要好 为什么？

虚拟DOM是一个真实的JS对象，直接操作会比较快，操作内存中的JS要比DOM要好，

虚拟DOM相当于在js和真实的DOM中间加了一个缓存，利用DOM diff 算法避免了没有必要的DOM

操作，从而提高了性能

数据驱动视图：提高性能 虚拟DOM:真实的js对象 (查)
因为操作DOM特别耗费性能 会发生回流和重绘

# v-model实现双数据绑定的底层原理

v-model实现一个双数据绑定 v-model使用的时候要注意只能给form表单使用
底层的原理 Object.defineProperty getter setter ES5提出的

# 非父子 底层原理是 使用公共的vue实例，因为this的指向是不同，他们都有自己的
$on 和$emit

# 在vue中有个概念 单向数据流 子组件不允许去修改父组件的值，因为父组件
要向子组件传值，

# 如何解决CSS样式出现冲突？
在每一个style 加一个是scoped属性 加了他以后每个 页面的样式 都是私有的
例：

# 引入observer 之前封装好的 使用这个的好处是vue和react通用 要求源码必
须会背 原理必须会说

#

什么是webpack? 作用有哪些？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。     作用：

1、模块化，让我们可以把复杂的程序细化为小的文件;

2、类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可 以识别；

3、Scss，less等CSS预处理器

# webpack与gulp、Grunt的区别

webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具

# vue路由懒加载

也叫延迟加载或者按需加载，即在需要的时候进行加载，

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

简单的说就是：进入首页不用一次加载过多资源造成用时过长

# vue的实例方法

vue实例身上的方法
$on$emit $off$once

# 脚手架 vue-cli

1、安装脚手架
cnpm install vue-cli -g

cnpm install vue-cli@3 -g

2、vue list 查看vue-cli所拥有的模板

3、暂时用 webpack-simple

4、构建项目
vue init webpack-simple 项目名称

.vue文件
template 结构 html
注意：只允许有一个子元素
script js
style css

# vue 动画

vue动画
1、vue中如果需要使用动画的时候需要使用一个内置组件
transition组件 该组件有一个name属性 值为动画的类名
2、如果元素需要使用动画 元素/组件必须是隐藏/显示 创建、插入、移除的状态 (v-if v-show)
3、动画的类名分为6个
入场动画
-enter
-enter-active
-enter-to
出场动画
-leave
-leave-active
-leave-to

动画的第二种形式 animate.css
使用的方式通过将animate.css的类名赋值给某一个动画的时间段
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
注意：如果需要使用animate.css的时候 切记一定要在active中调用animated这个类名
如果需要一组元素进行动画的运行的时候需要将transition换成 transition-group
另外每一个子元素必须要有一个key值 这个key值必须是唯一的

% 懒加载的实现原理？

意义：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

实现原理：先加载一部分数据，当触发某个条件时利用异步加载剩余的数据，新得到的数据 不会影响原有数据的显示，同时最大程度上减少服务器端的资源耗用。

实现方式：

1，第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟

2，第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

3，第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会 距用户看到某图片前一定距离便开始加载，这样能保证用户下拉时正好能看到图片。

% 双向数据绑定和单向数据的区别？

1，单向数据流中，父组件给子组件传递数据，但反过来不可传递，也就是说单向数据流是从最外层节点传 递到子节点，他们只需从最外层节点获取props渲染即可，如果顶层组件的某个prop改变了，React 会递归的的向下遍历整棵组件树，重新渲染所有使用这个属性的组件，React组件内部还具有自己的状 态，这些状态只能在组件内修改；双向数据绑定是数据与视图 双向绑定，数据发生改变时，视图也改 变，视图发生改变时，数据也会发生改变。

2，双向数据绑定的各种数据相互依赖相互绑定，导致数据问题的源头难以被跟踪到；单向 数据流的数据 流动方向可以跟踪，流动单一，追查问题的时候可以更快捷，缺点是写起来不太方便，要使视图发生改 变就得创建各种action来维护state

3，双向绑定把数据变更的操作隐藏在框架内部，调用者并不会直接感知。而在践行单向数据流的flux系的 实现中其实不过是在全局搞了一个单例的事件分发器（dispatcher）,开发者必须显式的通过这个统一 的事件机制做数据变更通知。

$ 编程式导航

this.$router.push 跳转 this.$router.back 后退
this.$router.forward 前进 this.$router.go
this.$router.replace 替换

之前的导航都是用标签或者直接操作地址栏的形式完成的，那如果在业务逻辑代码中需要跳转页面我们如何操作？这就是我们要说的编程式导航，顾名思义，就是在业务逻辑代码中实现导航。

声明式：

编程式：

this.$router.go(-1) 和 this.$router.go(1) 这两个编程式导航的意思是后退和前进

router.go(-1)代表着后退，我们可以让我们的导航进行后退，并且我们的地址栏也是有所变化的。

1.我们先在app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法。

<button @click="goback">后退

2.在我们的script模块中写入goback()方法，并使用this.$router.go(-1),进行后退操作。

1. export default {

   name: 'app',

   methods:{

   goback(){

   this.$router.go(-1);

   }

   }

   }

   打开浏览器进行预览，这时我们的后退按钮就可以向以前的网页一样后退了。

   1. this.$router.push(‘/xxx ‘)

   这个编程式导航都作用就是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者 首页，都用到这个编程的方法来操作路由。

   我们设置一个按钮，点击按钮后回到站点首页。

   1.先编写一个按钮，在按钮上绑定goHome( )方法。

                  <button @click="goHome">回到首页</button>
   

   2.在app.vue

2. vue编程式导航，意思就是用js来跳转页面，项目中用到最多的就是当点击某个按钮时判断当前登录没登 录，没有登录点击的时候跳转到登录页面。例子：

$ 路由的配置项

**1、path:路由匹配的路径
2、component：当路径匹配成功以后需要渲染的组件
3、children:路由的嵌套 如果需要在一级页面嵌套二级页面的时候我们可以用children 切记在一级页面 中加router-view
4、name:命名路由
5、redirect:重定向
6、props:路由解耦
7、meta:路由元信息
**

$ 路由元信息

每个路由身上所自带的一些信息

**this.$route常用的属性
**fullPath: "/details" 当前组件的路由路径
meta: {flag: false} 元信息
name: "details" 路由名称
params: {} 动态路由的接收值
path: "/details" 当前组件的路由路径
query: {} query传值接收值的地方

**$ 当一个Swiper从后台获取过来数据以后 css没问题 JS没问题 业务代码也没问题 就是不轮播 那问题出现在哪？
**

就是因为数据更新后他的DOM结构不是最新的
三种解决方法：
1,用this.$nexttick() 它是可以获取到数据更新后最新的DOM结构的
2,第二点是可以用演示器 延时器之前试过 大概可以延迟300ms，20ms是做不到
3,另外一个就是updated。