v-once · vue · 看云

v-once的作用是只会渲染对应元素一次，数据更新不会引起视图的更新，目的是为了优化页面的性能 ## 使用场景通常是没有动态的元素内容，比如一些文章，一些固定标题 ![](https://img.kancloud.cn/a3/bb/a3bb20f14fd93c3ab75fee4c75e1061e_1002x628.png) 代码案例： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app" v-clock> <h2 v-once>{{a}}</h2> <button @click="add">按我加1</button> <button @click="minus">按我减1</button> </div> <script src="vue/vue.js"></script> <script > var vue=new Vue({ el:"#app", data:{ a: 100 }, //事件方法 methods:{ //点击a++ add(){ this.a++ }, minus(){ this.a-- console.log(this.a) } } }) </script> </body> </html> ~~~