Shulou(Shulou.com)06/01 Report--

This article mainly introduces what is the underlying principle of Vue, the article is very detailed, has a certain reference value, interested friends must read it!

Observer (data hijacking)

The core is to listen for changes in data through Obeject.defineProperty (), which can define setter and getter internally.

Whenever the data changes, setter () is triggered. At this point, Observer will notify Watcher subscribers via Dep.

Dep (publisher)

There are two methods, addWatcher () and notify (), (collect Watcher dependencies and notify dependency changes).

Dep saves multiple atcher. When Dep finds that Observer has updates, Dep will call the notify () method to notify Watcher to update.

Watcher (subscriber)

There is a update () method (subscribe to Dep, receive data changes).

Watcher is the communication bridge between Observer and Compile, and the main things to do are:

1. Add yourself to the Dep when you instantiate yourself

two。 When the property change receives the Dep.notice () notification, it can call its own update () method and trigger the callback bound in the Compile.

Compile

The main thing Compile does is to parse the template instruction, replace the variables in the template with data, then initialize the rendering page view, bind the node corresponding to each instruction with an update function, and add subscribers who listen to the data. Once you receive a change in the data, you are notified to update the view.

Sum up:

As a framework of MVVM pattern, the underlying principle of vue data binding is: data hijacking + publishing subscriber pattern.

There are mainly four "roles":

Observer

Dep data collection

Watcer subscriber

Compiler template compiler.

Observer is mainly responsible for data hijacking, and the core is to listen for changes in data through Obeject.defineProperty (), which can define setter and getter internally. Whenever the data changes, setter () is triggered. At this point, Observer will inform Dep that the data has changed.

The publish and subscribe model is mainly accomplished through Dep and Watcher.

Dep stores all the dependencies stored when Watcher is instantiated, which is a dataset. When Dep receives a notification of a data change from Observer, it calls the notice () method to inform Watcher of the changed dependencies.

Watcher is the subscriber and the bridge between Observer and Compile. When it receives a notification of a data change from Dep, it calls its own update () method and triggers a callback bound in Compile.

The main thing Compile does is to parse the template instruction, replace the variables in the template with data, then initialize the rendering page view, bind the node corresponding to each instruction with an update function, and add subscribers who listen to the data. Once you receive a change in the data, you are notified to update the view.

Source directory structure ├─ .circleci / contains CircleCI continuous integration / continuous deployment tool configuration file ├─ .GitHub / / project-related documentation, the above documentation is in this folder ├─ benchmarks / / benchmark, performance test file, Vue score demo For example, table with a large amount of data or ├─ examples / / some examples of different versions of Vue files (UMD, CommonJS, ES production and development packages) output after rendering a large number of SVG ├─ dist / / Some small demo ├─ flow / / flow written in Vue because Vue uses [Flow] (https://flow.org/) for static type checking, static type checking type declaration file ├─ packages / / contains two different NPM packages: server rendering and template compiler Is a ├─ scripts / / storage npm script configuration file for different usage scenarios Combine webpack and rollup to compile, test, Build and other operations (consumers do not need to care) │ ├─ alias.js / / module imports aliases used in all source code and tests │ ├─ config.js / / build configuration │ ├─ build.js / / including all files found in 'dist/ `. Construct all rollup configurations in config.js Build ├─ src / / the location of the main source code Core content │ ├─ compiler / / parse template related │ ├─ codegen / / convert AST to Render function │ ├─ directives / / instructions that need to be processed before generating Render function │ ├─ parser / / parse template into AST │ ├─ core / / Vue core code Includes built-in components, global API wrapper, Vue instantiation, observer, virtual DOM, utility functions, and so on. │ ├─ components / / component-related attributes, mainly Keep-Alive │ ├─ global-api / / Vue global API, │ ├─ instance / / instantiation of related content such as Vue.use,Vue.extend,Vue.mixin, │ ├─ observer / / responsive core directories such as life cycle and events Bidirectional data binding related file │ ├─ util / / tool method │ └─ vdom / / contains virtual DOM creation (creation) and patching (patching) code │ ├─ platforms / / platform-related content Vue.js is a cross-platform MVVM framework (web, native, weex) │ ├─ web / / web side │ ├─ compiler / / web side compiles related code, which is used to compile templates into render function basic.js │ ├─ runtime / / web side runtime related code Used to create │ ├─ server / / server rendering │ └─ util / / related tool classes │ └─ weex / / based on general cross-platform Web development language and development experience To build Android, IOS and Web apply │ ├─ server / / server-side rendering (ssr) │ ├─ sfc / / convert single file component (* .vue) │ └─ shared / / global sharing method and constant ├─ test / / test test case ├─ types / / the new version of Vue supports TypeScript Mainly TypeScript type declaration file ├─ node_modules / / npm package storage directory |-- .babelrc.js / / babel configuration |-- .editorconfig / / text encoding style configuration file |-- .eslintignore / / eslint check ignore file |-- .eslintrc.js / / eslint configuration file |- -.flowconfig / / flow configuration file |-- .gitignore / / Git submission ignore file configuration |-- BACKERS.md / / sponsor information file |-- LICENSE / / Project open source protocol |-- package.json / / dependency |-- README.md / / say Clear file |-- yarn.lock / / yarn version locks the file above is all the contents of the article "what is the underlying principle of Vue?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.