vue经典面试题
vue经典面试题
vue指令中，双向数据绑定是哪个指令，请说出其原理？
v-model 是数据双向绑定是通过数据劫持结合发布订阅模式的方式来实现的，数据和视图是同步的，数据发生变化，视图跟着变化。视图变化，数据也随之发生变化。
核心是Object.defineProperty()，有三个参数：obj（定义其上属性的位置）、prop（要定义或者修改的属性）descript（具体的改变方法）
computed和methods的区别
响应式：computed是响应式的，methods并非响应式。
调用方式：computed定义的成员是像属性一样访问，methods定义的成员必须以函数形式调用
缓存：computed是带缓存的，只有依赖数据发生改变，才会重新进行计算，而methods里的函数在每次调用时都要执行。
绑定方式不同：methods与computed纯get方式都是单向绑定，不可以更改输入框中的值。computed的get与set方式是真正的双向绑定。
computed直接以对象属性方式调用，而methods必须要函数执行才可以得到结果。
vue-router中的前置守卫可以用来做什么?
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航
在项目中，对未登录用户直接通过URL访问页面的行为进行拦截并将其页面重新导航到登陆页面
允许用户直接访问登录页面，通过token判断是否处于登录状态
```html
// 全局前置守卫
router.beforeEach((to,from, next) => {
...
next(); //所有前置守卫最后都需要调用next()进入下一个管道})
```
界面中有五个组件，现在需要右键刷新其中的一个组件，关键代码是什么？
使用v-if刷新子组件，使用v-if控制改组件的显示隐藏，当点击刷新按钮时，组件需要重新显示，当v-if里的值发生改变时，组件会重新渲染，来达到强制刷新组件的方式
使用组件内置$forceUpdate方法，使用前需要在配置中启用
``` html
import Vuefrom'vue'Vue.forceUpdate()
this.$forceUpdate() //然后在组件在使用
```
刷新整个页面：this.router.go(0)
### vue中的data中的数据发生变化，界面会自动进行修改，如果数据是一个数组，发生变化没有更新，原因是什么，如何使界面更新
原因：Vue2.+ 中data数据对象是通过Object.defineProerty来进行数据的双向数据绑定，
而数组则是监听数组的push和pop等操作数组的方法进行双向绑定的，
因此当是通过下标来修改时便不能更新
解决方法：通过forceUpdate 如：在修改完数据后，直接 this.$forceUpdate()；this.$set(obj,key,val) ；
简述watch的两种用法
当项目中某个值发生变化时，想执行对应的方法或者时刻获取最新的值；
通过组件的参数，watch作为对象
通过 vm.$watch() 方法来调用
组件传参方法
父传子:props
子传父：this.$emit
兄弟组件:传数据的时候用this.$bus.$emit传;在要接受数据的子组件 在 created钩子函数中 用$on 方法接收
利用 vuex 进行组件通信 把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了
v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信
$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners 里存放的是父组件中绑定的非原生事件。
父组件通过 provide 提供变量 子组件中通过 inject 注入变量，不论嵌套了几层子组件 都能通过 inject 来调用 provide 的数据
这种写法传的数据是不响应的
在子组件内可以直接通过$parent对父组件进行操作，在父组件内可以直接通过$children 对子组件进行操作; 在父组件调用子组件时候要加下标也就是$children 是一个数组 因为可以有很多个子组件
本地存储 来 完成组件通信
vue界面传参的方式以及如何获取当前界面参数
使用path + 路径，query + 参数。则用this.$route.query.id取值。
使用name +路由名称，params + 参数。则用this.$route.params.id取值。
前后端交互时，为什么会出现跨域问题，如何解决
原因：同源策略：（协议、域名、端口）不一致
解决方法：后端配置跨域（spring boot设置方式）；第二种解决办法：前端配置代理（vue项目）第一步：在config/index.js 文件，配置proxyTable；第二步：在config/dev.env.js文件中加上一句：'changeOrigin': true,
vue和react区别
数据流不同：vue是响应式的数据双向绑定系统，而react是单向数据流，没有双向绑定。
vue的语法较为简单，适用于小型项目创建，而react更适用于Web端和原生App的开发，侧重于大型应用。
vue拥有更快的渲染速度和更小的体积，react则拥有更大的生态圈，可以带来更多的工具支持。
框架本质不同：Vue本质是MVVM框架，由MVC发展而来；React是前端组件化框架，由后端组件化发展而来、
模板渲染方式的不同在表层上、模板的语法不同：React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染。在深层上，模板的原理不同,通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。
监听数据变化的实现原理不同：Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。
什么是缓存组件，说出其用法
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM；keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
简述vue中的插槽
插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
默认插槽：
具名插槽：
默认插槽：
