vue 怎么实时生效，

在Vue中，我们可以通过数据绑定和响应式系统来实现实时生效。当我们修改Vue实例中的数据时，Vue会自动检测数据的变化，并更新对应的视图。

具体来说，Vue实现实时生效的原理包括以下两点：

1. 数据绑定

Vue使用了数据绑定技术，将模板中的DOM和Vue实例中的数据绑定在一起。当数据发生变化时，Vue会自动更新DOM中的内容。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!'
    }
  }
}
</script>

在上述例子中，我们在模板中使用{{ message }}绑定了Vue实例中的message属性。当用户点击按钮时，changeMessage方法会修改message属性的值，此时模板中的{{ message }}会自动更新为新的值。

2. 响应式系统

Vue使用了响应式系统，可以检测数据的变化并自动更新对应的视图。当我们修改Vue实例中的数据时，Vue会自动触发视图的更新。例如：

<template>
  <div>
    <p>{{ fullName }}</p>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

在上述例子中，我们声明了两个变量firstName和lastName，并使用v-model指令将它们与文本框进行了双向绑定。同时，我们还声明了一个计算属性fullName，用于将firstName和lastName拼接成完整的名字。当用户在文本框中输入内容时，Vue会自动触发计算属性的更新，并更新对应的视图。

综上所述，Vue实现实时生效的原理是通过数据绑定和响应式系统实现的。当我们修改Vue实例中的数据时，Vue会自动检测数据的变化，并更新对应的视图。