Vue经典题

1Vue实现数据双向绑定的原理是什么？

是通过Object.defineProperty()来实现数据劫持
数据劫持和发布-订阅者功能来实现；
实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者，实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图，实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者

2怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

在router目录下的index定义,path属性加上 /:****，使用 router 对象的 query或params
query传参会显示在url，刷新依然在；params如果配置了路由，会以/val1/val2的形式值显示在路由，刷新不会丢失；如果不配置路由，数据不会显示在url，刷新会丢失。

3vue-router常用的导航钩子？

beforeEach全局,beforeEnter单独路由

4vue-router有哪些组件?

<router-link :to=’’ /home/…’> //路由声明式跳转,active-class是标签被点击时的样式,tag标签名；
< router-view>//渲染路由的容器；
< keep-alive>//缓存组件

5.请说下封装 vue 组件的过程？

● 首先，使用Vue.extend()创建
● 然后，使用Vue.component()注册组件
● 接着，如果子组件需要数据，可以在props中接受定义
● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

6.你是怎么认识Vuex的？

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

7.vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

1.在components目录新建你的组件文件（indexPage.vue），script一定要export default {}
2.在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’
3.注入到vue的子组件的components属性上面,components:{indexPage}
4.在template视图view中使用，
例如有indexPage命名，使用的时候则index-page

8.vue为什么不直接操作dom？

1.性能损耗，操作DOM是及其损耗性能得
2.代码得质量会降低，出现一些多余得代码，经常直接操作DOM 会导致一些不可预测得问题，当你在一个组件当中直接操作全局得DOM时，有可能会影响到其他页面，一旦报错，定位问题会比较困难。

9.Vue声明组件的state是用data方法，那为什么data是通过一个function来返回一个对象，而不是直接写一个对象呢？

如果不用函数返回每个组件的data都是内存的同一个地址，每次引用赋值，容易造成浅拷贝。用函数返回其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题。

10.介绍一下插槽应用？

作用域插槽
应用场景：父组件对子组件的内容进行加工处理
作用域插槽是一种特殊类型的插槽，作用域插槽会绑定了一套数据，父组件可以拿这些数据来用，
于是，情况就变成了这样：样式父组件说了算，但父组件中内容可以显示子组件插槽绑定的数据。

//子组件
 <div>
    <slot text="我是子组件中的内容"></slot>
 </div>

//父组件
<banner> 
    <div slot-scope="props">
        <div>父组件</div>
        <h3>{{ props.text }}</h3>
    </div>
</banner>

匿名插槽
匿名插槽，每一次引用都会全部渲染插槽
具名插槽
slot 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字，具名插槽将匹配内容片段中有对应 slot 特性的元素。
具名插槽存在的意义就是为了解决在单个页面中同时使用多个插槽。
如果没有起名的话，默认为default

11.computed和watch区别？

computed
支持缓存，只在依赖的数据发生变化时，才会重新计算，否则当多次调用computed属性时，调用的其实是缓存；
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
如果一个数据需要经过复杂计算就用 computed
watch 侦听器
不支持缓存，每调用一次就计算一次；
watch支持异步；
如果一个数据需要被监听并且对数据做一些操作就用 watch
methods 方法
不支持缓存, 只要使用该方法便进行调用。

12.条件渲染中的key？

无：key属性时，状态默认绑定的是位置； 删除所有，重新渲染，
有：key属性时，状态根据key的属性值绑定到了相应的数组元素。删除某一条不会重新渲染，节省性能，

13.hash路由和history路由区别？

在地址栏会有一个#号，hash发生变化的url都会被浏览器记录下来，使得浏览器的前进后退都可以使用了，hash出现在url中，但是不会被包括在HTTP请求中，对后端没有影响，不会重新加载页面。
history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。提供了对历史记录进行修改的功能。虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。
history模式，会出现404 的情况，需要与后端协调配置返回页面。

14.介绍一下Vuex

state：存储状态（变量）外部使用是this.$store.state.isShow = false

mutations：show(state, data){}函数名是外部commit第一个参，show的第一个参数是state对象，修改状态，并且是同步的。在外部使用this.$store.commit(‘show’,data)第二个参是show(state, data){}中的参data

actions：异步操作。在组件中使用是$store.dispath(’’)