VUE 面试题

1。vue3.0 和 Vue.2.0 的区别

1.渲染

Vue2.x 使用的 Virtual Dom 实现的渲染

Vue3.0 不论是原生的 html 标签还是 vue 组件，他们都会通过 h 函数来判断，如果是原生 html 标签，在运行时直接通过 Virtual Dom 来直接渲染，同样如果是组件会直接生成组件代码

2.数据监听 默认进行懒观察

Vue2.x 大家都知道使用的是 es5 的 object.defineproperties 中 getter 和 setter 实现的，而 vue3.0 的版本，是基于 Proxy 进行监听的，其实基于 proxy 监听就是所谓的 lazy by default，什么意思呢，就是只要你用到了才会监听，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。 当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

3 按需引入

Vue2.x 中 new 出的实例对象，所有的东西都在这个 vue 对象上，这样其实无论你用到还是没用到，都会跑一变。而 vue3.0 中可以用 ES module imports 按需引入，如：keep-alive 内置组件、v-model 指令，等等。

4 支持** PWA 和 TypeScript**

应用加壳

PWA 全称 Progressive Web App，即渐进式 WEB 应用。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能

解决了哪些问题？

• 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏

• 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能

• 实现了消息推送

它解决了上述提到的问题，这些特性将使得 Web 应用渐进式接近原生 App。

---

2。vue 中 computed 和 watch 的区别

同

computed 和 watch 都是观察页面的数据变化的。

异：

1. computed 只有当页面数据变化时才会计算，当数据没有变化时，它会读取缓存。而 watch 每次都需要执行函数，methods 也是每次都需要执行
2. 数据变化时执行异步操作，这个时候使用 watch 是合适的
3. 如果想深度监听的话，后面加一个deep:true
4. 如果想监听完立马运行的话，后面加一个immediate:true

---

**3.面试官：Vue 优化方式****⭐⭐⭐⭐⭐**

v-if 和 v-show

使用 Object.freeze()方式冻结 data 中的属性，从而阻止数据劫持

组件销毁的时候会断开所有与实例联系，但是除了 addEventListener，所以当一个组件销毁的时候需要手动去 removeEventListener

图片懒加载

路由懒加载

第三方库按需引入

为减少重新渲染和创建 dom 节点的时间，采用虚拟 dom

4.vue 中 v-model  与 v-bind value 的区别

在标签中，可以使用v-model或v-bind将输入框的 value 与 app 的某个变量进行绑定，但是，v-model实施的是双向数据绑定，即双方任何一方的变动都会同步变化到另一方，而v-bind实施的是单向数据流的绑定，可以动态更新 HTML 元素上的属性。就是说 vue 实例中的 data 改变 value 也会变，但是 value 改变，data 不变。

**5.****第一次组件加载会触发哪几个钩子？**

会触发 下面这几个 beforeCreate, created, beforeMount, mounted

6.vue 中   父子组件挂载顺序(mounted)

父组件先初始化 ->  父渲染完毕 ->  子组件开始初始化 ->  子组件挂载完毕 ->  父组件挂载完毕

– 子组件先挂载完毕   父组件最后挂载完毕的。