How to implement MVVM class Vue mini-framework

Welcome to pay attention to my public account “Life Code”

The MVVM framework has three main elements:

• Data response
  • Use the Object.defineProperty attribute
  • Use the ES6 Proxy
  • Listen for data changes and updates to the view
• Template interpolation
  • Provides template syntax and data binding
  • Interpolation: {{}}
  • Instructions: V-bind, V-model, etc.
• Template rendering
  • If you convert a template to HTML
  • Replace the actual data with template interpolation
  • Apply colours to a drawing
  • Template -> vDOM -> real dom

First taste of responsiveness

function defineReactive(obj, key, value) {
	Object.defineProperty(obj, key, {
   		get() {
      		// Get data
         return obj[key]
      },
      set(newValue) {
      		// Set the data
         if(value ! == newValue) { value = newValue } } }) }Copy the code

Test to see if the data is actually being intercepted

const obj = {};
defineReactive(obj, 'name'.'ken');
obj.foo; // name
obj.foo = 'KenNaNa'; // KenNaNa
Copy the code