vue 记录

1.v-if 可以重走组件的生命周期

2.Vue使用了Mustache语法，即双大括号的语法。

3.原生input其实只是一个语法糖，:bind="value"与@change="value = $event.target.value"的结合。

自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

4.定义全局方法

1、通过prototype，Vue.prototype[method]=method;

2、通过mixin，Vue.mixin(mixins);

5.设置assetsPublicPath将 assetsPublicPath: '/' 改为 assetsPublicPath: './'解决打包后静态资源失效

6.动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。require('@/assets/images/xxx.png')

7.风格指南

1、使用v-for时记得加key，可以快速定位到需要更新的DOM节点，提高效率。

2、永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率

3、优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线

4、为组件样式设置scoped作用域

8.关于key：便于diff算法的更新，key的唯一性，能让算法更快的找到需要更新的dom，需要注意的是，key要唯一，不然会出现很隐蔽性的更新问题。

9.style添加scope防止全局同名css污染

10.watch的属性用箭头定义会导致this 是undefind

11.vue错误处理分为errorCaptured与errorHandler

errorCaptured是组件内部钩子，可捕捉本组件与子孙组件抛出的错误，接收error、vm、info三个参数，return false后可以阻止错误继续向上抛出。

errorHandler为全局钩子，使用Vue.config.errorHandler配置，接收参数与errorCaptured一致，2.6后可捕捉v-on与promise链的错误，可用于统一错误处理与错误兜底。

12.在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？

currentTarget：事件绑定的元素

target:鼠标触发的元素

currentTarget 始终是监听事件者，而 target 是事件的真正发出者

13.在 .vue 文件中，template是必须的，而script与style都不是必须的。

14.this.$forceUpdate()强制重新刷新某组件

15.vue扩展组件方法

  1.使用Vue.extend 直接扩展

   2.使用Vue.mixin全局混入

   3.HOC封装

   4.添加slot扩展

16.attr和listeners 组件传值，祖孙组件有跨度的传值

17.本地项目开发完成部署后报错原因可能：

   检查nginx配置，是否正确设置了资源映射条件

   检查vue.config.js中是否配置了publicPath，若有则检查是否和资源文件在服务器的摆放位置一致

18.vue组件模版只有一个根元素，"树"状数据结构，肯定要有个"根"，一个遍历起始点通过这个‘根节点’，来递归遍历整个vue‘树’下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置

19.如何优化首页的加载速度

 异步路由、异步加载、分屏加载、按需加载、延时加载图片等

20.ajax是最早出现发送后端请求的技术，属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有先后顺序的话，容易产生回调地狱。fetch号称可以代替ajax的技术，是基于es6中的Promise对象设计的，参数和jQuery中的ajax类似，它并不是对ajax进一步封装，它属于原生js范畴。没有使用XMLHttpRequest对象。axios不是原生js,使用时需要对其进行安装，客户端和服务器端都可以使用，可以在请求和相应阶段进行拦截，基于promise对象

21.单向数据流：所有状态的改变可记录、可跟踪，源头易追溯；所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性；一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data)；如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。

双向数据流：无论数据改变，或是用户操作，都能带来互相的变动，自动更新。

22.router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn

23.vue的extend 构建一个组件和vue.components注册组件一起使用

24.定义组件模版的方法

1、字符串

2、模板字面量

3、<scripttype="x-template"></script>

4、文件组件模板

5、inline-template.

25.在vue项目中引用第三方库

1、绝对路径直接引入在index.html中用script引入<scriptsrc="./static/jquery-1.12.4.js"></script>然后在webpack中配置externalexternals:{'jquery':'jQuery'}在组件中使用时importimport$from'jquery'

2、在webpack中配置aliasresolve:{extensions:['.js','.vue','.json'],alias:{'@':resolve('src'),'jquery':resolve('static/jquery-1.12.4.js')}}然后在组件中import

3、在webpack中配置pluginsplugins:[newwebpack.ProvidePlugin({$:'jquery'})]全局使用，但在使用eslint情况下会报错，需要在使用了 $ 的代码前添加/* eslint-disable*/来去掉 ESLint 的检查。

26.过滤器

全局过滤器Vue.filter('addHobby',(val,hobby)=>{returnval+hobby})

局部过滤器filters:{addHobby(val,hobby){returnval+hobby}}

27.引入scss

安装scss依赖包：npm install sass-loader--save-dev 

npm install node-sass--save-dev在build文件夹下修改 webpack.base.conf.js 文件：在module下的 rules 里添加配置，如下：{test:/\.scss$/,loaders:['style','css','sass']}应用：在vue文件中应用scss时，需要在style样式标签上添加lang="scss"，即<style lang="scss">。

28.axios 的是一种异步请求，用法和ajax类似，安装npm install axios --save 即可使用，请求中包括get,post,put, patch ,delete等五种请求方式，解决跨域可以在请求头中添加Access-Control-Allow-Origin，也可以在index.js文件中更改proxyTable配置等解决跨域问题

29.多个实例引用了相同或相似的方法或属性等，可将这些重复的内容抽取出来作为mixins的js，export出去，在需要引用的vue文件通过mixins属性注入，与当前实例的其他内容进行merge

30.vue-cli无法解决跨域问题。真正解决跨域问的是webpack。只不过vue-cli3.0将webpack的配置继承到了vue.config.js中，才给初学者造成了vue-cli可以解决跨域的错觉。

与在webpack.config.js中配置跨域一样，在vue.config.js中的devServer:{proxy:{}}字段可以编写跨域配置。

31.vue-cli原理就是通过node环境发起git请求，把预先设置好的模板下载下来

32.vue-router共有三种守卫：

1:全局守卫：beforeEach,afterEach

2:路由独享守卫：beforeEnter

3:组件级别的守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave他们执行顺序：全局》路由》组件

除了afterEach全局后置外，其他的守卫中务必要调用next(),否则无法完成导航

还有注意全局前置守卫可以用来进行拦截，（登录拦截）