Vue v-once
这两天在看vue, 看到一个v-once, 记一个笔记，要是有错误请大家指正。
先上没有v-once的码：
<script src='/vue.js'></script>
<html>
<div id="app">
<p>{{text}}</p>
<p>{{change()}}</p>
<p>{{text}}</p>
</div>
</html>
<script>
new Vue({
el: '#app',
data: {
text: 'This is text'
},
methods: {
change: function() {
this.text = 'This is text2';
}
}
})
</script>
这段的输出结果是两个This is text2.
注意第一个text变量是在change方法前的，给人第一感觉是，我先运行了｛{text}｝再运行方法，那之后才运行的方法不会对它有影响。但实际上页面被vue渲染以后，即使写在方法前，也是会变的。
如果要保证第一个{{text}}不变，就要用v-once：
<script src='/vue.js'></script>
<html>
<div id="app">
<p v-once>{{text}}</p> //此处
<p>{{change()}}</p>
<p>{{text}}</p>
</div>
</html>
<script>
new Vue({
el: '#app',
data: {
text: 'This is text'
},
methods: {
change: function() {
this.text = 'This is text2';
}
}
})
</script>
这样一来，当代码编译到第一个{{text}}的时候，由于v-once的原因，会保持它的值以后不会改变。之后再运行change()时，也只能改变第二个了。上面这段代码的输出结果为This is text 和 This is text2.
有意思的是，我在第二个{{text}}中也加了v-once进行测试
<p>{{text}}</p>
<p>{{change()}}</p>
<p v-once>{{text}}</p>
这个输出结果是两个text2. 第一个{{text}}输出text2可以理解，因为即使在方法前，没有v-once罩着，逃不过被改的命运。第二个{{text}}则可以理解为，之前的change()方法已经把数值改变了，你加个v-once也没用。
下面最后一个测试，也印证了这点：
<p v-once>{{text}}</p>
<p>{{change()}}</p>
<p v-once>{{text}}</p>
输出结果是This is text 和 This is text2
这说明，v-once只能保函数前面的，保不了后面的。
综上，可以看出，当方法会改变变量时，用v-once可以保证方法前面的变量不被方法改变，而无法保证方法后面的同样的变量被改变。
1031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
