目录
7、Vue，子组件修改父组件传递过来得props，该怎么解决？
11、Computed、Watch的用法？跟Methods的区别是什么？
15、axios配置'proxy'定义代理服务器的主机名称和端口
VUE
1、vue几种常用的指令？
- v-click
- v-bind
- v-if
- v-show
- v-text
-
v-html
// v-bind使用，简写 :bing
语法：v-bind:title="msg"
简写：:title="msg"
// 绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"2、v-if和v-show区别？
- v-if块添加和删除，文档流中查看不到dom
- v-show显示和隐藏，dom元素还在，作用：display:none
3、vue常用的修饰符有哪些？分别是做什么的？
1、事件修饰符
vue为v-on提供了事件修饰符，通过点(.)表示的指令后缀来调用修饰符。
.stop
阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()
<a v-on:click.stop="doThis"></a>
<a @click.stop="doThis"></a>
.prevent
用于取消默认事件
<a v-on:submit.prevent="doThis"></a>.capture
与事件冒泡的方向相反
<a v-on:click.capture="doThis"></a>.self
只会触发自己范围内的事件，不包含子元素
<a v-on:click.self="doThat"></a>.once
只执行一次
<a @click.once="doThis"></a>.passive
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>事件修饰符还可以串联
<a v-on:click.stop.prevent="doThis"></a>注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2、键盘修饰符
// 在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：
.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">3、系统修饰键
// 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>4、鼠标按钮修饰符
鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
5、自定义按键修饰符别名
在Vue中可以通过config.keyCodes自定义按键修饰符别名。例如，由于预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法，出现alert。
// 当点击f5时立马调用prompt方法。
<template>
<div class="main">
<input type="text" @keyup.f5="prompt()" />
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
prompt(){
alert("aaaaa")
}
}
};
</script>6、修饰符
.lazy
在改变后才触发（也就是说只有光标离开input输入框的时候值才会改变）
<input v-model.lazy="msg" />.number
将输出字符串转为Number类型，（虽然type类型定义了是number类型，但是如果输入字符串，输出的是string）
<input v-model.number="msg" />.trim
自动过滤用户输入的首尾空格
<input v-model.trim="msg" />4、Vue生命周期是什么？第一次页面加载会触发哪几个钩子？
beforeCreate（创建新的实例）：能不能使用这个解决请求空白的问题？
created(){}（具有默认特性的对象）：对对象及其事件完全初始化，实现函数自执行，数据观测(data observer)，属性和方法的运算， watch/event 事件回调
beforeMount（对象在DOM中适合形状）：DOM 为虚拟DOM 仍未完全加载
mounted（DOM已准备就绪并放置在页面内）：挂载元素内dom节点的获取
beforeUpdate（更改已完成，但尚未准备好更新DOM）：渲染完成，并监测到data发生变化
updated（在DOM中呈现的更改）：监测到data发生变化，并完成渲染更新视图之后触发
beforeDestroy（实例销毁之前调用，在这一步，实例仍然完全可用）：实例销毁之前调用 ， 实例仍然完全可用。
destroyed（销毁后调用）：调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
5、Vue组件子组件、父组件数据交互，通讯
1、父传子
需要通过props属性传值；
父组件：:msg= "msg"
<app-form :msg = "msg"></app-form>
子组件：props
export default{
props: {
msg: {
type: String,
// type: [String,Number...] 多种类型就写成数组
default: '默认值', // 默认值
},
}
}2、子传父
子组件：
<div>
<button @click="share">分享</button>
</div>
methods: {
share(){
this.$emit("shared", "修改的参数")
},
},父组件：
<jubu @shared = "fooShare"></jubu>
data() {
return {
msg: '父子间信息'
}
}
methods: {
fooShare(msg){
// 修改..
this.msg = msg
}
}6、简单描述vue每个生命周期具体适合哪些场景？
beforeCreate（创建新的实例）：能不能使用这个解决请求空白的问题？
created(){}（具有默认特性的对象）：对对象及其事件完全初始化，实现函数自执行，数据观测(data observer)，属性和方法的运算， watch/event 事件回调
beforeMount（对象在DOM中适合形状）：DOM 为虚拟DOM 仍未完全加载
mounted（DOM已准备就绪并放置在页面内）：挂载元素内dom节点的获取
beforeUpdate（更改已完成，但尚未准备好更新DOM）：渲染完成，并监测到data发生变化
updated（在DOM中呈现的更改）：监测到data发生变化，并完成渲染更新视图之后触发
beforeDestroy（实例销毁之前调用，在这一步，实例仍然完全可用）：实例销毁之前调用 ， 实例仍然完全可用。
destroyed（销毁后调用）：调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
7、Vue，子组件修改父组件传递过来得props，该怎么解决？
1、
vue2.0中，子组件中不能修改父组件的状态，否则在控制台中会报错。这是因为props字符串，数字；
如果props是对象的话，在子组件内修改props的话，父组件是不会报错的。
// 父组件：
child :test="test"></child>
data() {
return {
test: {
hello: 1
}
}
},
// 子组件
props: {
test: {
type:Object
}
}2、
props传值
// 报错
props:['listShop'],
data(){
return{}
},
created(){
this.listShop=30
}
// 解决
props:['listShop'],
data(){
return{
listShopChild:this.listShop
}
},
created(){
this.listShopChild = 30
}8、$route和$router的区别？
this.$router是要去的地方；
this.$router.push({path:`/user/${userId}`})this.$route
相当于当前跳转的路由对象，可以从里面获取name，path，params，query等；
9、Vuex是什么？都有哪些方法或属性？它们的作用是什么？
Vuex应用程序开发的状态管理模式，集中式存储管理所有组件的状态；
Vuex基础概念
State
保存一份需要的数据，包含了应用层的所有状态；state是vuex自己维护的一份状态数据，通过操作去页面渲染；
Getters
有时候我们需要从 store 中的 state 中派生出一些状态，getters属性主要是对于state中数据的一种过滤；
Actions
对于store中数据的修改操作动作在action中提交；
Mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation；
1、读取store里的值
this.$store.state.字段名
如果有moudle的话，假设叫 login,那么取值又要变了，加上module名
this.$store.state.login.mobile
2、发起操作请求
this.$store.dispatch('action中的方法名' , '参数');
参数你可以随便传json
3、getters的用法
this.$store.getters.filterDoned
filterDoned 是在todo 里写的一个getters方法，就这么调用噢
10、Vue的双向绑定是如何实现的？有什么缺点？
实现：v-model=""
vue的双向绑定是数据劫持，说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情；
缺点：各种数据相互依赖相互绑定，导致数据问题的源头难以被跟踪到，不利于管理数据源。
11、Computed、Watch的用法？跟Methods的区别是什么？
https://segmentfault.com/a/1190000012948175
1、Computed
计算属性，类似于过滤器，对绑定到view的数据进行处理；
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}fullName不可在data里面定义，如果定义会报错误，因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量，变量不可被重复定义和赋值
// get和set用法
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName：{
get() { // 回调函数，当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
return this.firstName + ' ' + this.lastName
},
set(val) { // 监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
// val就是fullName的最新属性值
console.log(val)
const names = val.split(' ');
console.log(names)
this.firstName = names[0];
this.lastName = names[1];
}
}
}2、watch
watch是监听属性，一个观察的动作；
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val
}
}// 监听简单数据类型
data(){
return{
'first':2
}
},
watch:{
first() {
console.log(this.first)
}
}// 2.3 监听复杂数据类型
// 1.监听复杂数据类型需用深度监听
data(){
return{
'first':{
second: 0
}
}
},
watch:{
secondChange: {
handler(oldVal, newVal){
console.log(oldVal)
console.log(newVal)
},
deep: true
}
},监听对象单个属性
// 方法一：可以直接对用对象.属性的方法拿到属性
data(){
return{
'first':{
second:0
}
}
},
watch:{
first.second:function(newVal,oldVal){
console.log(newVal,oldVal);
}
}
// 方法二：watch如果想要监听对象的单个属性的变化,必须用computed作为中间件转化,因为computed可以取到对应的属性值
data(){
return{
'first':{
second:0
}
}
},
computed:{
secondChange(){
return this.first.second
}
},
watch:{
secondChange(){
console.log('second属性值变化了')
}
}computed和watch的区别
computed特性
1.是计算值，
2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
watch特性
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行
Methods
执行方法的
12、axios的特点有哪些？有哪些常用方法？
特点
1、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
2、它可以拦截请求和响应
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
4、安全性更高，客户端支持防御 XSRF
常用方法
1、axios.get(url[, config]) // get请求用于列表和信息查询
2、axios.delete(url[, config]) // 删除
3、axios.post(url[, data[, config]]) // post请求用于信息的添加
4、axios.put(url[, data[, config]]) // 更新操作
13、项目中都用到哪些Eslint规则？
双引号、单引号、分号、
console.log()、
for循环空格、tab等
14、vue数据深拷贝
数组深度克隆：
var x = [1,2,3];
var y = [];
for (var i = 0; i < x.length; i++) {
y[i]=x[i];
}
console.log(y); //[1,2,3]
y.push(4);
console.log(y); //[1,2,3,4]
console.log(x); //[1,2,3]对象深度克隆:
var x = {a:1,b:2};
var y = {};
for(var i in x){
y[i] = x[i];
}
console.log(y); //Object {a: 1, b: 2}
y.c = 3;
console.log(y); //Object {a: 1, b: 2, c: 3}
console.log(x); //Object {a: 1, b: 2}函数深度克隆
var x = function(){console.log(1);};
var y = x;
y = function(){console.log(2);};
x(); //1
y(); //2强大的JSON.stringify和JSON.parse
// 法1
const obj1 = JSON.parse(JSON.stringify(obj));
// 法2
function copyArray(arr) {
return JSON.parse(JSON.stringify(arr));
}15、axios配置'proxy'定义代理服务器的主机名称和端口
`auth`表示HTTP基础验证应当用于连接代理，并提供凭据这将会设置一个`Proxy-Authorization`头，覆写掉已有的通过使用`header`设置的自定义`Proxy-Authorization`头。
proxy:{
host:'127.0.0.1',
port:9000,
auth::{
username:'name',
password:'123'
}
}