面试题相关

~1.JS的变量类型 基本类型（字符串，数字，布尔（true，false），未定义，空，Symbol）引用数据类型 （对象，数组，函数）
~2.变量类型的相互转换
"2"-"1" string转number
"1"-fase string转number,boolean转换number
"1"-null null转换为null null为0
5-"3a" 除了加法以外，只要一边不是一个纯数字，结果就是NaN
"5"-0 字符串5转换为了数字5
undefined和null没有自动类型转换
"1"-undefined NaN undefined 没有转换
true+undefined NaN
NaN:是一个特殊值，这个值表示不是一个数字 (是number类型)
"+":实现字符串拼接
Number()把一个值转换为数字（js强制类型转换）
parseInt()把一个值转换成整数
~3.字符串的切割（slice，substring(不能接受第二个参数为负数，如果第二个数是负数了，name就从前面第一个元素开始截取 第一个数字是几 就截取几个), substr(起始位置,个数)）
~4.Js 对象常用方法(如何正确使用)
Object.entries()键值对数组
Object.is()判断两个值是否想等
Object.valus()返回可枚举的属性值数组
Object.keys()返回属性名称的数组
Object.assign(目标对象,源对象)源对象赋值给目标对象
~5.null 跟undefined 的区别
null是给定义的变量赋空值，这个变量是存在的
undefined不存这个变量，内存地址上没有这个变量，就是不存在
null的类型是Object。undefined的类型是未定义
~6.for ，for ..in ,for..of forEach map 区别
for循环
for(var i= 0; i<arr.length;i++){},
for in 能循环对象（k返回的是属性名称） 能循环数组k返回的（下标）
for of 只能循环数组，返回的是属性名称和属性值
forEach和map的 区别
相同点：1都是循环数组中的每一项
2每次执行匿名函数都支持三个参数，参数为item（当前每一项），index（索引值），arr（元数组）
3.匿名函数的this都是指向window
4.只能遍历数组
不同点:1.map()会分配内存空间储存新数组并返回，forEach()不会返回数据
2.forEach()允许callback更改原始数组的元素，map()返回新的数组
while()语句只要指定条件为true，就会执行循环，只要条件为true，循环就可以一直执行代码。
~7.数组的常用方法 熟练掌握 例如 （数组分割，数组转字符串，字符串转数组， 遍历，反转，filter，inculde，等）
数组分割slice（）两个参数，起始位置，不包含结束未知
数组转字符串join（） toString（） toLocaleString
字符串转数组 split（）把字符串分割成数组 解构赋值 展开运算符 Array.from
数组反转 reserve
数组拼接 concat
数组删除最后一个元素:pop
数组添加最后一个元素:push
数组最前面添加一个或多个元素:unshfit
删除数组最前面的一个元素:shfit
数组删除:splice(起始位置，要删除的个数)
for()循环
filter过滤掉不符合条件的
inculdes查找数组中有没有符合的元素
~8.三元运算符 if else switch case
if(条件语句){
true 先走这个(符合条件语句的)
}else{
否则走这个
}
switch(判断条件){
case 条件一:
返回值1
case条件二:
返回值2
case条件三:
返值值3
default：
以上三个条件不满足就走这个
~9.函数与箭头函数
普通函数function add(a,b){
return a + b
}
add(1,2)
箭头函数let sum = (a,b)=>{
return a + b
}
~10.函数的实参与形参 函数调用
//函数形参
let a = function(a,b){
return a + b
}
a(1,2)//函数实参
~11.匿名函数与普通函数
匿名函数 let b = function(a,b){
return a + b
}
普通函数 function add(c,d){
return c+ d
}
~12.函数作用域
全局作用域（windows是全局作用域）
局部作用域（函数中存在的变量是局部作用域）

13.创建一个vue 项目
vue create + 项目名字
14.如何增加路由
在components下新建一个router文件夹下面新建一个index.js文件
安装路由 通过import VueRouter from vue-router引入
Vue.use(VueRouter)注册
//跳转报错
const origin = VueRouter.protype.push
VueRouter.protyope.push = function push(loacation){
return origin.call(this,loacation).catch((err)=>err)
}
const routes =[
path:''
name:'',
component:
]
const router = new VueRouter({
mode:'hash',
routes
})
export deafult router
~15..如何增加组件（components） 组件的slot
~16.如何引入组件
通过import...from
~17.组件之间的传值（父子，兄弟）-1.5
父传子(用props接受父组件传来的值)
子传父（在组件通过this.$emit('父组件定义的自定义方法名',要传的值);），然后在父组件通过自定义的方法（参数），在method里面接受子组件传来的值，通过打印这个方法中的参数（item）就能获取到子组件传来的值
兄弟传值用bus线程（父组件bus.$emit('方法名',{item:[1,2,3,5]})）
子组件bus.$on('方法名'，(params)=>{

})
这两个方法名是一致的

~18.组件的异步传值 async
修饰符.sync 子组件的值会和父组件的值同时发生变化
用this.$emit('update:修饰符后面的变量',修改的值)

响应式传值(provide,inject)
~19.多个页面引入相同的组件 数据格式不一样，但是组件效果一致 如何处理1-10
处理成起初的变量名称然后相应的赋值，相应的组件会展示不同的值
20.使用数组生成一个页面（要求，能够动态增删查改，并且实现简单校验）
21.VueX 的 灵活运用-1.6
state:是存储变量的
getters：是读取state中的值 (this.$store.getters.xxx)
muatations同步操作修改state中的值（赋值都是在这里进行的）
actions是异步的更改方式 ，触发提交mutations中的方法
22.Vue的监听事件 watch 与computed-1.6
watch一个数据影响多个数据（搜索框）
computed一个数据受多个数据影响（购物车）
23.Axios 的使用 -1.6
安装 创建实例
const request = axios.create({
baseURL:'/api',
timeout:5000
})
//请求拦截器
request.interceptors.request.use(config=>{
config.headers['Content-Type'],'application/json;charset=utf-8';
return config
},error=>{
return Promise.reject(error)
})
//响应拦截器
request.interceptors.response.use(
response=>{
let res = response.data;
if(response.config.responseType ==='blob'){
return res
}
if(typeof res === 'string'){
res = res ? JSON.parse(res) : res
}
return res;
},error=>{
return Promise.reject(error)
})
export default request
在main.js中引入，挂在到Vue原型上全局使用Vue.protype.request = request
a)Axios 的拦截器-1.6
24.Vue的自定义指令-1.9
在directive中定义自定义指令
directives:{
v-color
color:{
bind(el,binding){
// el:是指绑定到这个dom元素本身
//第二个参数可以获取指令相关的信息，比如绑定的值
// el.style.color = "red"
el.style.color = binding.value
}

}
}
25.Vue的路由 router 以及路由守卫 beforEach afterEach beforeRouterLevel beForeRouterEnter -1.9
//前置守卫
router.beforeEach((to,form,next)=>{
if(to.path == '/'){
next()往下执行
}
})
//后置守卫
router.afterEach((to,from)=>{
if(to.path == '/homePage'){

}
})
//组件内的守卫
beforeRouterEnter(to,from,next)到达
//不能获取组件实例this
beforeRouterUpdate(to,from,next)
//可以访问this实例
beforeRouterLeave(to,from,next)离开
//可以访问this实例
26.Vue 路由的history 和 hash 的区别 -1.9
//hash是默认路由,在url上显示#，不会包括在HTTP请求中，对后端完全没有影响，改变hash不重新加载页面
//哈希利用了window.onhashchange事件，哈希值有变化，会自动调用hashchange事件，在hashchange的监听事件内可以得到改变后的url
window.addEventListener('hashchage',()=>{
this.data.current = window.location.hash.substr(1)
})
//history模式
//HTML5新增两个神器pushState()和replaceState()需要特定浏览器完成，用来完成URL跳转，无需重新页面
~27.路由的 query 跟params 两种取值方式 以及url 对应的展示效果 -1.9
this.$route.params.name /one/two/three
this.$route.query.id oneDay?id=1&name=跳转
~28.Vue 路由的传参以及重定向 -1.9
this.$router.push('/xxxx${aa}id:${}')
query参数://字符串方式 this.$router.push("/parentComponent?id=1&name=饭饭")
//path方式 this.$router.push({
path:'/lujing',
query:{
id:1,
name:饭饭
}
})
//name方式 this.$router.push({
name:'/lujing',
query:{
id:1,
name:'饭饭'
}
})
params参数://只能用name，不能用path
不显示参数: this.$router.push({
name:'/lujing',
params:{
id:1
}
});
显示参数:this.$router.push('/lujin/lujing/${id}')
//在路由路径中先加路由占位符
29.全局函数 的挂载 -1.9
30.Vue模板的基础指令 v-if v-show v-html v-for v-bind -1.9
v-if显示不显示 直接删除dom元素不显示
v-show不显示是css样式 ，不会删除dom元素
v-html 解析html片段 v-text输出是纯文本，浏览器不会对其再进行html解析
v-for循环
v-bind动态绑定 加:
31.引入一个子组件v-for 循环加入组件 并传递同一个prop prop 每个组件打印的值 不同1-10
32.动态添加 class 与style 1-10
:class="['类名']"
:style="{color:'red','font-size':20,'font-weight':700}"