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、

4、文件组件模板

5、inline-template.

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

1、绝对路径直接引入在index.html中用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",即