Vue核心技术-11,v-cloak和v-once

一,前言

前面已经介绍了一些指令,Vue中以v-开头,如v-for等
这篇补上v-cloak和v-once

---

二,v-cloak

v-cloak不需要配合表达式进行书写,更像是一个属性
v-cloak会在Vue实例编译结束时从绑定的Html元素上移除
通常和CSS的display: none;配合使用

[v-vloak] {
    display: none;
}

<div id="app" v-cloak>
  <p>hello {{message}}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'world'
    }
  })
</script>

当网速较慢时或Vue,js文件还没加载完成时,页面会显示{{message}}
当Vue创建实例,模板编译时,这部分DOM才会被替换,所以会造成闪烁现象

v-cloak和display:none配合使用,可以解决由于初始化慢导致的页面闪烁问题

注意:

当项目使用工程化构建时,项目Html只是一个空的div,
其中的内容都是由路由挂载不同组件完成的,所以不再需要v-cloak

---

三,v-once

v-once也不需要表达式,作用是可以使元素或组件(及所有节点)仅被渲染一次,
首次完成渲染后,被视为静态内容,之后不会随数据的变化而重新渲染

<div id="app">
  <div v-once>
      hello {{message}}
  </div>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'world'
    }
  })
</script>

对性能进行优化时,可以使用v-once设置不会变化的节点,以提升性能

---

四,结尾

v-cloak和v-once就简单说这些,这两个标签虽然不常用,但在性能优化时可能很有用