23.10.9 Vue面试题总结对Vue基础面试题的整理，双向绑定、生命周期、组件传值、router、VueX、axio

1.

数据双向绑定：V2用Object.defineProperty()劫持+订阅者-发布者模式。V3用proxy。
区别是proxy可以直接监听到数组变化、对象而非属性、有13种拦截方式、返回一个新对象而不用遍历原对象的属性直接改。

2.生命周期

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured。
第一次加载页面会触发：beforeCreate、created、beforeMount、mounted。

3.Vue组件传值

父到子：
引用子组件，直接“自定义属性”=“值”。子组件内部的props接收“自定义属性”。
子到父：
子组件内$emit('自定义函数名', '值')，父组件内引用子组件上@自定义函数名=“父组件更新方法”进行方法的监听。
兄弟组件：
1.写一个eventBus。
2.兄弟1组件的created中订阅eventBus. $on('自定义事件名', methods中方法名) 3.兄弟2组件的methods组件中写函数，函数中发布bus的订阅函数，eventBus.$ emit('自定义事件名')
4.组件template中绑定自定义事件。

4.组件name有什么用

1.keep-alive,搭配name做缓存过滤
2.组件递归时，调用自身name
3.vue-devtools调试工具显示name组件名

5.data为什么是函数

每个组件都是vue实例，数据作为函数的返回值可以作为每个实例的私有数据空间

6.组件怎么监听路由参数的变化

在< router-view />组件内

1.
watch：{
    "$route"(to, from){
        //  监听
    }
}
2.
beforeRouteUpdate(to,from,next){...}

7.捕获错误的钩子

errorCapture
errorHandler

8.组件缓存

vue内置组件<keep-alive>包裹的动态组件，避免重新渲染。
被包裹的组件会多出2个生命周期钩子：activted、deactivted。

9.computed、watch

computed计算属性，取值后直接return回处理后的值，template直接使用。可以用watch监听computed值的变化。

10.过滤器 |

写一个全局filters.js，存到同一个对象filters里，然后export default filters。在main.js里用Object.keys()获取到所有filter, 然后注册到Vue：Vue.filter(名，函数)。每个filter都要return值。

11.VueX

状态集中管理。

应用级的状态放到store里
改变状态的方法是提交mutations，同步
异步逻辑封装在action里

5个核心属性：State, Getter, Mutation, Action, Module.
state里记录所有状态值树，getter类似计算属性，Mutati可以修改state值，Action是业务代码处理异步获取数据和执行commit触发Mutation。
数据是如何修改的？
VueX.Store有个dispatch方法。数据修改时，我们调用dispatch来触发action里的方法，action里都有commit方法触发mutation的方法，mutation里都有state，可以直接修改到state

12.Router路由，原理

路径和组件形成映射，切换路径就显示映射的组件，局部更新不重新请求页面。

路由如何跳转的？方式？
<router-link to="自定义页面路径"> this.$router.push('url')
.replace
.go
路由守卫
.beforeEach, .afterEach, .beforeResolve, .beforeEnter
路由传参
this.$router.push({path:'', query: {}})
$route和$router的区别
$routes是路由信息对象，包括path、parames、hash、query、fullpath、mactched、name等路由信息参数。$ router是VueRouter的实例，相当于全局的路由器对象，有很多属性和子对象，如history，push方法。
active-class是哪个组件的属性，怎么用
router-link的属性，用来显示选中样式。2种使用方式：1.router-link标签内属性active-class="active"。2.router.js里配置linkActiveClass： ‘active’
路由模式
-hash，地址栏#
-history，pushState、replaceState。
路由配置
path、component、name、children、props、redirect。

13.Vue怎么跨域

config里设置proxy
CORS，前端设置axios允许跨域携带cookie(默认不携带)，axios.defaults.withCredentials = true; 后端设置5个属性。

14.Vue怎么实现动画

给元素加transition标签
进入class：<name>-enter, <name>-enter-active, <name>-enter-to
离开class：<name>-leave, <name>-leave-active, <name>-leave-to
一组元素的动画<transition-group>...<transition-group>

15.template的编译

先用compile编译器把template编译成语法树，然后得到render函数，函数返回VNode。

16.渲染时怎保留HTML的注释？

template添加属性comments

17.Vue踩过的坑

修改data中的对象时，直接修改，非响应式。
解：Vue.set(obj, key, value)
created操作DOM报错解：因为还没挂载，用Vue.nextTick()

18.操作data中数组的方法

可改变视图
push(), pop(), shift(), unshift(), splice(), sort(), reverse()
不可改变视图
filter(), concat(), slice() 3.解：
this.arr[index] = newvalue this.$set(arr, index, newvalue)

19.重置data

Object.assign(this.$data, this.$options.data(this))

20.nextTick原理

是一个微任务。

21.axios

axios基于promise，前后端均可使用。
原理：adapter会判断当前环境是浏览器还是node，浏览器就调用XmlHttpRequest对象，node环境就调用http对象。调用后，adapter对返回值进行解析封装，就是我们看到的response响应对象。