前端知识扫盲-VUE知识篇一（VUE核心知识）
1、对于Vue是一套渐进式框架的理解
2、对MVVM的理解
3、vue数据双向绑定的原理
4、vue.js的核心是什么？
5、vue中如何编写可复用的组件？
6、什么是vue生命周期和生命周期钩子函数？
7、vue更新数组、对象时触发视图更新的方法，可以顺便讲讲为什么。
8、 v-if 和 v-show 有什么区别
9、vue常用的修饰符
10、vue事件中如何使用event对象？
11、vue如何监听键盘事件中的按键？
12、v-on可以监听多个方法吗？
13、vue中 key 值的作用
14、Vue 组件中 data 为什么必须是函数
15、v-for 与 v-if 的优先级
16、vue中父子组件如何相互调用方法
17、vue父子组件的传值和注意事项
18、兄弟组件的传值（vue中央事件总线的使用）
19、vue中 keep-alive 组件的作用
20、$nextTick的使用
21、解决非工程化项目初始化页面闪动问题
22、v-model语法糖的组件中的使用
23、怎么实现自定义过滤器，常用的过滤器
24、怎么写一个vue指令,指
最近对整个前端的知识做了一次复盘，总结了一些知识点，分享给大家有助于加深印象。
想要更加理解透彻的同学，还需要大家自己去查阅资料或者翻看源码。后面会陆续的更新一些相关注知识点的文章。
文章只提出问题，并给出答案。
目录
1、对于Vue是一套渐进式框架的理解
2、对MVVM的理解
3、vue数据双向绑定的原理
4、vue.js的核心是什么？
5、vue中如何编写可复用的组件？
6、什么是vue生命周期和生命周期钩子函数？
7、vue更新数组、对象时触发视图更新的方法，可以顺便讲讲为什么。
8、 v-if 和 v-show 有什么区别
9、vue常用的修饰符
10、vue事件中如何使用event对象？
11、vue如何监听键盘事件中的按键？
12、v-on可以监听多个方法吗？
13、vue中 key 值的作用
14、Vue 组件中 data 为什么必须是函数
15、v-for 与 v-if 的优先级
16、vue中父子组件如何相互调用方法
17、vue父子组件的传值和注意事项
18、兄弟组件的传值（vue中央事件总线的使用）
19、vue中 keep-alive 组件的作用
20、$nextTick的使用
21、解决非工程化项目初始化页面闪动问题
22、v-model语法糖的组件中的使用
23、怎么实现自定义过滤器，常用的过滤器
24、怎么写一个vue指令,指令是拿来干什么的？
25、vue的计算属性和Watch属性的区别？
26、计算属性的缓存和方法调用的区别
27、vue等单页面应用及其优缺点
28、vue优化首页加载速度的方法
29、vue如何调用 原生app 提供的方法
30、vue中实现切换页面时为左滑出效果
31、vue弹窗后如何禁止滚动条滚动？
32、vue的Store模式
33、vue的性能优化方案
1、对于VUE是一套渐进式框架的理解
他的主张性不强，排他性不强。就是如果你有老系统，你也可以某几个组件使用VUE实现。
2、对MVVM的理解
他就是Model View ViewModel的简写。Model 代表数据层，View代表显示层。ViewModel是Model和View相互交互的桥梁。
3、数据双向绑定实现的原理；
他是使用观察者模式来实现的，使用了Object.definePropety的set和get做的数据劫持。
Observer 观察者，使用Object.definePropety观察数据变化，有变动则通知订阅者；
Watcher 订阅者，收到变化通知，执行相关函数，更新视图，每个指令会有一个update方法，就是通过这个update方法更新视图的；
Compile 解析器，解析DOM，并根据相关指令告诉订阅者需要添加哪些订阅内容；
4、vue.js的核心是什么？
数据驱动（数据双向绑定），模块系统。
5、怎样编写一个VUE组件
这个分两种组件。一种就是平时的页面组件，这个就按照正常写即可。
如果是小组件，需要可复用的。也是按照平时用其他方式写组件思路一样，把可配置的参数，可开放的方法提取出来。只是他的传参方式，和方法开放按照VUE的语法来就可以。比如用porp传参。事件用$emit即可
6、VUE的生命周期，以及他的钩子函数
beforeCreadted 开始创建实例，data,DOM都还是空的；
creadted 实例创建完成，data已初始化
beforeMount 开始挂载（开始解析），DOM也基本初始化了，但具体的filter啊等等这些指令还没替换；
mounted 挂载完成（解析完成）DOM，DATA都初化完成了，也渲染成功了。
beforeUpdate 数据更新开始时触发
updated 数据更新完成时触发
beforeDestroy 组件销毁前触发
destroyed 组件销毁后触发，组件销毁只是解除的事件监听，和绑定。DOM还时会存在的
7、vue更新数组、对象时触发视图更新的方法，可以顺便讲讲为什么。
这不能更新，是因为Objcet.defineproperty的set方法，如果直接更数组，对象的话他是不会触发的。而VUE的更新就是用的此方法做的监听。所以他的视图也就不会更新了。这set不更新的原因就是因为这是引用类型的数据。改变的是内存数据的本身，变量的引用指针并没有发生变化，所以set就不会被执行。知道了原因，解决就很简单了。（对象暂时说不通）
a、把整个数组或对象进行重新赋值。
b、vue已经把数组的变异方法进行了包裹，也都是可以使用的。
c、使用vue的set方法设置，这至于他的处理方式暂时还没研究。
8、v-if 和 v-show 有什么区别
v-if 是直接删除添加节点；v-show是控制点的display显示隐藏
9、vue常用的修饰符
.stop 防止冒泡
.captrue 防止事件捕获
.prevent 防止默认事件
.up 向上键
.down 向下建等等。。。
10、vue事件中如何使用event对象？
不带括号的事件方法，默认参数是event对象。需要带括号传递参数的可以加$event对象
11、vue如何监听键盘事件中的按键？
事件后面加.13 按键数字，或者常用按键修饰符
12、v-on可以监听多个方法吗？
可以。<input @click="" @foucs="" @input=""/>
13、vue中 key 值的作用
给元素添加了一个唯一性标识，当数据更新时能更快的获取到更新内容。可以提高性能。个人理解是加了key就是使用ID查找标签更新内容，没加key就是使用标签查找形式更新。ID可以更快速精准。
14、Vue 组件中 data 为什么必须是函数
因为data是存在vue构造函数的原型里面，原型是会共享的。如果直接赋值，会导致其他vue实例也跟着受影。
15、v-for 与 v-if 的优先级
v-for的优先级比v-if高，所以这两个就不应该用到一起；
16、vue中父子组件如何相互调用方法
父组件调子组件用$refs获取子组件实例，从而实现调用子组件方法或修改子组件的数据；
子组件调父组件可用$emit向父组件派发事件，父组件需要v-on订阅事件；
17、vue父子组件的传值和注意事项
父子组件使用props传值，但他是一个单向下行数据绑定模式。
如果需要做成双向数据绑定，可以加.sync修饰符来实现。
18、兄弟组件之间的传值（中央事件的使用）
可以使用VUEX和中央事件两种方法：VUEX请看VUEX的知识篇章
兄弟组件传值可以建立一个空的VUE实例，来作为中转站。通过$emit事件形式来进行传值。这个空实例就是所谓的中央事件总线；
中央事件总线可以注入到全局，避免每个模块还需要做引入动作
建议大项目用vuex小项目用中央事件，因为中央事件代码量轻
19、vue中 keep-alive 组件的作用
缓存当前组件状态，让其跳出后再回来还保留最后浏览状态。他有include与exclude两个属性，允许组件有条件地进行缓存。可以结合路由缓存页面组件。在meat中配置keep-alive属性
20、$nextTick的使用
在数据更新后需要立马操作新DOM的情况下需要用到。
21、解决项目初始化页面闪动问题
添加v-cloak指令
22、v-model语法糖的组件中的使用
v-model就是v-value 和 v-on:input事件的结合；输入框触发input事件时更新了v-value绑定的数据值。
23、自定义过滤器，以及常用的过滤器
使用filter定义过滤器，以管道形式使用。value | filter，需要过滤的值会作为第一个参数传入filter方法;
货币格式，时间格式化，首字母大写，补0
24、怎么写一个vue指令,指令是拿来干什么的？
用与操作DOM，比如给数据块加入loading效果，可使实现一个loading指令；
指令使用directive进行注册
25、vue的计算属性和Watch属性的区别？
计算属性监听的事依赖值，依赖值变了然后改变当前属性值。watch监听的事值本身的变化，发生变化了再去做一系列的操作。
能用计算属性的尽量用计算属性，少用watch
26、计算属性的缓存和方法调用的区别
计算属性是监听依赖值变化会自动重新执行，如果没变化取的是缓存的值，不执行计算方法。
调用方法是需要每次手动调用，而且每次都会重新执行计算。
27、vue等单页面应用及其优缺点
优点：数据双向绑定，组件化，轻量；
缺点：浏览器只支持到IE9；SEO不友好，可以通过服务端渲染做支持；第一次加载首页时间较长；
28、如何提高VUE首页加载速度
路由按需加载，必须做的。配置路由时使用 resolve require加载页面组件
线上包去调map文件
第三方库使用页面引入方式，不要放到webpack打包文件里面。但需要配置webpack的externals，这个属性的配置用处可以查阅相关资料。
29、vue如何调用 原生app 提供的方法
所有交互都是在wiond对象上绑定方法，现有webViewJSbridge进行与原生APP的交互，JSbridge是通过一个隐藏的iframe实现；
30、vue中实现切换页面时为左滑出效果
使用transition组件实现
31、vue弹窗后如何禁止滚动条滚动？
直接设置body益出隐藏，并阻止页面的的滚动默认事件
32、vue的Store模式
vue的store模式就是状态管理模式，平时做状态管理的时候都用的VUEX，但他用起来比较繁琐，我们可以自己按照vuex的思路也就是store模式实现一个简单的状态管理功能。实现很简单：就是定义一个全局对象。有需要用到这个对象的组件，直接在组件里把全局对象赋值一就可以了。详细可以看官方文档。
33、vue的性能优化方案
1、页面组件使用路由懒加载，不要打包在一个文件里
2、资源压缩，屏蔽map文件
3、v-if 和 v-show的选择调用
v-if是按需加载的，只有为true的时候才会加载相应资源
v-show初始化的时候不管是true还是false都会加载，操作频繁的可以选择它。
4、使用key标记 方便vue更新时更快的找到相关资源
5、骨架屏加载
希望对大家有帮助，觉得有用的帮忙点个赞。谢谢！
以上是 前端知识扫盲-VUE知识篇一（VUE核心知识） 的全部内容， 来源链接： utcz.com/z/380030.html
