VUE笔记

1、什么是虚拟dom？使用它有什么好处

虚拟dom是利用js描述元素与元素的关系。

好处：是可以快速的渲染和高效的更新元素，提高浏览器的性能

2、简述vue中常用的指令（最少写出六个）

​ v-html 解析输出变量 能解析html

​ v-text 解析输出变量

​ v-bind 给标签绑定属性 可以简写为 :属性名=“变量”

​ v-on 给元素绑定事件 用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法”

​ v-pre 跨过当前的标签不解析 用法 ：<标签 v-pre></标签>

​ v-cloak 解决差值表达式闪烁的问题

​ v-model 实现数据的双向绑定 只能适用于表单元素

​ v-for 可以循环遍历数据

​ v-if 条件输出

​ v-show 条件输出

3、v-if和v-show的区别

区别：
1、当条件为真的时候 没有区别 当条件为假的时候 v-if是不创建元素 v-show 渲染元素然后隐藏掉
2、v-if 更适合数据的筛选和初始渲染，它有更高切换成本
v-show 更适合元素的切换，它有更高渲染成本

4、methods computed watch的区别

computed 具有缓存性，依赖于属性值，只有属性发生改变的时候才会重新调用
method 是没有缓存的，只要调用，就会执行
watch 没有缓存性 监听属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作

5、简述vue中过滤器

过滤器是实现变量的格式化输出 。过滤器分为局部过滤器还有全局过滤器
全局过滤器 是在多个实例中可以使用的过滤器
语法：
Vue.filter(“名”，function(value){
// value是调用过滤器的属性的值
})
调用：
在v-bind中或者{{ 属性|过滤器名}}

局部过滤器 只是在当前的组件或者实例中使用
filters: {
名：function(val) {
}
}
注意：过滤器可以串联 但是后面的肯定是以前面的为基础
变量|过滤器1|过滤器2

6、简述自定义指令的钩子函数

bind(){} 只调用一次，指令第一次绑定到元素时调用
inserted(){} 被绑定元素插入父节点时调用
update(){} 被绑定元素所在的模板更新时调用，而不论绑定值是否变化
componentUpdated(){} 被绑定元素所在模板完成一次更新周期时调用
unbind(){} 只调用一次， 指令与元素解绑时调用

7、vue中的事件修饰符

语法：@事件名.修饰符=“方法名”
.stop 阻止事件冒泡
.capture -事件捕获
.self 只是监听触发改元素的事件
.once - 只触发一次
.prevent - 阻止默认事件

8.简述vue的生命周期函数

1.创建
beforeCreate() 在执行这个钩子的时候 只有一些实例本身的事件和生命周期函数 用户自定义不能使用
created() 最早开始使用 data和methods中数据的钩子
2.挂载
beforeMount() 指令已经解析完毕 内存中已经生成dom数
mounted()dom已经渲染完毕 页面和内存的数据已经同步
3.更新
beforeUpdate() 当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的
updated() 内存和页面都是新的
4.销毁
beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
destroyed()已经销毁完毕

9.created()和mounted()的区别

created()是最早使用data中数据的钩子函数
mounted()是最早可以操作dom元素的钩子函数

10.单页面应用和多页面应用的区别

单页面应用：
优点：跳转速度快
缺点：首屏加载慢
多页面应用：
有点：首屏加载快
缺点：跳转的效率不高

11.assets和static的区别

assets目录中文件在打包的时候会进行打包压缩然后上传到打包好的目录
static目录中的文件直接拷贝到打包好的目录中 不会进行压缩

12.vue中动态的给元素绑定样式

绑定行内样式
<标签 v-bind:style="{样式的属性名:变量}">
绑定class
<标签 v-bind:class="{类名:变量}">

13、简述单项数据流

单向数据流就是在数据流通的过程中，在子组件中是不可以修改父组件的传输的数据，如果想修改可以通过子传父的方式在父组件中进行修改。

14、简述插槽

插槽也成为slot分发，就是在子组件中显示父组件传输的数据
要明白两点：
1、怎么在子组件中显示父组件的数据
a.在子组件的模板中写一堆slot标签
b.在父组件的子组件标签内部 写要传递的数据
2、显示什么数据
如果父组件不传输数据 就是默认数据 如果父组件传输数据则显示父组件传输的数据
注意：在编译的过程中父组件模板中的变量的作用域是父组件 ，子模板中的变量作用域是子组件
具名插槽：就是给标签来起名字
在父组件分发的时候使用<template v-slot:名>来指定数据显示的位置

15、怎么实现父组件向子组件传输数据

1、在父组件的子组件标签上绑定一个属性，挂载要传输的变量
2、在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}

16、怎么实现子组件向父组件传输数据

子传父
	1、在父组件的子组件标签上自定义一个事件，然后调用需要的方法
	2、在子组件的方法中通过 this.$emit("事件")来触发在父组件中定义的事件，数据是以参数的形式进行传递的

17、怎么实现兄弟组件之间传输数据

1、在src中新建一个Bus.js的文件，然后导出一个空的vue实例
2、在传输数据的一方引入Bus.js  然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递
3、在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})

18、简述前端路由和后台路由

前端路由：是由程序员来设置的页面跳转规则，由不同的路径显示不同的组件 但是前端路由的路径在后台服务器上是不存在的
后台的路由：每个路由对应的是一个接口，也就是说后台的路由是在服务器上真实存在的，每个后台的路径都对应的一个接口数据

19、vue中的路由有几种，默认的是哪种

vue的路由分为两种 hash路由 history路由 默认的为hash

20、vue中获取接口数据的方式

1、jquery 的ajax
2、fetch 
3、axios 
4、原生ajax

21、简述编程式导航的方法

push()
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
go(-num)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
replace()
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 没有办法使用go()返回了

22、this.$route和this.$router的区别

this.$route 路由信息对象 可以获取参数列表
this.$router路由实例对象 可以实现页面的转换

23、params和query传参的区别

1.用法上的
刚query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name
2.展示上的
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
3.params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系

24、简述keep-alive

1. keep-alive是什么
   keep-alive是vue提供给我们的一个组件，用来在路由切换的时候保存我们的组件状态
2. 什么时候用:
   当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置，然后又去购物车页面，再回到首页的时候能够保存住我刚才滑动的位置
	全部缓存:
		直接把router-view用<keep-alive>包裹起来
	部分缓存:
		1、router.js中设置要缓存的页面
		{
      			path: '/child1',
      			name: 'Child1',
      			component: Child1,
      			meta:{
      				keepAlive:true
      			}
    		}
    		},
		2、用v-if来显示router-view是否在keep-alive中出现
		<keep-alive>
        		<router-view v-if="$route.meta.keepAlive"></router-view>
      		</keep-alive> 
      		<router-view v-if="!$route.meta.keepAlive"></router-view>

25、什么是vuex?vuex用在什么地方

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据
在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuex.

26、vuex的使用步骤

1、下载
cnpm install vuex -s
2、在src目录中新建一个store的目录，在目录中新建index.js
3、挂载到当前vue实例上 main.js
4、在组件中使用vuex

27、vuex的核心

1.state 所有的数据都存储在state中 state是一个对象
2、mutations 可以直接操作state中的数据
3、actions 只能调用mutations的方法
4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作
5、modules 将仓库分模块存储

28、vuex的工作机制

在组件中通过dispatch来调用actions中的方法没在actions中通过commit来调用mutations中的方法，在mutations中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中

29.在组件中为什么data是一个函数

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关

30…vue中key的作用

在生成虚拟dom的过程中，相同的组件产生相同的dom结构，不同的组件产生不能的dom结构，同一层级的dom节点，他们可以通过唯一的id进行区分，这个id就是key。
作用：快速高效的更新虚拟dom