1、webpack是静态模块打包工具
可以减少文件数量,缩减代码体积,提高网页打开速度,主要作用是分析压缩和打包代码。
2、改变端口号和自动唤起浏览器,在webpack.config.js中添加配置如下:
moudle.exports = {
devServer: {
//自定义的端口号
port: 3000,
//配置自动唤起浏览器
open: true
}
}
3、main.js和App.vue以及index.html的关系是
App.vue -> main.js -> index.html
4、MVVM设计模式
模型,、视图、视图模型,双向关联的设计模式;
用数据来驱动视图改变,操作DOM的事,被vue源码干了。
5、MVVM的优点
减少DOM操作,提高渲染效率,让开发专注于数据处理,提高开发效率
6、v-on事件对象
在vue事件处理函数中,想要拿到事件对象,如果是没有传参,可以直接用第一个形参接收,如果有实参,通过$event指代事件对象传给事件处理函数
7、v-model双向绑定
双向绑定,即把value属性和Vue数据变量双向绑定到一起,这样不论变量变化还是视图变化,都能使对方一起改变
8、v-html和v-text
v-text和v-html都可以设置标签显示的内容,他们的区别是v-text把值当成普通字符串,而v-html把值当成标签进行解析
9、v-show和v-if
v-show 用的css方法display:none隐藏,而v-if 直接从DOM树上移除,因此频繁切换的时候应该使用v-show,v-if每次隐藏再出现都要经历销毁再渲染的过程,对性能影响较大。v-if可以配合v-else使用,满足条件时渲染v-if,不满足时渲染v-else,多个条件判断可使用else-if
10、vue计算属性和侦听器-v-for更新检测
数组变更方法,会导致v-for更新、页面更新;
数组非变更方法,返回的是新数组,不会导致v-for更新,可以拿返回的新数组替换旧数组或者this.$set()方法更新某个值;
注:
数组变更方法:push, pop, shift, unshift, splice, sort, reverse
数组非变更方法:filter, concat, slice
11、v-for更新时, 是如何操作DOM的?
循环出新的DOM结构, 和旧的DOM结构对比, 尝试就地复用原有标签, 更新内容。
12、单项数据流
从父到子的数据流向, 叫单向数据流。原因是子组件修改, 不通知父级, 造成数据不一致性,Vue规定了props里的变量, 本身是只读的。
13、子向父传值
如果想要实现子向父传值,可以让子组件触发父组件的自定义事件方法。
父组件内, 给组件@自定义事件=“父methods函数”
子组件内, 恰当时机this.$emit(‘自定义事件名’, 值)
14、axios
ajax是 一种前端异步请求后端的技术;ajax原理是浏览器window接口的XMLHttpRequest;axios是基于原生ajax+Promise技术封装通用于前后端的请求库
15、如何拿到Promise里ajax的成功或失败的结果?
then() / catch()
16、nextTick实现;
例:当点击按钮变量值+1的时候,马上获取原生DOM内容。这个时候会发现,获取到的还是之前的,原因是vue更新DOM是异步的,此时可以使用$nextTick
17、.data改变更新DOM是同步还是异步的?
异步
18、我们可以在哪里访问到更新后的DOM呢?
this.$nextTick里的函数体
updated生命周期钩子函数
19、路由
路由是一种映射关系
Vue中的路由是路径和组件的映射关系
20、为什么用路由
单页面应用(SPA): 所有功能在一个html页面上实现;
前端路由作用: 实现业务场景切换
优点:
整体不刷新页面,用户体验更好
数据传递容易, 开发效率高
缺点:
首次加载会比较慢一点。不利于seo
21、路由重定向
网页第一次打开时,没有默认的页面,可以使用路由重定向,匹配path后, 强制跳转path路径。一般来说,网页打开url默认hash值是/路径,redirect是设置要重定向到哪个路由路径。
当用户访问的路由路径不存在时,可以重定向至404页面,在路由的最后, path匹配*(任意路径)即可,若前面都没有匹配上,那么就会命中最后这个
22、路由模式设置
路由有两种模式,hash模式和history模式,我们在实例化路由对象时, 传入mode选项和值就可以修改路由模式
23、hash模式和history模式的区别:
原理不同。
hash模式的实现原理是通过监听hashChange事件来实现的,前端js把当前hash地址对应的组件渲染到浏览器中。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录,并更换地址栏地址信息,但是页面不会刷新,需要手动调用地址变化之后的处理函数,并在处理函数内部决定跳转逻辑;监听popstate事件是为了响应浏览器的前进后退功能。
表现不同。
hash模式会在地址栏中有#号,而history模式没有;
由于history模式的实现原理用到H5的新特性,所以它对浏览器的兼容性有要求(IE >= 10)。
history模式特点
history模式开发的SPA项目,需要服务器端做额外的配置,否则会出现刷新白屏(链接分享失效)。原因是页面刷新时,浏览器会向服务器真的发出对这个地址的请求,而这个文件资源又不存在,所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。
24:、路由前置守卫
用户在进行页面跳转的时候,如果没有登录,应该把他打回去登录页,这个就叫做权限控制,可以使用全局前置守卫来实现,语法:lrouter.beforeEach((to, from, next) =>{}),注意一定要调next()才会跳转下一页
25、什么是路由守卫?
路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由;
26、组件缓存
针对暂时看不见的组件,最好不要频繁销毁,否则会影响性能,我们可以使用vue内置的keep-alive组件把要缓存的组件包起来;
如果只想缓存某个组件或者不缓存某个组件,可以给keep-alive组件添加include或者exclude属性,Include (包含 – 缓存),exclude(不包含 – 不缓存)
27、Vuex
Vuex 是 vue 项目中实现大范围数据共享的技术方案。
作用:能够方便、高效地实现组件之间的数据共享。
使用Vuex的好处:
数据的存取一步到位,不需层层传递
数据的流动非常清晰
存储在 Vuex 中的数据都是响应式的
28、state的基本使用
概念:State 本质上就是 Object 对象
作用:用来存储全局共享的数据
29、State、组件、Mutation之间的关系
State:全局存储共享数据的地方
Vue 组件:使用数据的地方
Mutation:专门负责修改 State 中的数据
30、父组件可以监听到子组件的生命周期吗?
有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:
// Parent.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
console.log('父组件监听到 mounted 钩子函数 ...');
},
// Child.vue
mounted(){
console.log('子组件触发 mounted 钩子函数 ...');
},
// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...