曾被问及的一些关于VUE的面试题

由于没有系统的专研过VUE，关于VUE的一些理论知识点，没有去挖心思记忆及理解，只是在实际工作中知道怎么去使用。所以曾在面试的过程中被人嫌弃过，这一直是小编的痛点，/(ㄒoㄒ)/~~

在这里总结一下，也让自己长点心。

请讲述下VUE的MVVM的理解？

MVVM 是 Model-View-ViewModel的缩写，即将数据模型与数据表现层通过数据驱动进行分离，从而只需要关系数据模型的开发，而不需要考虑页面的表现，具体说来如下：
Model代表数据模型：主要用于定义数据和操作的业务逻辑
View代表页面展示组件（即dom展现形式）：负责将数据模型转化成UI 展现出来。
ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

vue父子组件通信

传递参数可以使用props，传递函数可以直接在调用子组件的时候传递自定义事件，并使用$emit来调用。

如何封装一个vue组件？

根据业务需求，建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。
准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
封装完毕了，直接调用即可

computed和watch的用法和区别？

computed
1、变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号 。
2、根据传入的变量的变化 进行结果的更新。
3、计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算一次，为了进行不必要的资源消耗，选择用计算属性。
watch
1、计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。
2、当有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，使用 watch。
总结：
1、计算属性变量在computed中定义，属性监听在data中定义。
2、计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。

Vue2.0和Vue3.0的区别

1、项目目录结构
vue-cli2.0与3.0在目录结构方面，有明显的不同
vue-cli3.0移除了配置文件目录，config 和 build 文件夹
同时移除了 static 静态文件夹，新增了 public 文件夹，打开层级目录还会发现， index.html 移动到 public 中
2、配置项
3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同
没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变
3、渲染
Vue2.x使用的Virtual Dom实现的渲染
Vue3.0不论是原生的html标签还是vue组件，他们都会通过h函数来判断，如果是原生html标签，在运行时直接通过Virtual Dom来直接渲染，同样如果是组件会直接生成组件代码
4、数据监听
Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的，而vue3.0的版本，是基于Proxy进行监听的，其实基于proxy监听就是所谓的lazy by default，什么意思呢，就是只要你用到了才会监听，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。
5、按需引入
Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等。

vue过滤器有哪些定义方式？

在页面内部自定义【使用filters指令】及外部引入【全局定义】

vue异步组件

当我们的项目足够大，使用的组件就会很多，此时如果一次性加载所有的组件是比较花费时间的。一开始就把所有的组件都加载是没必要的一笔开销，此时可以用异步组件来优化一下。

异步组件简单的说就是只有等到在页面里显示该组件的时候才会从服务器加载，不显式的话就不会加载，这样即可提高客户端的访问速度也可以降低对服务器的请求次数，可谓优化的一个利器。

异步组件常用有3种异步组件的实现:工厂函数、Promise加载和高级异步组件。

注:一般的项目都是在vue-router的路由里面创建vue-router实例时通过routes属性指定路由的，其实在vue里面也可以实现。