seo隐蔽dom_Vue面试题整理

目录

1、对MVVM的理解

2、vue常见指令

3、v-if 和 v-show 有什么差异？

4、Vue核心思想：数据驱动、组件化

5、Vue 生命周期

6、组件中 data 为什么是一个函数？

7、Vue 组件间通信有哪几种办法？

8、computed 和 watch 的差异和利用的场景？

9、虚拟 DOM

10、vue-router 路由模式有几种？

11、delete和Vue.delete删除数组的差异

12、SPA 单页面的理解，它的优缺陷分别是什么？

13、简述Vue的相应式事理

14、Vue中如何在组件内部实现一个双向数据绑定？

15、 Vue中如何监控某个属性值的变革？

MVVM分为Model、View、ViewModel。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；泛指后端进行的各种业务逻辑处理和数据操控，对付前端来说便是后端供应的 api 接口。
View 代表UI视图，卖力数据的展示；视图层，也便是用户界面。
前端紧张由 HTML 和 CSS 来构建 。
ViewModel 卖力监听 Model 中数据的改变并且掌握视图的更新，处理用户交互操作；Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。
因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开拓者只须要专注对数据的掩护操作即可，而不须要自己操作 dom。

ViewModel 是由前端开拓职员组织天生和掩护的视图数据层。
在这一层，前端开拓者对从后端获取的 Model 数据进行转换处理，做二次封装，以天生符合 View 层利用预期的视图数据模型。
须要把稳的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。
这样的封装使得 ViewModel 可以完全地去描述 View 层。

MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展现在 View 层，前端开拓者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开拓者只须要处理和掩护 ViewModel，更新数据视图就会自动得到相应更新。
这样 View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 卖力与 Model 层交互，这就完备解耦了 View 层和 Model 层，这个解耦是至关主要的，它是前后端分离方案履行的主要一环。

2、vue常见指令

1. v-textv-text紧张用来更新textContent，可以等同于JS的text属性。

<span v-text="msg"></span>

这两者等价：

<span>插值表达式{{msg}}</span>

2. v-html双大括号的办法会将数听说明为纯文本，而非HTML。
为了输出真正的HTML，可以用v-html指令。
它等同于JS的innerHtml属性。

<div v-html="rawHtml"></div>

这个div的内容将会更换成属性值rawHtml，直接作为HTML进行渲染。

3. v-prev-pre紧张用来跳过这个元素和它的子元素编译过程。
可以用来显示原始的Mustache标签。
跳过大量没有指令的节点加快编译。

<div id="app"> <span v-pre>{{message}}</span> //这条语句不进行编译 <span>{{message}}</span></div>

终极仅显示第二个span的内容

4. v-cloak这个指令是用来保持在元素上直到关联实例结束时进行编译。

<div id="app" v-cloak> <div> {{message}} </div></div><script type="text/javascript"> new Vue({ el:'#app', data:{ message:'hello world' } })</script>

在页面加载时会闪烁（插值闪烁问题），先显示:

<div> {{message}}</div>

然后才会编译为：

<div> hello world!</div>

可以用v-cloak指令办理插值表达式闪烁问题，v-cloak在css中用属性选择器设置为display: none;

5. v-oncev-once关联的实例，只会渲染一次。
之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

<span v-once>This will never change:{{msg}}</span> //单个元素<div v-once>//有子元素 <h1>comment</h1> <p>{{msg}}</p></div><my-component v-once:comment="msg"></my-component> //组件<ul> <li v-for="i in list">{{i}}</li></ul>

上面的例子中，msg,list纵然产生改变，也不会重新渲染。

6. v-ifv-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

<a v-if="ok">yes</a>

如果属性值ok为true，则显示。
否则，不会渲染这个元素。

7. v-elsev-else是搭配v-if利用的，它必须紧跟在v-if或者v-else-if后面，否则不起浸染。

<a v-if="ok">yes</a><a v-else>No</a>

8. v-else-ifv-else-if充当v-if的else-if块，可以链式的利用多次。
可以更加方便的实现switch语句。

<div v-if="type==='A'"> A</div><div v-else-if="type==='B'"> B</div><div v-else-if="type==='C'"> C</div><div v-else> Not A,B,C</div>

9. v-show

<h1 v-show="ok">hello world</h1>

也是用于根据条件展示元素。
和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。
但是v-show的元素会始终被渲染并保存在dom中，它只是大略的切换css的dispaly属性。

把稳：v-if有更高的切换开销v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则利用v-show较好；如果在运行时条件不太可能改变，则v-if较好

10. v-for用v-for指令根据遍历数组来进行渲染有下面两种遍历形式

<div v-for="(item,index) in items"></div> //利用in，index是一个可选参数，表示当前项的索引<div v-for="item of items"></div> //利用of

下面是一个例子，并且在v-for中，拥有对父浸染域属性的完备访问权限。

<ul id="app"> <li v-for="item in items"> {{parent}}-{{item.text}} </li></ul><script type="text/javascript"> var example = new Vue({ el:'#app', data:{ parent:'父浸染域' items:[ {text:'文本1'}, {text:'文本2'} ] } })</script>

会被渲染为：

<ul id="app"> <li>父浸染域-文本1</li> <li>父浸染域-文本2</li></ul>

把稳：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。
这意味着v-if将运行在每个v-for循环中

11. v-bindv-bind用来动态的绑定一个或者多个特性。
没有参数时，可以绑定到一个包含键值对的工具。
常用于动态绑定class和style。
以及href等。
简写为一个冒号【 ：】

<1>工具语法：

//进行类切换的例子<div id="app"> <!--当data里面定义的isActive即是true时，is-active这个类才会被添加起浸染--> <!--当data里面定义的hasError即是true时，text-danger这个类才会被添加起浸染--> <div :class="{'is-active':isActive, 'text-danger':hasError}"></div></div><script> var app = new Vue({ el: '#app', data: { isActive: true, hasError: false } })</script>

渲染结果：

<!--由于hasError: false，以是text-danger不被渲染--><div class = "is-active"></div>

<2>数组语法

<div id="app"> <!--数组语法：errorClass在data对应的类一定会添加--> <!--is-active是工具语法，根据activeClass对应的取值决定是否添加--> <p :class="[{'is-active':activeClass},errorClass]">12345</p></div><script> var app = new Vue({ el: '#app', data: { activeClass: false, errorClass: 'text-danger' } })</script>

渲染结果：

<!--由于activeClass: false，以是is-active不被渲染--><p class = "text-danger"></p>

<3>直接绑天命据工具

<div id="app"> <!--在vue实例的data中定义了classObject工具，这个工具里面是所有类名及其真值--> <!--当里面的类的值是true时会被渲染--> <div :class="classObject">12345</div></div><script> var app = new Vue({ el: '#app', data: { classObject:{ 'is-active': false, 'text-danger':true } } })</script>

渲染结果：

<!--由于'is-active': false，以是is-active不被渲染--><div class = "text-danger"></div>

12. v-model这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。
由于它选择Vue实例数据做为详细的值。

<div id="app"> <input v-model="somebody"> <p>hello {{somebody}}</p></div><script> var app = new Vue({ el: '#app', data: { somebody:'小明' } })</script>

这个例子中直接在浏览器input中输入别的名字，下面的p的内容会直接随着变。
这便是双向数据绑定。

v-model润色符<1> .lazy默认情形下，v-model同步输入框的值和数据。
可以通过这个润色符，转变为在change事宜再同步。

<input v-model.lazy="msg">

<2> .number自动将用户的输入值转化为数值类型

<input v-model.number="msg">

<3> .trim自动过滤用户输入的首尾空格

<input v-model.trim="msg">

13. v-onv-on紧张用来监听dom事宜，以便实行一些代码块。
表达式可以是一个方法名。
简写为：【 @ 】

<div id="app"> <button @click="consoleLog"></button></div><script> var app = new Vue({ el: '#app', methods:{ consoleLog:function (event) { console.log(1) } } })</script>

事宜润色符

.stop 阻挡事宜连续传播.prevent 事宜不再重载页面.capture 利用事宜捕获模式,即元素自身触发的事宜先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事宜将只会触发一次.passive 见告浏览器你不想阻挡事宜的默认行为

<!-- 阻挡单击事宜连续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事宜不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 润色符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有润色符 --><form v-on:submit.prevent></form><!-- 添加事宜监听器时利用事宜捕获模式 --><!-- 即元素自身触发的事宜先在此处处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事宜不是从内部元素触发的 --><div v-on:click.self="doThat">...</div><!-- 点击事宜将只会触发一次 --><a v-on:click.once="doThis"></a><!-- 滚动事宜的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成 --><!-- 这个中包含 `event.preventDefault()` 的情形 --><div v-on:scroll.passive="onScroll">...</div>

利用润色符时，顺序很主要；相应的代码会以同样的顺序产生。
因此，用v-on:click.prevent.self会阻挡所有的点击，而 v-on:click.self.prevent 只会阻挡对元素自身的点击。

作者：klmhly链接：https://www.jianshu.com/p/c4a87e1b4ef7来源：简书著作权归作者所有。
商业转载请联系作者得到授权，非商业转载请注明出处。

共同点：v-if 和 v-show 都能实现元素的显示隐蔽

差异：

1. v-show 只是大略的掌握元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；

2. v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；

3. v-if 有更高的切换开销，v-show 切换开销小；

4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有

5. v-if 可以搭配 template 利用，而 v-show 弗成

4、Vue核心思想：数据驱动、组件化

一、数据驱动

传统的前端数据交互是用Ajax从做事端获取数据，然后操作DOM来改变视图；或者前端交互要改变数据时，又要再来一次上述步骤，而手动操作DOM是一个繁琐的过程且易出错。
Vue.js 是一个供应了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。
它让开发者省去了操作DOM的过程，只须要改变数据。
Vue会通过Dircetives指令，对DOM做一层封装，当数据发生改变会关照指令去修正对应的DOM，数据驱动DOM变革，DOM是数据的一种自然映射。
Vue还会对操作进行监听，当视图发生改变时，vue监听到这些变革，从而改变数据，这样就形成了数据的双向绑定。
Vue是一种MVVM框架。
而DOM是数据的一个种自然映射。
传统的模式是通过Ajax要求从model要求数据，然夹帐动的触发DOM传入数据修正页面。
Vue中，Directives对view进行了封装，当model里的数据发生变革是，Vue就会通过Directives指令去修正DOM。
同时也通过DOM Listener实现对视图view的监听，当DOM改变时，就会被监听到，实现model的改变，实现数据的双向绑定。

二、组件相应事理数据（model）改变驱动视图（view）自动更新

当你把一个普通的 JavaScript 工具传给 Vue 实例的 data选项，Vue 将遍历此工具所有的属性，并利用 Object.defineProperty 把这些属性全部转为 getter/setter。
Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也便是为什么 Vue 不支持 IE8 以及更低版本浏览器的缘故原由。
用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修正时关照变革。
这里须要把稳的问题是浏览器掌握台在打印数据工具时 getter/setter 的格式化并不同，以是你可能须要安装 vue-devtools 来获取更加友好的检讨接口。
每个组件实例都有相应的 watcher 实例工具，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会关照watcher重新打算，从而致使它关联的组件得以更新。

三、组件化

扩展HTML元素，封装可重用的代码。
每一个组件都对应一个ViewModel。
页面上每个独立的可视/可交互区域都可以视为一个组件。
每个组件对应一个工程目录，组件所须要的各种资源在这个目录下就进掩护。
页面是组件的容器，组件可以嵌套自由组合形成完全的页面。

组件化实现了扩展HTML元素，封装可用的代码。
页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录，组件所须要的各种资源在这个目录下就近掩护；页面不过是组件的容器，组件可以嵌套自由组合形成完全的页面。

参考链接：Vue的核心思想是什么.........._钢蛋快闭嘴的博客-CSDN博客_vue的核心

​

为什么组件中的 data 必须是一个函数，然后 return 一个工具，而 new Vue 实例里，data 可以直接是一个工具？

// datadata() { return {message: "子组件",childName:this.name }}// new Vuenew Vue({ el: '#app', router, template: '<App/>', components: {App}})

由于组件是用来复用的，且 JS 里工具是引用关系，如果组件中 data 是一个工具，那么这样浸染域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以掩护一份被返回工具的独立的拷贝，组件实例之间的 data 属性值不会相互影响；而 new Vue 的实例，是不会被复用的，因此不存在引用工具的问题。

7、Vue 组件间通信有哪几种办法？

Vue 组件间通信是口试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 节制的越闇练。
Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别先容每种通信办法且会解释此种方法可适用于哪类组件间通信。

（1）props / $emit 适用 父子组件通信

这种方法是 Vue 组件的根本，相信大部分同学耳闻能详，以是此处就不举例展开先容。

（2）ref 与 $parent / $children 适用 父子组件通信

ref：如果在普通的 DOM 元素上利用，引用指向的便是 DOM 元素；如果用在子组件上，引用就指向组件实例$parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中心事宜总线（事宜中央），用它来触发事宜和监听事宜，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners 适用于 隔代组件通信

$attrs：包含了父浸染域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。
当一个组件没有声明任何 prop 时，这里会包含所有父浸染域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。
常日合营 inheritAttrs 选项一起利用。
$listeners：包含了父浸染域中的 (不含 .native 润色器的) v-on 事宜监听器。
它可以通过 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于 隔代组件通信

先人组件中通过 provider 来供应变量，然后在子孙组件中通过 inject 来注入变量。
provide / inject API 紧张办理了跨级组件间的通信问题，不过它的利用场景，紧张是子组件获取上级组件的状态，跨级组件间建立了一种主动供应与依赖注入的关系。

（6）Vuex 适用于 父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 运用程序开拓的状态管理模式。
每一个 Vuex 运用的核心便是 store（仓库）。
“store” 基本上便是一个容器，它包含着你的运用中大部分的状态 ( state )。

Vuex 的状态存储是相应式的。
当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变革，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一路子便是显式地提交 (commit) mutation。
这样使得我们可以方便地跟踪每一个状态的变革。

computed： 是打算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新打算 computed 的值；watch： 更多的是「不雅观察」的浸染，类似于某些数据的监听回调 ，每当监听的数据变革时都会实行回调进行后续操作；利用场景：

当我们须要进行数值打算，并且依赖于其它数据时，该当利用 computed，由于可以利用 computed 的缓存特性，避免每次获取值时，都要重新打算；当我们须要在数据变革时实行异步或开销较大的操作时，该当利用 watch，利用 watch 选项许可我们实行异步操作 ( 访问一个 API )，限定我们实行该操作的频率，并在我们得到终极结果前，设置中间状态。
这些都是打算属性无法做到的。

优点：

担保性能下限： 框架的虚拟 DOM 须要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，以是它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以担保在你不须要手动优化的情形下，依然可以供应还不错的性能，即担保性能的下限；无需手动操作 DOM： 我们不再须要手动去操作 DOM，只须要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的办法更新视图，极大提高我们的开拓效率；跨平台： 虚拟 DOM 实质上是 JavaScript 工具,而 DOM 与平台强干系，比较之下虚拟 DOM 可以进行更方便地跨平台操作，例如做事器渲染、weex 开拓等等。

缺陷:

无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分运用的性能需求，但在一些性能哀求极高的运用中虚拟 DOM 无法进行针对性的极致优化。

虚拟 DOM 实现事理：

虚拟 DOM 的实现事理紧张包括以下 3 部分：

用 JavaScript 工具仿照真实 DOM 树，对真实 DOM 进行抽象；diff 算法 — 比较两棵虚拟 DOM 树的差异；pach 算法 — 将两个虚拟 DOM 工具的差异运用到真正的 DOM 树。

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值。

12、SPA 单页面的理解，它的优缺陷分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。
一旦页面加载完成，SPA 不会由于用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：

用户体验好、快，内容的改变不须要重新加载全体页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对做事器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端卖力数据处理；

缺陷：

初次加载耗时多：为实现单页 Web 运用功能及显示效果，须要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；提高退却撤退路由管理：由于单页运用在一个页面中显示所有的内容，以是不能利用浏览器的提高退却撤退功能，所有的页面切换须要自己建立堆栈管理；SEO 难度较大：由于所有的内容都在一个页面中动态更换显示，以是在 SEO 上其有着天然的弱势。

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪干系依赖，在属性被访问和修正时关照变革。
每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会关照 watcher 重新打算，从而致使它关联的组件得以更新。

​

14、Vue中如何在组件内部实现一个双向数据绑定？

假设有一个输入框组件，用户输入时，同步父组件页面中的数据详细思路：父组件通过 props 传值给子组件，子组件通过 $emit 来关照父组件修正相应的props值，详细实现如下：

import Vue from 'vue'const component = { props: ['value'], template: ` <div> <input type="text" @input="handleInput" :value="value"> </div> `, data () { return { } }, methods: { handleInput (e) { this.$emit('input', e.target.value) } }}new Vue({ components: { CompOne: component }, el: '#root', template: ` <div> <comp-one :value1="value" @input="value = arguments[0]"></comp-one> </div> `, data () { return { value: '123' } }})

可以看到，当输入数据时，父子组件中的数据是同步改变的：

​

​

我们在父组件中做了两件事，一是给子组件传入props，二是监听input事宜并同步自己的value属性。
那么这两步操作能否再精简一下呢？答案是可以的，你只须要修正父组件：

template: ` <div> <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>--> <comp-one v-model="value"></comp-one> </div> `

xxxxxxxxxxbrtemplate: `br <div>br <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->br <comp-one v-model="value"></comp-one>br </div>br `br

v-model 实际上会帮我们完成上面的两步操作。

15、 Vue中如何监控某个属性值的变革？

比如现在须要监控data中，obj.a 的变革。
Vue中监控工具属性的变革你可以这样：

watch: { obj: { handler (newValue, oldValue) { console.log('obj changed') }, deep: true } }

xxxxxxxxxxbrwatch: {br obj: {br handler (newValue, oldValue) {br console.log('obj changed')br },br deep: truebr }br }br

deep属性表示深层遍历，但是这么写会监控obj的所有属性变革，并不是我们想要的效果，以是做点修正：

watch: { 'obj.a': { handler (newName, oldName) { console.log('obj.a changed') } } }

xxxxxxxxxxbrwatch: {br 'obj.a': {br handler (newName, oldName) {br console.log('obj.a changed')br }br }br }br

还有一种方法，可以通过computed 来实现，只须要：

computed: { a1 () { return this.obj.a }}

xxxxxxxxxxbrcomputed: {br a1 () {br return this.obj.abr }br}br

利用打算属性的特性来实现，当依赖改变时，便会重新打算一个新值。

​