Let’s start with a method

Object.defineproperty () is an important method for implementing MVVM principles like Vue. As it is an ES5 method, it is not compatible with IE8 and below. This is why Vue is not compatible with IE8.

Object.defineproperty () is a method that defines attributes for an Object. We usually do this when we assign attributes:

There seems to be nothing wrong with that.

We can modify this property, delete, enumerate… Random flirt

Such a definition may seem convenient and the data can be processed at will, but in fact it has many inconveniences, such as 🌰

If we define an attribute like this, length will be iterated, which will cause us a lot of trouble. How is this attribute defined? This is done using Object.defineProperty


grammar

Object.defineProperty(obj,prop,descriptor)Copy the code

parameter

  • obj

  • The object on which attributes are to be defined.

  • prop

  • The name of the property to define or modify.

  • descriptor

  • The property descriptor to be defined or modified.


1. Description is a data attribute

The property descriptor has a total of four parameters, and we can pass in an object

  • configurable

  • The property descriptor can be changed and deleted from the corresponding object only if and when the property is configured with true. The default is false.

  • enumerable

  • An attribute can appear in an object’s enumerated property if and only if its Enumerable is true. The default is false.

  • value

  • The value corresponding to this property. It can be any valid JavaScript value (numeric value, object, function, etc.). The default is undefined.

  • writable

  • Value can be changed by the assignment operator if and only if the writable of the property is true. The default is false.


Next, write a little 🌰


2. Description is the accessor property

At this point, description also takes four parameters

  • configurable

    The property descriptor can be changed and deleted from the corresponding object only if and when the property is configured with true. The default is false.

  • enumerable

    An attribute can appear in an object’s enumerated property if and only if its Enumerable is true. The default is false.

  • get

    A method that provides a getter for a property, undefined if there is no getter. The value returned by this method is used as the attribute value. The default is undefined.

  • set

    A method that provides a setter for a property, undefined if there is no setter. This method takes a unique parameter and assigns a new value for that parameter to the property. The default is undefined.


When the description attribute has a GET or set accessor attribute, it cannot have writable and value attributes because get and set can substitute for both attributes

Next, write a little 🌰

Computes the object length when the array. length property is invoked


To start the

Let’s take a look at Vue first, about the use of Vue is probably like this aunt son:

The end result of the implementation looks like this:

The implementation of these features will be explained in the following sections

We will write a new framework for mymvvm.js to implement these functions

Of course it still is

Data hijacking Observe

Data hijacking refers to redefining the attributes we defined for the data in an Object using Object.defineProperty


We successfully bound my object with properties and get/set accessors

Of course, if we have more than one layer of data that is called only once, the deep layer of data is not hijacked by the data, so we need to recursively call, loop assignment, which is why observer() and observer() are written separately

We’re not done here

For example, if we assign a value to name, we will use the get method, but if we change the value of name to an object, the name will become that object, and get and set do not exist, so we must also do data hijacking for the newly changed data


Data brokers

In our usual Vue usage habits, we will not use Vue.$data.name, but directly use Vue



In Vue’s official documentation:

When this data changes, the view is rerendered. Note that properties that exist in data are reactive only when the instance is created. That is, if you add a new attribute, such as:

vm.b = 'hi'
Copy the code

Changes to B will not trigger any view updates. If you know you’ll need an attribute later, but it’s empty or nonexistent at first, you just need to set some initial values. Such as:

data: {
  newTodoText: ' ',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}Copy the code

New data cannot be added to Vue because new data does not have get and SET methods, so data hijacking cannot be implemented and changes of data cannot be monitored


Template compilation

After binding all the data to the instantiated object, template compilation begins, replacing all the data in {{data}} with real data

So we need a compiler function Complie

Call template compilation after we have hijacked all the data

On the page, the effect of data replacement is realized:

Publish and subscribe model

At this point we can see that the data is compiled correctly, but when we change the data, the data on the instance is changed, but the data on the template is not updated, so we need to implement the data refresh

Take a look at the publish-subscribe model

Subscribe is pushing the functions you want to monitor into an array, and publish is notify letting the methods of the objects in the array execute

Publish subscribe mode is used when we update the view. When assigning values to the data, notify will be called and the monitored object will execute, and the monitored object should be the method compiled by the template in Compile, so we will Watcher it

In the meantime, we’ll rewrite the newly crude Watcher constructor

When the data changes, we call notify in set

This allows the view to update as the data changes


Two-way data binding

In Vue, one of the biggest features is two-way data binding. When the object data is changed, the view is updated. Similarly, if the data on the view is changed, the data on the object is updated as well as other parts of the view that use the data are updated

Next, we will implement such two-way data binding function. First, we will assign the data of name to the value of input, which also needs to use our template compilation method. Before compiling {{}}, we need to determine the text node, while V-Model needs to determine the element node

We also need to change the value in the input when the object data changes, so we need to subscribe here as well

The next step is to implement that when the data box is entered, the object’s data is also updated. Here we listen for the input event

So we have two-way data binding


Calculate attribute


I will write here, I have written too much, I really have no energy, with… The world is boring (attached source code)


Here attached source code, or I hope you can knock over the code, a clear understanding of the entire framework from scratch to have experienced each stage, and I hope this article can help you

https://github.com/q869939686/myProject.gitCopy the code