1.v-once
The v-once directive only renders elements and components once. Subsequent renderings, if the elements, components and all their child nodes using this directive, will be treated as static content and skipped. This feature can be used to optimize update performance.
<!DOCTYPE html>
<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>v-once指令</title>
</head>
<body>
<div id="app">
<p> <input type="type" v-model="message"/></p>
<p v-once> 只渲染一次: {
{
message}} </p>
<p> 可以改变: {
{
message}} </p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message :"Hello"
}
})
</script>
</body>
</html>
The effect of running in the browser is shown in the figure:
run the above sample code, when the browser page is opened, {{
message}} in the DOM element renders the value of the message attribute, when the input box bound with v-model changes the value of the message attribute again, the tag added with the v-once instruction does not change.
2.v-cloak
The v-cloak directive will remain on the DOM element until the associated instance is automatically removed after compilation. The usage scenarios of the v-cloak instruction are very limited, and it is often used to solve the problem of data loading when the network is slow. When a user visits a website implemented by Vue.js, if the network is delayed and the webpage is still loading Vue.js, Vue will not be able to render in time. At this time, the page will display the Vue source code, and we can use the v-cloak command to solve this problem.
<div id="app">
{
{
message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message :"hello world"
}
})
</script>
When the network is slow, open the page in the browser, and the Vue source code will appear on the page. The normal data content will not be displayed until Vue.js is loaded and compiled, as shown in the figure.
In order to solve the problem of running the above code, we can add a v-cloak instruction to the DOM element, and use the attribute selector to set the hidden style for the specified DOM element. The v-cloak instruction can remain on the DOM element and is not automatically removed until the compilation is complete. In this way, the specified DOM element can be hidden before Vue completes the compilation. After the compilation is completed, the CSS style will be invalid for the DOM element.
<style>
[v-clock] {
display: none;
}
</style>
<div id="app">
{
{
message}}
</div>
3. in-for
The v-pre directive skips the compilation process of this element and its child elements, so it can be used to display the original Mustache tag. Skipping a large number of nodes without instructions will speed up compilation, the code is as follows:
<span v-pre>{
{
this will not be compiled}}</span>
The effect of running in the browser is shown in the figure.
