vue常见面试题（二）

26.v-if和v-for的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
v-for 还支持一个可选的第二个参数为当前项的索引

27.assets和static的区别

static/ 中的文件是完全不被Webpack处理的，它们被以相同的文件名直接被复制进最终目标。务必要使用绝对路径去引用它们

src/assets 中放置的文件希望被Webpack处理的，它们可能被重新命名复制进最终目标。使用相对路径引用它们

28.列举常用的指令

1. 文本插值：{ { }} Mustache
2. DOM属性绑定： v-bind
3. 指令绑定一个事件监听器：v-on
4. 实现表单输入和应用状态之间的双向绑定：v-model
5. 控制切换一个元素的显示：v-if 和 v-else
6. 列表渲染：v-for
7. 根据条件展示元素：v-show

29.vue常用的修饰符

修饰符

（1）.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

（2）.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

（3）.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<div id='other'>
        <input v-model.trim='trim'>
        <p ref='tr'>{
   {
   trim}}</p>
        <button @click='getStr'>获取</button>
</div>
      var other = new Vue({
   
            el:'#other',
            data:{
   
                trim:''
            },
            methods:{
   
                getStr(){
   
                    console.log(this.$refs.tr.innerHTML)
                }
            }

        })

事件修饰符

（1）.stop

阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()
例如：

<a v-on:click.stop="doThis"></a>
<a @click.stop="doThis"></a>

实例1，防止冒泡：

<div id="app"> 
　　<div class="outeer" @click.stop="outer"> 
　　　　<div class="middle" @click.stop="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>
//使用了.stop后，点击子节点不会捕获到父节点的事件

(2) .prevent

防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），等同于JavaScript中的event.preventDefault()，prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。
例如：

<a v-on:submit.prevent="doThis"></a>

(3).capture

与事件冒泡的方向相反，事件捕获由外到内,捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内 父节点-》子节点的点击事件

<a v-on:click.capture="doThis"></a>

(4).self

只会触发自己范围内的事件，不包含子元素

<div id="app"> 
　　<div class="outeer" @click.self="outer"> 
　　　　<div class="middle" @click.self="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>

(5) .once

只执行一次，如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。

<a @click.once="doThis"></a>

(6).passive

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

(7).事件修饰符还可以串联

如：

<a v-on:click.stop.prevent="doThis"></a>

注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

键盘修饰符

在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：
.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键
例如：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

注意：

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

30.数组更新检测

Vue 包含两种观察数组的方法分别如下

1.变异方法

顾名思义，变异方法会改变被这些方法调用的原始数组，它们也将会触发视图更新，这些方法如下

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

使用举例：example1.items.push({ message: 'Baz' })

2.非变异方法

非变异方法与变异方法的区别就是，非变异方法不会改变原始数组，总是返回一个新数组，

当使用非变异方法时，可以用新数组替换旧数组，非变异方法大致有：filter(), concat() 和 slice()

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

2.当你修改数组的长度时，例如：vm.items.length = newLength

vue针对这两个问题给出了相应的解决办法,使用这两种方法，也会触发状态更新

1.使用vue全局方法Vue.set() 或者使用vm.$set() 实例方法

2.使用 splice，caoncat等修改数组

31.Vue.set视图更新

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的

Vue.set() 响应式新增与修改数据

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

实例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <li v-for="item in listData">{
   {
   item}}</li>
        </ul>
        <a href="javascript:void(0)" v-text="he" @click="changeData()"></a>
    </div>
</body>
<script>
    new Vue({
   
        el:"#app",
        data:{
   
            he:"点我",
            listData:["a","b","c"]
          },
        methods:{
   
              changeData () {
   
                  this.listData[0]="d";
              }
            }
    })
</script>
</html>

当我点击按钮时候，发现没有任何变化，页面上还是a,b,c

vue.set解决方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <li v-for="item in listData">{
   {
   item}}</li>
        </ul>
        <a href="javascript:void(0)" v-text="he" @click="changeData()"></a>
    </div>
</body>
<script>
    new Vue({
   
        el:"#app",
        data:{
   
            he:"点我",
            listData:["a","b","c"]
          },
        methods:{
   
              changeData () {
   
                  Vue.set(this.listData,0,'X')
              }
            }
    })
<<