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(),否则无法完成导航
还有注意全局前置守卫可以用来进行拦截,(登录拦截)