如何在 Vue 中使模板变量不响应

Question

我有一个编辑表单，其中的变量保存在 data() 中。我不想更新编辑页面的标题，但我想保持输入和数据之间的数据 v-model 同步。使 h1 标签中的标题不反应的最简单方法是什么？为此，尤先生必须有一些锦囊妙计。

<template>
    <div>
        <h1>{{ title }}</h1>
        <input v-model="title">
    </div>
</template>

<script>    
export default {
    data: {
        title: 'Initial value'      
    }
}
</script>

Answer 1

Vue文档建议Object.freeze()在返回的对象上data()禁用属性的反应性：

data() {
  return Object.freeze({ title: 'Initial value' })
}

但需要注意的是，它会冻结所有属性（看起来没有办法使用此方法仅冻结某些属性），并且与此一起使用会导致控制台错误 ( )v-modelCannot assign to read only property。

data() {
  return Object.freeze({ title: 'Initial value' })
}

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() { 
    return Object.freeze({
      message: 'Hello Vue.js!',
    })
  }
})

或者，您可以通过使用以下命令重新定义它来任意删除任何可配置数据属性的反应性writeable: false：

methods: {
  removeReactivity() {
    Object.defineProperty(this, 'title', {value: null, writeable: false});
  }
}

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message"> <!-- XXX: Cannot use v-model with frozen property. This will cause a console error. -->
</div>

methods: {
  removeReactivity() {
    Object.defineProperty(this, 'title', {value: null, writeable: false});
  }
}

Answer 2

如果您不想v-once为input. 来自文档：

仅渲染元素和组件一次。在随后的重新渲染中，元素/组件及其所有子元素将被视为静态内容并被跳过。

new Vue({
  el: "#app",
  data: {
    title: "initial value"
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>

<div id="app">
  <input v-model="title">
  <p>Reactive title: {{ title }}</p>
  <p v-once>Static title: {{ title }}</p>
</div>