Vue面试题整理上

1.v-show和v-if指令的共同点和不同点？

共同点：都能控制元素的显示和隐藏；不同点：实现本质⽅法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if
不停的销毁和创建⽐较消耗性能。总结：如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）

2.如何只让css只在当前组件起作用？

• 在组件中的style前面加上scoped
• 通用样式写在跟组件中，不设置scoped这样其他组件就会继承跟组件的样式

3.keep-alive的作用

• 组件缓存**
• 动态路由缓存**

是Vue的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复渲染DOM.
包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，在vue2.1.0版本之后，新增加了两个属性：include(包含的组件缓存)与exclude(排除的组件不缓存，优先级大于include)

1.组件缓存
        将想要缓存得组件进行包裹，
        include属性，里面得值，就是想要缓存的组件名字  name= “count” 该组件的name
        include数组形式：
       Keepalive 默认里面只能显示一个组件
         <keep-alive :include="['count','todo']">
            <count v-if="isShow"></count>
            <todo v-else></todo>
        </keep-alive>


    2.路由组件缓存
        路由表中进行配置：
        示例：
        {
            path: '/',
            name: 'List',
            component: List,
            meta:{
                keepAlive:false  // 想要缓存的路由组件 就设置为true
            }
        },

         <!-- transition 只能在单个元素上使用 -->
    <transition name="slide-left">
         <keep-alive>
              <router-view class="view" v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
    </transition>
    <transition>
            <router-view class="view" v-if="!$route.meta.keepAlive"></router-view>
    </transition>

4.如何获取dom?

一、通过元素类型的方法来操作：

1. .document.getElementById(); //id名，在实际开发中较少使用，选择器中多用class id一般只用在*层存在 不能太过依赖id
2. document.getElementsByTagName()//标签名
3. document.getElementsByClassName()//类名
4. document.getElementsByName() //name属性值，一般不用
5. document.querySelector() //css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素。如果没有找到匹配元素，则返回null
6. document.querySelectorAll() //css选择符模式，返回与该模式匹配的所有元素。结果为一个数组

<div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
</div>
<p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");//在div下调用
        alert(p1.length);//3  div节点下的p元素只有三个
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4  document节点下的p元素有四个

    </script>

querySelector()和querySelectorAll()方法，最后两个为静态的，不是实时的，保存的是当时的状态，是一个副本，即：在以后的代码中通过方法使所选元素发生了变化，但该值依然不会改变，因此使用有局限性，一般不用，除非就想得到副本

 <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");
        alert(p1.length);//3
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4
        var p3=document.querySelectorAll("p");
        alert(p3.length);//4
        document.body.appendChild(document.createElement("p"));//创建新元素P,并添加到body中
        alert(p1.length);//3   div节点下的p元素依然只有三个
        alert(p2.length);//5   在body中添加了一个新的P元素，该方法是“动态的”，因此，长度发生了变化
        alert(p3.length);//4   该方法是“静态的”，因此，无论发生什么变化，p3的值依然不会发生改变

二、根据关系树来选择（遍历节点树）：
【先简单介绍一下节点：
DOM（文档对象模型）可以将任何HTML、XML文档描绘成一个多层次的节点树。所有的页面都表现为以一个特定节点为根节点的树形结构。html文档中根节点为document节点。

所有节点都有nodeType属性，代表节点的不同类型，通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型：

1. Element类型（元素节点）：nodeType值为 1
2. Text类型（文本节点）：nodeType值为 3
3. Comment类型（注释节点）：nodeType值为 8
4. Document类型（document节点）：nodeType值为 9；其规定的一些常用的属性有 document.body
   document.head 分别为HTML中的 document.documentElement为标签

所有的节点都有 hasChildNodes()方法 判断有无子节点 有一个或多个子节点时返回true】

通过一些属性可以来遍历节点树：

1. parentNode//获取所选节点的父节点，最顶层的节点为#document
2. childNodes //获取所选节点的子节点们
3. firstChild //获取所选节点的第一个子节点
4. lastChild //获取所选节点的最后一个子节点
5. nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
6. previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null

三，vue中的获取dom节点
ref=“domName” ⽤法：this.$refs.domName

jquery中获取dom节点

jQuery中包裹后的DOM对象实际上是一个数组，要获得纯粹的DOM对象可以有两种方式：
1、使用数组索引方式访问，例如：
var dom = $(dom)[0];
如： $("#id")[0]
2、使用函数get()访问，例如：
var dom = $(dom).get(0);
get()函数中的参数为索引号

5，说出⼏种vue当中的指令和它的⽤法

1.v-bind:

当一个属性想要使用 data中的数据时，在属性前，加上一个v-bind:(动态属性)
简便语法： v-bind: 省略成 :属性=“属性值”

2.v-on:

给元素进行绑定事件，v-on:click=“alertFn”
事件方法定义在 与data平级的属性 methods中
methods:{ // 方法集合
alertFn() {
}
}
简便语法: v-on: 省略成 @事件=“回调方法”

3.v-if:

指令加载元素上，v-if的条件只有true或者false，当条件为真时，显示在页面上，当条件为假时，移除dom节点
v-else-if: 给元素加v-else-if时，当前dom元素上面的dom元素 必须要有v-if v-else
给元素加v-else时，当前dom元素上面的dom元素 必须要有v-if或者v-else-if

4. v-show:

指令加载元素上,v-show的条件只有true或者false，当条件为真时，显示在页面上，当条件为假时，隐藏dom节点
在使用上，如果说隐藏显示切换的不频繁，建议使用v-if,如果频繁使用，建议使用v-show template 模板标签，也可认为是
透明标签，v-if可以控制删除节点或者添加节点，v-show不起作用

4.v-for:

循环数组：
指令使用在想要循环显示的元素上，

第一个参数item，表示数组中的每一项
第二个参数index，表示数组中的下标（索引）
循环对象：

{{value,key}}

第一个参数value,表示循环对象中的属性值
第二个参数key,表示循环对象中的属性
循环字符串：
第一个参数v,表示 字符串中每一个字符
第二个参数i,表示 字符串中字符对应的下标
循环数字：
第一个参数，表示数字从1到循环的数结束
第二个参数，表示数字索引，从0开始

5.v-model 双向数据绑定

给可以用户操作的一些标签，标签中数据发生改变，数据也跟着发生改变

1. input：
   text类型
   v-model 相当于给input动态绑定了一个value，在输入时候，触发一个事件，改变value值
   2.input：
   radio类型
   v-model 相当于给input radio类型，加了一个点击事件，点击事件做了同步 radioValue值
2. input:
   checkbox类型
   v-model
   1.v-model 后面的值是true 或者false ，相当于给标签加了一个是否选中的属性checked，还加一个点击事件，点击事件做数据同步
   2.v-model 后面的值是数组，收集input checkbox类型中的value值，放到这个数组中
   4.select：
   v-model: 可以将用户选择的数据，v-model绑定的值，就是用户操作之后的变化值

6. v-text:

可以填充元素内容，指令右侧值就是内容

7. v-html:

他可以将带有标签形式的字符串，进行解析渲染
与原生js中innerHTML功能 很像

8.v-cloak:

可以解决插值表达式闪烁的问题，解决办法
给元素加上一个 v-cloak 指令
在style标签中，加上 [v-cloak]{display:none;}

本文地址：https://blog.csdn.net/weixin_46902438/article/details/107535779