点赞收藏防丢失，关注不迷路！爱你们，蟹蟹！😘

🔹 Vue2 初始化+双向绑定数据

在 Vue2 中，响应式数据必须定义在 data 里：

// Vue2
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue2',
    count: 0,
    user: { name: 'Tom' }
  }
})

<input v-model="message" />
<p>{{ message }}</p>

✅ 特点：

• 依赖 data 选项来集中声明数据。

• Vue2 用 Object.defineProperty 给每个属性加 getter/setter。

• 只要数据定义在 data 里，v-model 就能直接双向绑定。

⚠️ 缺点：

• 新增属性/数组索引 无法被监听，只能用 Vue.set。

• 逻辑分散（数据、方法、生命周期分开写）。

案例：

<div id="app">
  <input v-model="user.name" placeholder="修改名字" />
  <p>姓名：{{ user.name }}</p>

  <button @click="addAge">增加年龄</button>
  <p v-if="user.age">年龄：{{ user.age }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
  el: '#app',
  data: {
    user: { name: 'Tom' } // 只有 name 初始值
  },
  methods: {
    addAge() {
      // 新增 age 属性，并让它响应式
      this.$set(this.user, 'age', 18);
      // 或者 Vue.set(this.user, 'age', 18);
//修改 name 时，直接修改 user.name，v-model 会
//自动更新视图。

//新增 age 时，必须用 this.$set(obj, key, value) 
//或 Vue.set(obj, key, value)，Vue 才能响应式追踪
//这个新属性。
    }
  }
})
</script>

✅ 特点：

• 数据写在 data 里。

• Vue2 通过 Object.defineProperty 做 getter/setter。

• 不能监听对象新增属性，必须 Vue.set(user, 'age', 18)。

• 修改 name 时，直接修改 user.name，v-model 会自动更新视图。

• 新增 age 时，必须用 this.$set(obj, key, value) 或 Vue.set(obj, key, value)，Vue 才能响应式追踪这个新属性。

🔹 Vue3 初始化+双向绑定数据

在 Vue3 中，用 ref 或 reactive 来创建响应式数据：

// Vue3
import { ref, reactive } from 'vue'

export default {
  setup() {
    const message = ref('Hello Vue3')   // 基本类型
    const count = ref(0)
    const user = reactive({ name: 'Tom' })  // 对象类型

    return { message, count, user }
  }
}

<input v-model="message" />
<p>{{ message }}</p>

✅ 特点：

• 基本数据类型 → ref()，内部封装成对象，通过 .value 取值（模版里会自动解包，不需要写 .value）。

• 对象/数组 → reactive()，内部用 Proxy，能完整监听属性新增/删除、数组索引/length，（返回 Proxy，直接操作即可）。

• Vue3 用 Proxy 做响应式，可以完整监听 新增/删除属性、数组索引/length。

🔹 Vue2 vs Vue3 初始化对比表

🔹 一句话总结（押题版）

Vue2：在 data 里初始化数据，defineProperty 做响应式；Vue3：用 ref/reactive 初始化，Proxy 做响应式，能监听对象新增属性和数组变化，更灵活。