Is the V-Model responsive?

Make writing a habit together! This is the 13th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

Antecedents feed

We all know that in VUE data is reactive and bi-bound. This begs the question: is the V-Model instruction responsive? Answer: No.

What is reactive? (Briefly, there will be in-depth analysis of the article later)

• So the first thing we need to understand is what is the concept of responsiveness?
  • To sum up, view (V) is updated when the data model (M) in the View model (VM) changes.
• The implementation principle is: use object.definePropertyThe data was hijackedCombined with the observer model (Publish/subscribeMode) to achieve two-way data binding.
  • The data was hijacked:Using the getter/setter in Object.defineProperty, watcher is performed for data changes
  • Publish/subscribe:It defines a one-to-many relationship between objects, allowing multiple observer objects to listen for a subject object at the same time, and notifies all dependent objects when an object changes.

What exactly is a V-Model?

• The V-Model is really just a syntactic sugar. This is done by binding the value attribute and firing the input native event.
• By default, when you add a V-Model directive to a component, value is the component’s property and input value is the name of the event that you bind to the component.
• Equivalent code:

<input v-model="str" />
/ / equivalent to the
<input :value="str" @input="$event.target.value" />
// The input tag adds an onInput event to HTML5, which, unlike the onchange event, fires every time an action is entered. Onchange is triggered only after the input is complete. This ensures that the page is displayed every time you type.
Copy the code

• The one above refers to the representation in the native tag. There is also the representation in custom components. It is mainly through the configuration of model to realize the customization of PROP properties and events of V-Model

// Component call:
<customComponent v-model="test"></customComponent>
// Customize the internal component
<template>
  <div>
    <div v-for="item in list" :key="item" @click="change(item)" :class="item == currentValue ? 'actived' : ''">
      {{ item }}
    </div>
  </div>
</template>
<script>
export default {
  // Define attributes and events that implement V-Modal
  model: {
    prop: 'value'.event: 'change'
  },
  props: {
      // The binding value
    value: {
      type: [String.Number].defalut: ' '
    },
    / / the data source
    list: {
      type: Array.default: () = >[]}},watch: {
    value(newValue) {
      this.currentValue = newValue; }},data() {
    return {
      // The currently selected value
      currentValue: ' '}},created() {
    // Get the value first when the component is initialized
    this.currentValue = this.value
  },
  methods: {
    change(item) {
      // Send the change event, and the parent component assigns the received value to the component-defined variable.
      // The change event can also be displayed in the parent component.
      this.$emit('change', item)
    }
  }
}
</script>
<style scoped>
.actived {
  background: red;
  color: white;
}
</style>
Copy the code