Vue 习题总结这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战前言吃饱饭才有力气写代码~ 今天又学了一

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

前言

吃饱饭才有力气写代码~

今天又学了一些Vue的基础相关知识，主要是习题相关的，现在就总结记录一下~

一.指令相关

1.1 怎么解决页面加载时的插值闪烁问题？

<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>

然后才会显示：hello world
这个就是插值闪烁问题，虽然这个闪烁的时间很短暂，但是也会影响用户体验的。
解决它的方法就是用指令 v-cloak ，这个指令用来使这个元素在关联实例结束时进行编译，它在css中用属性选择器设置为 display: none;

1.2 v-show 和 v-if 有什么区别？

v-if 可以实现条件渲染，vue 会根据表达式的值的条件的真假来渲染元素。如果v-if的值为false，这个元素就会被销毁，不会出现在DOM里。
v-show 也是根据条件来展示元素，但是和v-if不同的是，v-show的元素始终被渲染并保存在DOM中，在值为false时只是把css的属性切换为display：none
使用场景：
v-if 有更高的切换开销；
v-show 有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用 v-show 较好；
如果运行时条件不太可能改变，则使用 v-if 较好。

1.3 v-if和v-for的优先级是什么?

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

1.4 v-model 的修饰符有哪些？

.lazy 改变默认情况下的v-model同步输入框里的值和数据的情况；把它变成change事件后再同步。
.number 这个修饰符自动把输入的值变成数值类型。
.trim 此修饰符会过滤掉输入字符串首尾的空格。

二.事件相关

2.1 事件修饰符有哪些？

.stop 可以阻止事件继续传播。

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

.prevent 可以让事件不再重载页面。

<form v-on:submit.prevent="onSubmit"></form>

.self 只当在 event.target 是当前元素自身时触发处理函数

<div v-on:click.self="doThat">...</div>

.passive 告诉浏览器不想阻止事件的默认行为。

//滚动事件的默认行为 (即滚动行为) 将会立即触发
<div v-on:scroll.passive="onScroll">...</div>

.once 使事件只会触发一次。

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

.capture 元素自身触发的事件先在此处处理，然后才交由内部元素进行处理。
提示：事件修饰符可以串联，要注意使用顺序；
例如：v-on:click.prevent.self 会阻止所有的点击;

v-on:click.self.prevent 只会阻止对元素自身的点击。

三.组件相关

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

// 组件中的data函数
data() {
  return {
	message: "子组件",
	childName:this.name
  }
} 
// new Vue 实例里的data对象
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {App}
})

这是因为组件是需要用来复用的，每个组件的实例复用的时候是一种引用关系，可以维护一份被返回对象的独立的拷贝，组件实例之间的data不会互相影响；
而new Vue 的实例是不会被复用的，因此不存在引用对象的问题。

四.属性相关

4.1 computed 和 watch 有什么区别？

computed: 是计算属性，依赖其它属性值，并且有缓存，只有它依赖的属性值发生改变，下一次获取时才会重新计算 computed 的值；
watch: 更多的是观察的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作； 应用场景：
当需要进行数值计算时，用computed,可以利用它的缓存特性，避免资源浪费；
当需要在数据变化时执行异步操作或开销较大的操作时，用watch,它可以执行异步操作比如访问api,限制执行该操作的频率，并且能在得到最终结果前设置中间状态，这些computed属性做不到。

Vue 习题总结

前言