Vue理论笔记

　　

　　vue优势？

　　　　轻量级框架：只关注视图层，是一个构建数据的视图集合，
　　　　简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
　　　　双向数据绑定：保留了angular的特色，在数据操做方面更为简单；
　　　　组件化：保留了react的优势，实现了html的封装和重用，在构建单页面应用方面有着独特的优点；
　　　　视图，数据，结构分离：使数据的更改更为简单，不须要进行逻辑代码的修改，只须要操做数据就能完成相关操做；
　　　　虚拟DOM：dom操做是很是耗费性能的， 再也不使用原生的dom操做节点，极大解放dom操做，但具体操做的仍是dom不过是换了另外一种方式；
　　　　运行速度更快:相比较与react而言，一样是操做虚拟dom，就性能而言，vue存在很大的优点。

　　v-show和v-if指令的共同点和不一样点？

1. 答: 共同点：都能控制元素的显示和隐藏；
2. 不一样点：实现本质方法不一样，v-show本质就是经过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。并且v-if不停的销毁和建立比较消耗性能。
   总结：若是要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。若是不须要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
3. 如何让CSS只在当前组件中起做用？
   答：在组件中的style前面加上scoped
4. <keep-alive></keep-alive>的做用是什么?
   答:keep-alive 是 Vue 内置的一个组件，可使被包含的组件保留状态，或避免从新渲染。
5. 如何获取dom?
   答：ref="domName" 用法：this.$refs.domName
6.  vue-loader是什么？使用它的用途有哪些？
   答：vue文件的一个加载器，将template/js/style转换成js模块。
   用途：js能够写es六、style样式能够scss或less、template能够加jade等
7. 为何使用key?
   答：须要使用key来给每一个节点作一个惟一标识，Diff算法就能够正确的识别此节点。
   做用主要是为了高效的更新虚拟DOM。
8. 请说出vue.cli项目中src目录每一个文件夹和文件的用法？
   答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。
9. 分别简述computed和watch的使用场景
   答：computed:
   　　　　当一个属性受多个属性影响的时候就须要用到computed
   　　　　最典型的例子： 购物车商品结算的时候
   watch:
   　　　　当一条数据影响多条数据的时候就须要用watch
   　　　　例子：搜索数据
10. $nextTick的使用
    答：当你修改了data的值而后立刻获取这个dom元素的值，是不能获取到更新后的值，你须要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素以后在获取，才能成功。
11. vue组件中data为何必须是一个函数？
    答：由于JavaScript的特性所致使，在component中，data必须以函数的形式存在，不能够是对象。
    　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，至关于每一个组件实例都有本身私有的数据空间，它们只负责各自维护的数据，不会形成混乱。而单纯的写成对象形式，就是全部的组件实例共用了一个data，这样改一个全都改了。
12. v-if和v-for的优先级
    答：当 v-if 与 v-for 一块儿使用时，v-for 具备比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每一个 v-for 循环中。因此，不推荐v-if和v-for同时使用。
    若是v-if和v-for一块儿用的话，vue中的的会自动提示v-if应该放到外层去。
13. vue的两个核心点
    答：数据驱动、组件系统
    数据驱动：ViewModel，保证数据和视图的一致性。
    组件系统：应用类UI能够看做所有是由组件树构成的。
14. .vue和jQuery的区别
    答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操做，其实和原生的HTML的区别只在于能够更方便的选取和操做DOM对象，而数据和界面是在一块儿的。好比须要获取label标签的内容：$("lable").val();,它仍是依赖DOM元素的值。
    Vue则是经过Vue对象将数据和View彻底分离开来了。对数据进行操做再也不须要引用相应的DOM对象，能够说数据和View是分离的，他们经过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
15. 引进组件的步骤
    答: 在template中引入组件；
    在script的第一行用import引入路径；
    用component中写上组件名称。
16. SPA首屏加载慢如何解决
    答：安装动态懒加载所需插件；使用CDN资源。
17. delete和Vue.delete删除数组的区别
    答：delete只是被删除的元素变成了 empty/undefined 其余的元素的键值仍是不变。Vue.delete 直接删除了数组 改变了数组的键值。
18. Vue-router跳转和location.href有什么区别
    答：使用location.href='/url'来跳转，简单方便，可是刷新了页面；
    使用history.pushState('/url')，无刷新页面，静态跳转；
    引进router，而后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减小了dom的消耗。
    其实使用router跳转和使用history.pushState()没什么差异的，由于vue-router就是用了history.pushState()，尤为是在history模式下。
19. vue slot
    答：简单来讲，假如父组件须要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪一个地方显示、如何显示，就是slot分发负责的活。
20. Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
    答：Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。
21. Vue2中注册在router-link上事件无效解决方法
    答： 使用@click.native。缘由：router-link会阻止click事件，.native指直接监听一个原生事件。
22. RouterLink在IE和Firefox中不起做用（路由不跳转）的问题
    答: 方法一：只用a标签，不适用button标签；方法二：使用button标签和Router.navigate方法
23. axios的特色有哪些
    答：从浏览器中建立XMLHttpRequests；
    node.js建立http请求；
    支持Promise API；
    拦截请求和响应；
    转换请求数据和响应数据；
    取消请求；
    自动换成json。
    axios中的发送字段的参数是data跟params两个，二者的区别在于params是跟请求地址一块儿发送的，data的做为一个请求体进行发送
    params通常适用于get请求，data通常适用于post put 请求。
24. .params和query的区别
    答：用法：query要用path来引入，params要用name来引入，接收参数都是相似的，分别是this.$route.query.name和this.$route.params.name。
    url地址显示：query更加相似于咱们ajax中get传参，params则相似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
    注意点：query刷新不会丢失query里面的数据
    params刷新 会 丢失 params里面的数据。
25. vue更新数组时触发视图更新的方法
    答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
26. vue经常使用的UI组件库
    答：Mint UI，element，VUX
27. 第一次页面加载会触发哪几个钩子？
    答：beforeCreate， created， beforeMount， mounted

　　　　生命周期钩子函数共有11种：

　　　　beforeCreate--->created

　　　　beforeMounte--->mounted

　　　　beforeUpdate--->update

　　　　beforeDestroy--->destoryed

　　　　activated活跃状态 当前组件显示时执行的生命周期

　　　　deactivated 缓存状态  当前组件缓存时执行的生命周期

　　　　errorCaptured 当捕获一个来自子组件错误时被调用

　　2七、vue获取数据在哪一个周期函数
　　　　答：通常 created/beforeMount/mounted 皆可.
　　　　好比若是你要操做 DOM , 那确定 mounted 时候才能操做.

　　2八、vue-router 是什么?它有哪些组件

　　　　答：vue用来写路由一个插件。router-link、router-view

　　2九、active-class 是哪一个组件的属性？

　　　　答：vue-router模块的router-link组件。children数组来定义子路由

　　30、怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

　　　　答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。

　　3一、vue-router 有哪几种导航钩子?

　　　　答：三种，

　　　　第一种：是全局导航钩子：router.beforeEach(to,from,next)，做用：跳转前进行判断拦截。

　　　　第二种：组件内的钩子

　　　　第三种：单独路由独享组件

　　3二、$route 和 $router 的区别

　　　　答：$router是VueRouter的实例，在script标签中想要导航到不一样的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)

　　　　　　$route为当前router跳转对象。里面能够获取当前路由的name,path,query,parmas等。

　　3三、vue-router的两种模式

　　　　答:hash模式：即地址栏 URL 中的 # 符号；

　　　　history模式：window.history对象打印出来能够看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（须要特定浏览器支持）。

　　3四、vue-router实现路由懒加载（ 动态加载路由 ）

　　　　答:三种方式

　　　　第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 能够实现按需加载 .可是,这种状况下一个组件生成一个js文件。

　　　　第二种：路由懒加载(使用import)。

　　　　第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也能够实现按需加载。这种状况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

　　3五、vuex是什么？怎么使用？哪一种功能场景使用它？

　　　　答：vue框架中状态管理。在main.js引入store，注入。

　　　　　　新建了一个目录store.js，….. export 。

　　　　　　场景有：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车

　　3六、vuex有哪几种属性？

　　　　答：有五种，分别是 State、 Getter、Mutation 、Action、 Module

　　　　　　state => 基本数据(数据源存放地)

　　　　　　getters => 从基本数据派生出来的数据

　　　　　　mutations => 提交更改数据的方法，同步！

　　　　　　actions => 像一个装饰器，包裹mutations，使之能够异步。

　　　　　　modules => 模块化Vuex