vue知识点梳理

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使用 想要data数据改变,获取原生DOM内容,可以通过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 钩子函数 ...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容