A brief summary of VUE

What do you understand about modular components in the framework?

1. Module: A JS program that provides a certain function is usually a JS file

• Why modules: As business logic increases, the code becomes more and more complexCopy the code

• Function: Reuse JS, simplify JS writing, improve JS running efficiencyCopy the code

• Modularity: An application is a modular application when its JS is written in modulesCopy the code

2. Component: An integration of code and resources that implements local functionality

• Why components: Is an interface more complexCopy the code

• Function: reuse coding, simplify project coding, improve operation efficiencyCopy the code

• Componentization: When an application is implemented in a multi-component manner, the application is a componentized applicationCopy the code

What does Vue do with mixin technology?

In the development of web front-end, the idea of componentization and modularization has been carrying out the current technology development. One of the important things about components is that they are reusable. After I wrap a component, I can reuse my component anywhere without having to develop it more than once. Is the so-called, a package, multiple use. However, there is also a lot of functionality that can be reused between components. Vue provides a set of reusable & combined lazy technology mixins. The same logical code between components can be reused through the mixin technology provided by VUE to improve the development efficiencyCopy the code

3. Loss of vueX data refresh

When the page is refreshed, the page will reload the vUE instance, and the data in the store will be re-assigned, so that the problem of data loss in the vueX of the page refresh will occur. There are three ways to save the information when the page is loaded and when it is refreshed:

1. Cookie: When a web page sends an HTTP request, the browser checks whether there is a cookie. If there is a cookie, it automatically adds it to the cookie field in the Request header. The browser automatically does it for us every time we make an HTTP request. However, the memory size is only 4KB, and the browser can be set to disable
2. LocalStorage: Data will never expire unless you delete it. The size is about 5MB due to the same origin policy. After using the data should be removed in time, otherwise too much data page will be stuck.
3. SessionStorage: session-level storage. As long as the browser window is not closed, the data will still exist even if the page is refreshed or if you go to another page. After the window is closed, the sessionStorage is destroyed and its size is about 5MB.

4. Use and understanding vue-router

The customer loads all static resources at the beginning. Each time the page is switched, the static resources are not reloaded. Instead, the customer finds the corresponding component through routing and displays it to the user. This greatly reduces the server pressure! This is the same as spa application (single page rich application), only one HTML, switch to the page, just need to switch the corresponding components to use the Vue-router: Use () and then configure the routing component. The routing rule mounts the router on the instance of VUE. By default, vue-Router uses hash mode Mode: ‘history’ to change the mode.

• Two basic modes of jump/navigation routes
• Declarative routing: XXX
• This.$router-push /replace(location)

Supplement:

Cache Routing component

 <keep-alive>
      <router-view/>
  </keep-alive>
Copy the code

• Routes are not destroyed when they leave and do not need to be recreated when they return ==> Use the cache to switch routes faster
• Prefetch is used to implement prefetch, which improves user experience

Dynamically Adding a Route

• router.addRoutes(routes)
• After the user’s permission route is determined asynchronously, it needs to be dynamically added to the router

Route guard and permission verification

• Router.beforeeach () Registers the global front guard
• Verify user rights in a unified manner

5, Vue-Router global guard, route guard, component guard

There are global guards, routing guards, component guards, and global guards, in turn, are global front guards, intermediate guards, and rear guards. The front guards are used for token verification to determine whether a user has logged in. The intermediate guards are rarely used The route guard is usually used to determine if the path is coming from the specified location and otherwise not to release the component and the internal guard is usually used to determine if the path is going from where to where and the front hook can’t use this because the component hasn’t been created yet at this point in time so there’s a method to implement this next to receive vm by VM To implement the functionality of this. Component parsing hooks and post-parsing hooks can be used, but they have very low entry rates

6. Routes are loaded lazily

Usually, the package goes online after the project is completed. If the normal route import method is used, the size of the package file will be too large, which will affect the bandwidth. In this case, we can use lazy route loading to reduce the size of the file and call the import function to achieve this

{
        name: 'User'.path: 'user/list'.component: () = > import('@/views/acl/user/list'),
        meta: { 
          title: 'User Management',}},Copy the code

7. Parameter passing mode in vUE

- params parameter - The registered route path has a bit: / XXX /:name/:age - Specifies the parameter value when forwarding: - / XXX/ABC /12 - {name: 'XXX ', params: {name:' ABC ', age: 12}} -query parameter -? The following argument/XXX? Name =tom&age=12 -props -props: true, // props: true. -props: {a: 1, b: -props: route => ({keyword3: route.params.keyword, keyword4: route.query. Keyword2, XXX: 12}), // you can specify any data - meta - specify an object containing n data through the configuration of the meta of the route - fetch data: this.$route.metaCopy the code

Questions related to supplementary parameters:

Params and path cannot be used together

Can’t: the router. Push ({path: ‘/ xx, params: {name:’ Tom ‘}})

Router-push ({name: ‘xx’, params: {name: ‘Tom ‘}})

How do I set whether params parameters can be passed?

path: ‘/search/:keyword? ‘,

Note: Once declared, you cannot pass an empty string of param arguments

The jump carries parameters that the refresh is lost

If you register a point that does not specify /: XXX and the parameter data carried by the params configuration during the jump is lost during the refresh

8. The vUE route is displayed$The route and$The difference between router, Query and Params

Use (VueRouter) and the VueRouter constructor to get an instance of router. This object is a global object. It contains all routes and contains a number of key objects and properties such as: Push and replace methods to implement programmatic routing route is a jump route object, each route will have a route object, is a local object, You can obtain the corresponding params parameter name,path,params,query, etc. The introduction of the params parameter is different. One can only use the name query parameter, then the path and name can be URL Parameters are not displayed in the parameter URL

9. Communication between VUE components

The basic method for communicating between components: 1. Props

• The most basic and most used way to communicate between a father and a child
• Parent ==> child, which passes properties of non-function types
• Child ==> parent, which passes properties of the function type
• Problem: Using props for components of other relationships can be tricky

2. Vue custom event and event bus

• There are two ways to bind native DOM event listeners
• The listener event, which is bound to the DOM event name in the HTML tag, represents the default argument to the event callback (which is essentially an event data object), and the listener event, which is bound to the DOM event name, represents the default argument to the event callback (which is essentially an event data object). When the user operates on the corresponding interface, the browser kernel will automatically create and close the event object containing relevant data, distribute the corresponding event, and trigger the event listener callback function call. The listener of the DOM event name is bound to the component label. Events that are bound to the root tag of a component become custom events with the modifier
• The vUE custom event listener can only be bound to a component label with an arbitrary event name. Emit (‘ custom event name ‘, data) emit(‘ custom event name ‘, data) emit(‘ custom event name ‘, data) emit(‘ custom event name ‘, data) emit(‘ custom event name ‘, data) Function call will trigger a custom event listeners emit (‘, ‘custom events data) in customized events, event will trigger a custom event listeners function call: $event can be any type, or it can’t be at all. $event can be any type, or it can’t be at all
• Global event Bus: Understand: There are three ways to handle events on the Vue prototype object:$on() / $emit() / $off() The component object prototype object is vm object: the component object can directly access the Vue prototype object method to achieve any communication between components coding implementation: the entry IN JS VM as a global event bus object:beforeCreate() { Vue.prototype.$bus = this }Components that distribute events/transmit data:this.$bus.$emit('eventName', data) Components that handle events/receive data:this.$bus.$on('eventName', (data) => {})Function: applicable to any communication between components is also the way we use more communication

3. V-model (Unidirectional data flow)

• Nature: That’s when the parent binds the event and passes the data to the child and the child receives the event using the props array and fires the event and passes the data to the parent and the parent receives the data and changes the value and passes it to the child and synchronizes the data between the parent and the child It adds an input listener to its unidirectional data binding principle :value combined with @input
• What can you do with the V-Model? V-model enables bidirectional data communication (synchronization) between native labels and their parent components as well as between parent and child components. It is commonly used to encapsulating reusable element-UI components with form items: Input the CheckBox/Radio/Select components are encapsulated form item on v – model

4. Sync modifier

• If you have a complex data type, you can change the essence: bind a custom event that receives the latest data carried by the subgroup distribution event to update the data of the parent component<child :money.sync="total"/> <Child :money="total" @update:money="total=$event"/> What can you do with Sync? V-model is typically used for components with form items. Sync is typically used for components with element-UI tags that do not have form items: Dialog uses Sync to hide components

5. $attrs and $linsteners

• UI component (UI component) : parent (UI component) : parent (UI component) : parent (UI component) : parent (UI component) : parent (UI component) : parent (UI component) : parent (UI component) : parent (UI component)$attrs:Object that excludes all component tag attributes for the props declaration, class, and style$listeners:Level component label binding for all custom event listening objects v-bind: Special use:<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> v-on:Special use of:<button v-on="{ mousedown: doThis, mouseup: doThat }"></button> General: V-bind with$attrsUsed in conjunction with the V-ON$listenersWhat can you do with them? When encapsulating a reusable component: HintButton receives an indefinite number of properties or event names from the parent component to listen on inside the component and pass them to its child element-UI: Input uses v-bind and $attrs to receive variable attributes passed to the Input, but it only defines the click event internally. There is no other mouse movement event that can be added to the. Native event listener on the component label

6.$children and $parent attributes and ref

• Ref gets the component instance object through which it can get all the data inside the component to realize the communication between the parent component and the child component. It modifies the data inside the child component Essence is to get to all child components as well as all the parent component of official data but not recommend this way to realize the communication between components Because a component is not have only one child and parent component to get a child does not accurately get in some UI component library could use this way to realize the communication between components in vue If the code between different components is the same, mixin technology can be used to achieve a high degree of reuse and simplify the coding

7. Slot-scope

• This technique is usually used when the parent component needs to dynamically pass the HTML structure to the child component, but deciding what HTML structure the parent component needs to pass through the child component notification. This technique is particularly useful for encapsulating a component like a list such as the table component in the Element-UI that uses this interpolation technique. Right

8. vueX

• VueX is used to manage state data between multiple components in a unified manner. Any communication component can use this technology to realize data transfer through mapState. State is used to store the state data that’s shared in the components, mutations is used to store the state data directly in the state and it doesn’t allow for asynchronous code to be written, if decisions and circular actions. So what’s dealing with the components is a bridge between VUE and vueX. Usually we’re in Actions Do asynchronous operation, send request, if judgment and a series of operations getters process the complex data in the state to simplify the operation. The modular development of vueX share the data in the state in order to get the data more conveniently in the future. Finally, the state becomes an object Namespace namespace is repeated for actions Getters mutations, and vUE and vueX are independent. The data in vueX does not care whether the VUE component is completed or not, and the state and the vueX Getters executes automatically while Mutations and Actions do not, so the data implied into the component before the request comes back is either the data in the initialization state or based on calculations

9. pubsubJs

• Because of the event global event bus in VUE, it is rarely used.

10. Performance optimization in VUE

Coding phase

• 1. Code modularity. Generally, we can encapsulate many commonly used areas into individual components and refer to them where needed, rather than writing too much repetitive code. Including our CSS can also use less and sass custom CSS variables to reduce duplication of code
• 2. Set the key value for the for loop. When using V-for for data traversal rendering, set a unique key value for each item, so that the internal core code of Vue can find the data more quickly.
• 3. The Vue route is set to lazy load, which can speed up rendering when the first screen is rendered
• 4. Better understand the life cycle of Vue, do not cause internal leakage, the global variables used after the destruction of components are reset to null
• Use keep-alive. Keep-alive is an abstract component provided by Vue that can be used to cache components to save performance
• 6. Minimize the amount of data in data. Getters and setters are added to all data in data, and watcher is collected
• 7. V-if and V-for cannot be used together. Use the event proxy if you need to bind events to each element using V-FOR
• 8. Use v-if instead of V-show in more cases
• 9. Import third-party anti-shake and throttling modules as required
• 10. Long list scrolling into the visual area dynamically loading images lazily loading SEO optimized pre-render server rendering SSR

Packaging optimization

• 1. Change the configuration item in vue.config.js to set productionSourceMap to false. Otherwise, some map files will be generated after the final packaging. Make the volume smaller after packing
• 2. Use CDN to externally load some resources, such as VUE -router, axios and other vUE peripheral plug-ins. Set some unnecessary external reference modules in webpack.config.js and externals. Then in the entry file index.html through the CDN to introduce the required plug-in
• 3. Reduce the use of images, because images will take up a large part of the volume of web pages, so the operation of optimizing images can effectively accelerate the loading speed. You can replace the image effect with some CSS3 effects, or use a Sprite image to reduce the size of the image
• 4. On-demand import, some third-party libraries we use can be loaded by on-demand import. Avoid adding volume to the project by introducing unnecessary parts. For example, when using the Element-UI library, you can introduce only the components you need
• 5. Compress code multi-threaded package happypack splitChunks away from public file sourceMap optimize user experience skeleton screen PWA
• 6. You can also optimize the cache (client cache, server cache) and enable GZIP compression on the server

11. Similarities and differences between the V-show and V-IF commands

1. Common: You can control how elements are shown and hidden.
2. V -show: The display of the CSS is set to none, control hidden, will only compile once; V-if dynamically adds or removes DOM elements from the DOM tree. If the initial value is false, it will not compile.
3. Conclusion: If you want to switch a node frequently, use v-show(switch cost is small, initial cost is large). Use V-if if you don’t need to switch nodes frequently (the initial rendering cost is small, but the switching cost is large)

12. Add response data in VUE

In the project we can use $set to make the data we add later into responsive data

Use vue-lazyload for lazy image loading

Install vue-lazyload. 2. Reference the file and configure the image in the main

14. How to use vueX? What exactly

• A plug-in that implements centralized state management in Vue. It centrally manages (read/write) the shared state of multiple components in A Vue application. It can also be considered as a way of communication between components, and is applicable to communication between any components
• Six key concepts in vueX:
• State is used to store state data shared among components
• Mutations is used to direct the state data in state and does not allow the writing of asynchronous code if decisions and loops
• Actions is a bridge between vue and vueX. Usually we do asynchronous actions, send requests, if judgments, and so on
• Getters handles complex data in state to simplify operations
• In order to make it easier to retrieve the data later, the state eventually becomes an object
• Namespace namespace is repeated for actions Getters mutations, and vUE and vueX are independent. The data in vueX does not care whether the VUE component is completed or not, and the state and the vueX Getters executes automatically while Mutations and Actions do not, so the data implied into the component before the request comes back is either the data in the initialization state or based on calculations

Can v-if and V-for be used together? What should I pay attention to?

In vue 2.x, when both V-if and V-for are used on an element, v-for takes precedence.

• Because the priority of V-for is higher than that of V-if, the entire list will be traversed and then the if will be used to judge whether to display it. That is: The performance waste of having to rerender all the list objects each time and then determine whether or not to display them can be solved in two ways: either by calculating the properties first to figure out which properties to iterate over or by vif first to figure out whether or not to iterate over an empty tag

In VUE 3.x, V-if always takes precedence over V-for.

How does Vue 2.0 detect array changes

• So vue is using function hijacking to override the array methods by prototyping the array in data to the array prototype methods that he defines so that when he calls the array API he can notify the dependency updates and if the array contains a reference type he can iterate over the reference type in the array again Object. DefineProperty can be used to monitor array changes, but Vue2 is not used. In fact, for performance considerations, data will be changed frequently, each change needs to traverse the entire array, to the array attribute re-observe, This is a huge performance drain
• In VUe3, VUe3 is a Proxy for objects and arrays with Proxy. Object.defineProperty can only hijack the attributes of objects, while Proxy is a direct Proxy for objects. Since object.defineProperty can only hijack properties, you need to walk through each property of the Object, or depth walk if the property value is also an Object. Proxy directly represents objects without traversal operations.
• Object.defineProperty Observe manually for a new attribute. Because the Object. DefineProperty hijack is the property of the Object, so when you add a property, you need to go through the Object again and hijack the new property using Object. DefineProperty. Proxy has more interception support and allows for more fine-grained control

17. Understanding keep-alive and its application scenarios, and where to use it in the project

• Keep-alive is a built-in component of Vue, which is used to cache inactive components. In general, when a component is switched, it will be destroyed by default. If required, a component will not be destroyed after switching, but will save its previous state. You can then use keep-alive to ensure that the name of a component with an include value of a string or a regular expression match is cached. Component names that exclude a string or match a regular expression are not cached. We can also use the meta attribute in the route to control keep-alive:true. This can be used in conjunction with vif when a component is rendered. For example, the search component of JD.com needs to switch back and forth and save data during development
• Two life cycles, activated and deactivated, are used to determine whether the current component is active.
• Keep-alive also uses LRU(Least Recently Used) algorithm.

The difference between vueX and Redux

• Not from an implementation standpoint but from a design standpoint and from a usage standpoint
• VueX is taking the experience of Redux, giving up some features and making some optimisations at the cost of vueX only working with Vue while Redux is a pure state management system. Rereact uses react-Redux and combines it with the React framework. Redux itself is a simple state manager. In terms of usage: It provides a global object store that contains the state object used to contain all application data, and the Store provides reducer methods. These methods can be customized, allowing the caller to change the value of state. The state value is only read-only. If you need to change it, you must only use reducer React-redux. In simple terms, it provides interfaces to combine the Redux state with the React component display. Tore and State are the most basic concepts that vueX does not change in order to implement a one-to-one correspondence between states and views. In fact, vueX does not change the whole framework idea at all, only some content changes the name or name, through the name change, in order to distinguish some details of the concept.
• VueX weakens Dispatch’s presence. VueX believes that a state change is triggered by a “commit” and is called by the framework providing a commit API.
• VueX eliminates the concept of Action in Redux. Unlike Redux, who believed that a state change must be triggered by a “behavior”, vueX simply believes that mutation is all that is needed to trigger a state change at any time. Redux’s Action must be an object, whereas vueX believes in passing only the necessary arguments. The form is not required.
• VueX also weakens the reducer concept in Redux. The reducer semantics in the computer domain should be “specification”. In this case, the reducer should produce the new state based on the old state and Action parameters passed in. The equivalent in vueX is mutation, which simply “converts” the old state according to the input. Overall, vueX makes the framework much easier to understand by weakening the concept without actually cutting anything.
• In addition, vueX supports getters, which are cached in the runtime, so it is a bit of a performance optimization, but it also encourages people to use them more

The react – story:

• State injection components: State injection components in React-Redux are injected through the component in conjunction with the Connect method
• Container component: A component that is associated with state via CONNECT and is passed into the Dispatch interface
• Display component: Not directly related to state or Dispatch
• Feature: connect Supports the mapStatesToProps method for custom mapping

VueX:

• State injection component: vue.use (vueX) applies vueX as a global plugin and passes the Store object to the root Vue instance
• Container components: No such thing
• Display component: You can get this.store.state from the component, also do this.store.state, also do this.store.state, also do this.store.mit (), etc
• Features: vueX provides methods such as mapState, mapGetter, and mapMutation, which are used to generate mappings between store internal attributes and component internal attributes

Differences: Differences in the combination of components

• In addition to being used in the outer component structure to get the store, react-Redux needs to explicitly specify the container component by wrapping the component with Connect and passing the store to the root instance. You can make the Store object exist in any VUE component at run time

Container components

• While React-Redux advocates the best practice of separating container components from presentation components, the vueX framework makes no distinction and is all presentation components. In my opinion, react-Redux is clearer, more mandatory and normative, while vueX is simpler and easier to understand. After all, Redux is independent of React state management, and its combination with React requires some packaging of React components. While vueX is customized for VUE, it works as a plug-in and the way you use inserts, and provides a lot of flexibility

19. Life cycle function of Vue

• BeforeCreate is the first hook that is triggered after new Vue(). Data and methods on Data, Methods, computed, and Watch are not accessible at this stage.
• So created happens after the instance is created, so now you’re done observing the data, so you can use the data, you can change the data, and in this case changing the data doesn’t trigger an updated function. You can do some initial data fetching, you can’t interact with the Dom at this stage, and if you want, you can access the Dom via vm.$nextTick.
• BeforeMount occurs before the mount, before the template template is compiled with the imported rendering function. At the current stage, the virtual Dom has been created and is about to start rendering. Changes to the data can also be made at this point without triggering an updated.
• Mounted occurs after the mounting is complete. In the current stage, real Dom is mounted, data is bi-directional bound, and Dom nodes can be accessed and Dom operations can be performed using the $refs attribute.
• BeforeUpdate is triggered before the responsive data is updated and the virtual DOM is rerendered. You can change the data in the current phase without causing rerendering.
• Updated occurs after the update is complete. The Dom of the component in the current phase has been updated. It is important to avoid changing the data during this period, as this may result in an infinite loop of updates.
• BeforeDestroy happens before the instance is destroyed, when the instance is fully available in the current phase and we can clean up the mess such as cleaning the timer.
• Destroyed occurs after the instance is destroyed, leaving only the DOM shell. The component has been disassembled, the data binding removed, the listener removed, and the child instance destroyed.

20. Differences between watch and computed in VUE

• Computed is essentially a watcher with a cache that updates the view when dependent properties change. This method applies to computing scenarios where performance is consumed. When the expression is too complex, putting too much logic in the template will make the template difficult to maintain, and the complex logic can be handled in evaluated properties.
• Watch has no caching function and is more of an observation function. It can listen to certain data and perform callback. When we want to deeply listen for properties in an object, we can turn on the deep: true option, which will listen for every item in the object. This can cause performance problems, so you can listen as a string for optimization, and don’t forget to log out manually with unWatch if it’s not written to a component.

Why is data in a component a function

• When a component is reused multiple times, multiple instances are created. Essentially, these instances use the same constructor. If data is an object, the object is a reference type and affects all instances.
• So to ensure that data does not conflict between different instances of a component, data must be a function.

22. Principle of v-Model

• V-model is essentially a syntactic sugar, and you can think of it as the syntactic sugar of the Value + input method. You can customize this using the Prop and Event properties of the Model property. Bidirectional data binding is based on unidirectional data binding (Model ==>View)
• The native V-Model generates different events and attributes depending on the tag.
• The implementation process of bidirectional data binding: when parsing the V-Model directive, add input to the current element and listen for the change in the value of the input, and assign the latest value to the corresponding data attribute of the current expression

Dom and key properties

• Because manipulating the DOM in the browser is expensive. Frequent manipulation of the DOM can cause performance problems. This is where the virtual Dom comes in. The Virtual DOM of Vue2 draws lessons from the implementation of snABbDOM, an open source library.
• The essence of a Virtual DOM is to use a native JS object to describe a DOM node. Is a layer of abstraction from the real DOM. (This is the VNode class in the source code, which is defined in SRC /core/vdom/vnode.js.)
• The mapping from VirtualDOM to the real DOM goes through the create, diff, and patch phases of the VNode.
• “The purpose of a key is to reuse as many DOM elements as possible.”
• Only when the order of the nodes in the old and new children is different, the best operation is to move the element to achieve the update.
• You need to save the mapping between the nodes of the old and new children so that you can find the reusable nodes in the nodes of the old children. Key is the unique identifier of the node in children.

24. How and what is nextTick

• The deferred callback is performed after the next DOM update
• It mainly uses macro task and microtask to try to use Promise MutationObserver setimmediate according to the execution environment, and if neither of them can be used, setTimeout is used to define an asynchronous task, and nextTick will store the method in the queue This method clears the current queue

25, principle

1. Data broker

1). Operations (read/write) on properties of another object via an object proxy. Use vm objects to represent all properties in data objects 3). Benefits: easier to manipulate data in data 4). The basic implementation process ①. Add the attribute descriptor ② corresponding to the attributes of the data Object to the VM through object.defineProperty (). All properties added include getters/setters ③. The getter/setter is used to manipulate the corresponding property data in the dataCopy the code

2. Template parsing

1). The key object for template parsing: compile object 2). Remove all child nodes of EL and add them to a new document fragment object (2). Recursively parse all hierarchical child nodes in the fragment * parse interpolated text nodes * parse instruction attributes of element nodes * event instruction parsing * general instruction parsing ③. 3). Parse the interpolating syntax node: textNode.textContent = value ①. Get the matched expression string from the regular object: submatch /RegExp.$1 ②. Fetch the attribute value ③ of the expression from data. Set the attribute value to textContent 4 of the text node). Incident command parsing: elementNode. AddEventListener (' eventName 'callback. Bind (vm)). Fetch the event name (②) from the instruction name. Get the corresponding event handler object (③) from the methods based on the instruction attribute value (expression). Bind the current element node to a DOM event listener (④) that specifies the event name and callback function. 5). General instruction parsing: elementNode.xxx = value ①. Get the instruction name and instruction value (expression) ②. Get the corresponding value ③ from data according to the expression. The name of the directive determines what attribute you want to operate on the element node * v-text-- textContent * v-html-- innerHTML * V-class --className attribute ④. Set the value of the resulting expression to the corresponding attribute ⑤. Remove the directive attribute of the elementCopy the code

3. Data hijacking –> Data binding

1). Data binding (Model ==>View): Once a property in the data is updated, all interfaces that directly or indirectly use the property will be updated (update) 2). Data hijacking ①. Data hijacking is a technique used to achieve data binding in VUE ②. Basic idea: use defineProperty() to monitor all attribute (any level) changes in the data, and update interface 3 as soon as the changes occur). Four important objects ①. Observer * constructor used to hijack all attributes of data * redefine attribute description (get/set) for all attributes in data * create dep object for each attribute in data ②. Dep(Depend) * Each attribute in data (all levels) corresponds to a deP object * when it was created: * Dep objects are created when each property in define data is initialized * when a property value in data is set to a new object * Object structure {id, // Each DEP has a unique ID subs // Contains an array of N watchers (short for Subscribes)} * Subs attribute description * When a watcher is created, The current watcher object is internally added to the subs of the corresponding DEp object. * When the value of the data property changes, all watcher in subs will be notified of the update. Compile * constructor used to parse the template page (an instance) * Compile object is used to parse the template page * each expression (non-event instructions) is parsed to create a corresponding watcher object, Watcher * Each non-event directive or expression in the template corresponds to a watcher object * Monitors changes in the current expression data * Timing of creation: {vm, // the vm object exp, // the expression of the corresponding instruction cb, // the callback function value when the data corresponding to the expression is changed, // The current value of the expression depIds // The collection object of the dep object corresponding to the attributes of each level in the expression // The attribute name is dep ID and the attribute value is dep} ⑤. Summary: The relationship between DEP and Watcher: Many-to-many * One deP in a data attribute, and one DEP in a deP may contain multiple Watcher (there are several expressions in the template that use the attribute) * One watcher in a non-event expression in the template, A watcher may contain multiple DEP * data bindings using 2 core techniques * defineProperty() * subscriber - publisher 4). Bidirectional data binding ① Bidirectional data binding is based on unidirectional data binding (Model ==>View) ②. * When the value of the input changes, the latest value is assigned to the data attribute corresponding to the current expressionCopy the code

\