reference

Principle 1.

The two-way data binding of VUE is mainly realized by overwriting the set and GET functions of data through defineProperty attribute of Object.

Vue adopts data hijacking combined with the publiser-subscriber pattern. It hijacks the setter and getter of each attribute through Object.defineProperty(), publishes messages to subscribers when data changes, and triggers the response listener callback.

The main implementation of V-bind, V-model, V-click

2. v-model

The v-Model principle is to bind an onInput event to an input event and immediately call the setter method corresponding to the underlying object to change the value of the property in the data to achieve two-way data binding

Like a checkbox

<ul> <li> <input type="radio" name="sex" id="sex1" value="male" V-model ="userinfo.sex"> <label for="sex1"> male </label> <input Type ="radio" name="sex" id="sex2" value="female" V-model ="userinfo.sex"> <label for="sex2"> female </label> </li> </ul> <li> <select v-model="user.infocity"> <option v-for="(item, index) in userinfo.cityList" :key="index" :value="item">{{item}}</option> </select> </li> <button @click="doSubmit()" class="submit">Submit</button> <script> export default { data() { return { username: "kuli", userinfo: { username: "", age: "", sex: "male", cityList: ["Beijing", "Shanghai", "Shenzhen"], city: "Shenzhen", } } }, methods: { doSubmit() { console.log(this.userinfo) } } } </script>Copy the code

The syntax of the package under the V-model custom directive is the value attribute of input and the input event

<input v-modle="inputV" />
/ / is equivalent to
<input :value="inputV" @input="inputV = $event.target.value"/>
Copy the code

Such as the checkbox:

// It appears to execute a v-model command
<input type="checkbox" v-model="checkedNames">
/ / in fact
<input
  type="checkbox" 
  :value="checkedNames" 
  @change="checkedNames = $event.target.value" 
/>
Copy the code

There are two differences between V-model and V-bind:

V-model is a two-way binding of data, that is, when the data in the parent component changes, the data in the child component changes, and when the child component changes, the parent component changes

V-bind is a one-way binding. When the parent component’s data changes, the child component’s data changes, but when the child component changes, the parent component’s data does not change

  1. V-model Specifies the default binding value

  2. The binding value of V-bind is customizable

V-model for custom components

Parent component label

<my-component v-model="myData" /> Copy codeCopy the code

Subcomponent method, disassembled by value binding and input event updating value.

First, you need to receive a prop of the value in the child component (for value binding, or setting the initial value)

props:{
  value: {type:String.default:' '}}Copy the code

The values are then updated within the component and written to the logical part where the values need to be updated

this.$emit('input', newData);
Copy the code

This is done by getting the value inside the component and manually triggering the input event to update the value, but only by writing the V-model instruction to the parent component, which is also a way of passing the value to the parent component.

3. Proxy

Defects of Object.defineProperty:

In Vue2.0, two-way binding of data is to listen for every attribute of the Object through Object.defineProperty, and then to publish the data response of subscriber mode in get and set methods. However, there are certain defects, such as only listening for existing attributes. There is no way to add or delete properties and no way to listen for array changes, so in Vue3.0 it was replaced with a more powerful Proxy.

Understand the Proxy

Proxy is a new feature of ES6. It can be used to intercept JS operation methods, so as to perform Proxy operations on these methods.

console.log(typeof Proxy)//function
Copy the code

It can be known from the above:

  1. ProxyIs defined in thewindowGlobal variable on
  2. Its type isfunction
  3. ProxyWe take two arguments when constructing an object:targetandhandler
  4. The two parameters must be of typeobject

So, target represents the target object to intercept (proxy); Handlers are used to customize interception behavior

Vue3 defines a series of reactive apis, such as Reactive, REF, etc., that update the UI when data changes and use Proxy at the bottom!

The data object OBj is wrapped in Reactive as a proxy object. When data changes, the set method is called to update data and perform some update operations at the same time.

Proxy Features (important)

  • Proxies can listen directly on objects rather than properties
  • Proxy can listen for array changes directly
  • Proxy has up to 13 interception methods, not limited to Apply, ownKeys, deleteProperty, HAS, and so onObject.definePropertyDo not have.
  • The Proxy returns a new object, and we can just manipulate the new object to do thatObject.definePropertyCan only be modified directly by traversing object properties.
  • The disadvantage of Proxy is the compatibility problem, and it cannot be smoothed by polyfill