vue面试题

木头没有瓜

已于 2022-02-26 18:13:01 修改

阅读量469

点赞数

分类专栏：面试题文章标签： vue.js javascript 前端

于 2022-02-07 14:46:46 首次发布

本文链接：https://blog.csdn.net/weixin_40918145/article/details/122808761

版权

面试题专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1、vue生命周期钩子函数详解

https://blog.csdn.net/weixin_40918145/article/details/122808752

2、vue 如何实现多页面应用 vue 如何实现多页面应用 - 简书

3、webpack优化

https://blog.csdn.net/weixin_40918145/article/details/122809309

5、什么是mvvm

mvvm 是什么_木头没有瓜的博客-CSDN博客

6、vue和react的区别是什么？ https://blog.csdn.net/weixin_40918145/article/details/122813049

7、Vue祖孙组件 Vue祖孙组件_木头没有瓜的博客-CSDN博客_vue爷孙组件

8、vue和react的diff算法的区别 vue和react的diff算法的区别 - 看风景就 - 博客园

9、vue的diff算法原理 vue的diff算法原理_老电影故事的博客-CSDN博客_diff算法原理

10、 v-model 原理 v-model的实现原理 - 简书

11、vue3.0和vue2.0 Vue3.0和Vue2.0的区别_xyx107的博客-CSDN博客_vue3.0和2.0的区别

12、vue-cli 替我们做了哪些工作？vue-cli文件用途_Queen_zdd的博客-CSDN博客_vue-cli作用

13、Vue中EventBus的原理 Vue中EventBus的实现 - 简书

14、Vue 组件间通信有哪些方式 Vue基础之组件通信(3)provide和inject、$ attrs和$ listeners

props/$emit
$emit/$on
vuex
$attrs/$listeners
provide/inject
$parent/$children 与 ref

15、vue-loader 的实现原理是什么？ Webpack 案例 —— vue-loader 原理分析 - 知乎

、

.vue 文件 --> .js 文件
ES6 语法 --> ES5 语法
Sass,Less,Stylus --> CSS
对 jpg,png,font 等静态资源的处理
热更新
定义环境变量，区分 dev 和 production 模式
...

如果开发者需要补充或修改默认设置，需要在 package.json 同级下新建一个 vue.config.js 文件

13、虚拟 DOM 实现原理

虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
状态变更时，记录新树和旧树的差异
最后把差异更新到真正的dom中

14、Vue中如何监控某个属性值的变化？

// 比如现在需要监控data中，obj.a 的变化。Vue中监控对象属性的变化你可以这样：
watch: {
      obj: {
      handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }
  }
// deep属性表示深层遍历，但是这么写会监控obj的所有属性变化，并不是我们想要的效果，所以做点修改：
watch: {
   'obj.a': {
      handler (newName, oldName) {
        console.log('obj.a changed')
      }
   }
  }
// 还有一种方法，可以通过computed 来实现，只需要：
computed: {
    a1 () {
      return this.obj.a
    }
}

15、Vue 组件 data 为什么必须是函数？
因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了

16、Vue 中怎么自定义过滤器

可以在main.js用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值

// 注册
Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})
// dom使用
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>

17、v-for指令循环中key属性有什么作用？ v-for指令循环中key属性有什么作用？_木头没有瓜的博客-CSDN博客

18、观察者模式和发布订阅模式的区别观察者模式和发布订阅模式的区别_木头没有瓜的博客-CSDN博客_观察者模式和发布订阅模式的区别

19、vue 双向绑定原理 vue双向绑定原理及实现 - 简书 https://github.com/calabasher/Vue-mvvm

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

a.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

b.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。

c.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。

20、vue 怎么实现seo vue 怎么实现seo_木头没有瓜的博客-CSDN博客

21、vue history 和 hash 模式的区别 Vue中hash模式和history模式的区别_木头没有瓜的博客-CSDN博客_vuehash模式和history

22、keepAlive 原理 Vue Keep-alive 原理_木头没有瓜的博客-CSDN博客
虚拟dom 和虚拟node 详解Vue中的虚拟DOM_慕课手记
diff算法 vue核心之虚拟DOM(vdom) - 简书

23、vue中的data要用return返回 Vue中的data为什么要用return{}包裹起来 - 草木深 - 博客园

木头没有瓜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue面试题

1、vue生命周期钩子函数详解https://blog.csdn.net/weixin_40918145/article/details/122808752https://blog.csdn.net/weixin_40918145/article/details/122808752
复制链接

扫一扫

专栏目录