从原理到实践深度解析Vue双向数据绑定的全方位指南

function defineReactive(obj, key, val) {
  const dep = new Dep()
  // 依赖收集器
  Object.defineProperty(obj, key, {
    get() {
      Dep.target && dep.depend()
      // 收集依赖 return val;
    },
    set(newVal) {
      if (val === newVal) return
      val = newVal
      dep.notify()
      // 派发更新
    }
  })
}

function createReactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      // 收集依赖
      return target[key]
    },
    set(target, key, value) {
      if (target[key] !== value) {
        target[key] = value
        trigger(target, key)
        // 派发更新
      }
      return true
    }
  })
}

<input v-model="message" />

<input :value="message" @input="message = $event.target.value" />

Vue.component('my-input', {
  model: { prop: 'value', event: 'input' },
  props: ['value'],
  template: ` <input :value="value" @input="$emit('input', $event.target.value)"> `
})

Vue.component('my-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: ` <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> `
})

<input type="checkbox" v-model="checked" value="A">
A
<input type="checkbox" v-model="checked" value="B">
B
<input type="checkbox" v-model="checked" value="C">
C
<p>Checked: {{ checked.join(', ') }}</p>

<input type="radio" v-model="selected" value="A"> 
A 
<input type="radio" v-model="selected" value="B"> 
B 
<input type="radio" v-model="selected" value="C"> 
C 
<p>Selected: {{ selected }}</p>

<select v-model="selected"> 
  <option value="A">Option A</option> 
  <option value="B">Option B</option> 
</select> 
<p>Selected: {{ selected }}</p>

Vue.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: ` <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> `
})

Vue.component('custom-input', {
  props: ['value'],
  methods: {
    updateValue(newVal) {
      this.$emit('input', newVal)
    }
  }
})

<custom-input :value.sync="message"></custom-input>

Vue.component('validated-input', {
  props: ['modelValue'],
  emits: ['update:modelValue', 'validate'],
  data() {
    return { isDirty: false }
  },
  methods: {
    validate() {
      if (this.isValid) {
        this.$emit('validate', true)
      } else {
        this.$emit('validate', false)
      }
    }
  },
  watch: {
    modelValue(newVal) {
      this.isDirty = true
      this.validate()
    }
  }
})

const data = Object.freeze(largeData);

computed: { fullName() { return this.firstName + ' ' + this.lastName; } }

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

this.message = 'New message'
// 不会立即触发更新
Vue.nextTick(() => {
  console.log('DOM updated')
})

this.currentComponent = 'componentA'
this.$nextTick(() => {
  this.$refs.componentA.inputValue = 'New value'
})

data() {
  return {
    message: ''// 必须定义初始值
  };
}

// 错误示范 
<input:value="value" @input="updateValue($event.target.value)" >
// 正确示范 
<input :modelValue="modelValue" @input="$emit('update:modelValue', $event.target.value)">

import { ref, reactive } from 'vue'
// 基本类型
const count = ref(0)
// 修改值
count.value++
// 对象类型
const state = reactive({ count: 0 })
// 修改属性
state.count++

const modelValue = ref('initial value')
const emit = defineEmits(['update:modelValue'])
watch(modelValue, (newVal) => {
  emit('update:modelValue', newVal)
})

const shallowData = shallowRef({ count: 0 }); 
shallowData.value.count++; // 不会触发深层响应

const rawData = toRaw(reactiveData);

const form = reactive({ username: '', password: '', role: '', remember: false, errors: { username: '', password: '' } })

const validate = () => {
  form.errors.username = ''
  form.errors.password = ''
  if (!form.username.trim()) {
    form.errors.username = '用户名不能为空'
    return false
  }
  if (form.password.length < 6) {
    form.errors.password = '密码至少6位'
    return false
  }
  return true
}

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label>用户名</label> <input v-model="form.username" @input="validateField('username')" />
      <span v-if="form.errors.username" class="error">{{ form.errors.username }}</span>
    </div>
    <div>
      <label>密码</label> <input type="password" v-model="form.password" @input="validateField('password')" />
      <span v-if="form.errors.password" class="error">{{ form.errors.password }}</span>
    </div>
    <button type="submit">提交</button> <button type="button" @click="resetForm">重置</button>
  </form>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    const form = reactive({ username: '', password: '', errors: { username: '', password: '' } })
    const validateField = (field) => {
      if (field === 'username') {
        form.errors.username = form.username.trim() ? '' : '用户名不能为空'
      } else {
        form.errors.password = form.password.length >= 6 ? '' : '密码至少6位'
      }
    }
    const validate = () => {
      validateField('username')
      validateField('password')
      return !form.errors.username && !form.errors.password
    }
    const submitForm = () => {
      if (validate()) {
        console.log('Form submitted:', form)
      }
    }
    const resetForm = () => {
      form.username = ''
      form.password = ''
      form.errors.username = ''
      form.errors.password = ''
    }
    return { form, submitForm, resetForm }
  }
}
</script>