为什么这个 Vue3 转换会破坏数据绑定？

Question

我已经遇到这个问题好几个小时了；我不明白为什么它没有按预期工作。

我在下面粘贴了示例代码。问题是在编辑名称时，{{name}} 没有更新。但是，如果我删除 <transition> 元素或 v-if="show" 条件中的任何一个，则数据绑定会按预期工作。如果 {{name}} 放置在过渡之外，则相同。

看来转换会阻止数据绑定？但是我在文档或其他地方找不到任何关于它的信息。我在 Vue2 playground 中测试了这段代码，它按预期工作（数据绑定工作）。所以行为似乎取决于 Vue3.

有什么我想念的吗？它是 Vue3 中的错误吗？

提前感谢您的任何意见或想法。

<template>
  <div id="demo">
    <button v-on:click="show = !show">
      Toggle
    </button>

    <transition name="fade">
      <div v-if="show">
        <p>hello, {{name}}</p>
        <input v-model="name" type="text" />
      </div>
    </transition>
  </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      name: "",
      show: true,
    }
  }
});
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.8s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Answer 1

它在普通 JS 中工作得很好...

所以尽量关注不同之处：

TypeScript（我不能在这里使用它）-我真的怀疑它的原因，但你可以试试
Scoped CSS - 您是否尝试删除 scoped ？作用域 CSS 和 <transition> 存在一些问题。在 Vue-loader 中检查 this issue。我的示例不是使用 Webpack 构建的，因此未使用 Vue-loader 但它肯定会在您的项目中使用...

const app = Vue.createApp({
  data() {
    return {
      name: "",
      show: true,
    }
  },
  template: `
   <div id="demo">
    <button v-on:click="show = !show">
      Toggle
    </button>

    <transition name="fade">
      <div v-if="show">
        <p>hello, {{name}}</p>
        <input v-model="name" type="text" />
      </div>
    </transition>
  </div>
  `
}).mount("#app");

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.8s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>
<div id="app"></div>

Answer 2

我遇到同样的问题，你可以尝试将'show'的初始值设置为false，并在生命周期修改'show'为true。

为什么这个 Vue3 转换会破坏数据绑定？

Why does this Vue3 transition break data binding?

vue.js

vue-transitions

vuejs3