v-once -- 只渲染一次 · vue3.x -- 系列学习

>[success] # v-once `v-once`用于指定**元素**或者**组件只渲染一次**,一般可用作**性能优化** >[danger] ##### 案例 ~~~ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app">  <h2 v-once> {{ message }} <span>数字: {{counter}}</span> </h2>  <h1>{{message}}</h1> <button @click="changeMessage">改变message</button> </div> <script src="https://unpkg.com/vue@next"></script> <script> // 1.创建app const app = Vue.createApp({ // data: option api data: function () { return { message: 'Hello Vue', counter: 100, } }, methods: { changeMessage: function () { this.message = '你好' this.counter += 100 console.log(this.message, this.counter) }, }, }) // 2.挂载app app.mount('#app') </script> </body> </html> ~~~