位置: IT常识 - 正文

vue面试题整理(2022-持续更新中...)(vue面试题2020)

编辑：rootadmin

vue面试题整理(2022-持续更新中...) vue中MVVM的理解

推荐整理分享vue面试题整理(2022-持续更新中...)(vue面试题2020)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue面试大全,vue面试题及答案2021,vue面试大全,vue面试题整理简书,vue面试题目及答案,vue面试题及答案2021,vue面试题整理简书,vue面试题汇总,内容如对您有帮助，希望把文章链接给更多的朋友！

M：模型（Model）：数据模型；负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。 V就是：View 视图：负责页面展示，也就是用户界面。主要由 HTML 和 CSS 来构建 VM就是：视图模型（View-Model）：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示通过vue类创建的对象叫Vue实例化对象，这个对象就是MVVM模式中的VM层，模型通过它可以将数据绑定到页面上，视图可以通过它将数据映射到模型上优点

1.低耦合。视图（View）可以独立于Model变化和修改，2.可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑3.前后端分离，开发人员可以专注于业务逻辑（ViewModel）和数据的开发，设计人员可以专注于页面设计为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思？

VUE允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。对于VUE的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。VUE是响应式的（reactive）这是VUE最独特的特性，也就是说当我们的数据变更时，VUE会帮你更新所有网页中用到它的地方。

vue生命周期beforeCreate（创建前）：组件实例被创建之初，组件的属性生效之前//beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法created（创建后）：组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用// data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作beforeMount（挂载前）：在挂载开始之前被调用：相关的 render 函数首次被调用//执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的mounted（挂载后）：在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子//到mounted周期的时候，Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行beforeUpdate（更新前）：组件数据更新之前调用，真实DOM还没被渲染// 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步update（更新后）：组件数据更新之后//页面显示的数据和data中的数据已经保持同步了，都是最新的activated（激活前）：keep-alive专属，组件被激活时调用//当组件被切回来时，再去缓存里找这个组件、触发 activated钩子函数。deactivated（激活后）：keep-alive专属，组件被销毁时调用//当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期beforeDestory（销毁前）：组件销毁前调用//Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁destoryed（销毁后）：组件销毁前调用//这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。 vue面试题整理(2022-持续更新中...)(vue面试题2020)

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

Vue子组件和父组件执行顺序

加载渲染过程：beforeCreate(父) —> created(父)—>beforeMount(父)—>beforeCreate(子)—>created(子)—>beforeMount(子)—>mounted(子)—>mounted(父) 更新过程：beforeUpdate(父) —> beforeUpdate(子) —> update(子) —> update(父) 父组件更新：beforeUpdate(父) —> updated（父）销毁过程：beforeDestory(父) —> beforeDestory(子) —> destoryed(子) —> destoryed(父)

v-el 作用是什么提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。Vue的el属性和$mount优先级？new Vue({ router, store, el: '#app', render: h => h(App)}).$mount('#div')/*当出现上面的情况就需要对el和$mount优先级进行判断，从下面的官方图片我们可以看出来，el的优先级是高于$mount的，因此以el挂载节点为准*/

Vue实现数据双向绑定的原理：Object.defineProperty（）

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。 vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。数据双向绑定示例：

<body> <div id="app"> <input type="text" id="txt"> <p id="show"></p></div></body><script type="text/javascript"> var obj = {} Object.defineProperty(obj, 'txt', { get: function () { return obj }, set: function (newValue) { document.getElementById('txt').value = newValue document.getElementById('show').innerHTML = newValue } }) document.addEventListener('keyup', function (e) { obj.txt = e.target.value })</script>