首先,要了解vue中data中的数据是响应式的,如果想让data中的数据不被跟踪
需要用到Object.freeze() 这会阻止修改现有的 property
var obj = {
foo: '明明'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button v-on:click="foo = '图图'">点击修改</button>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/9448787f424a4610018314eb4ab45e59.png)
点击修改,obj对应的内容也不会被修改,注意:只能够写成Object.freeze(obj) 形式,才能阻止修改,写成Object.freeze(obj.name) 具体到某个属性,该方法是不生效的。
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。