Vue two-way binding principle
mvvm way binding, combined with the use of data hijacking a publisher - way mode subscribers to hijack each attribute by Object.defineProperty () setter, getter, posted a message to subscribers when data changes, triggering the corresponding listener callback.
Points:
1, to achieve a data listener the Observer, capable of listening to all the attributes of the data objects, may be subject to change to get the latest value and notifies the subscriber
2, the Compile implement a parser instruction, each element node scanning and parsing the instruction, the replacement data according to an instruction template corresponding binding update function and
3, to achieve a Watcher, as a bridge connecting the Compile and Observer, can subscribe and be notified of changes in each property, binding execution instruction corresponding callback function, to update the view
4, mvvm entry function, three or more integration
Specific steps:
- We need to observe the data objects recursively traverse, including sub-properties of the object attributes, plus all the setter and getter
so, assign a value to this object, it will trigger setter, so you can listen to the data changes - compile command parsing template, the template will replace the variables into data, then initialize rendering the page view, and each instruction node corresponding binding update function, add subscribers to monitor data, once the data are subject to change, receive notifications, updates view
- Subscribers Watcher is a bridge of communication between the Observer and Compile, the main thing to do is:
- When instantiating itself to attribute subscriber (dep) inside to add your own
- Itself must have an update () method
- To be property changes dep.notice () notification, you can call itself the update () method, and trigger callback Compile bound, then mission accomplished.
- MVVM data binding as an entry, integration Observer, Compile and three Watcher, to monitor their own data model changes through the Observer, to resolve the compiler command template by Compile, eventually using a communication bridge between the Watcher erected Observer and Compile, reach data changes -> view update; view interactive changes (input) -> two-way binding effect data model changes.
Description The vue from the initial page - Modify data - refresh the page's UI?
When Vue enters the initialization phase, on the one hand Vue will traverse the attribute data, and to convert it to a form Object.defineProperty getter / setter achieve data hijacking (not elaborate on the Vue3.0 the Proxy); on the other hand, Vue the compiler instructions for each instruction parsing element node, initialize the view and subscribe to updates Watcher attempt, this time Watcher will own subscriber Dep added to the message, in which case the initialization is complete.
When the data changes, Observer trigger the setter methods, immediately call Dep.notify (), Dep traversing the array of all subscribers, and call its update method, and then by the internal Vue diff algorithm, the appropriate update patch to complete the subscription who changed the view.
Vue life cycle
beforeCreatewithcreatedbeforeMountwithmountedbeforeUpdatewithupdatedbeforeDestorywithdestoryedactivatedwithdeactivated
Between the components which communicate Vue
Six ways inter-component communication Vue
- props/$emit
- $emit/$on
- vuex
- $attrs/$listeners
- provide/inject
- $parent/$children 与 ref
Difference watch, methods of calculating an attribute, and
- To watch a monitor in response to changes in the data. Property is automatically calculated listener-dependent values change dynamically return, a main object is to simplify the complex calculation in the template. So the difference comes from the usage, just need dynamic values, then use the calculation attribute; the change needs to know the value of the implementation of business logic, only with watch.
- methods is a method that can accept parameters, and can not be computed, computed can be cached, not methods. It can be computed independent of other computed, or even other data components.
how the data reset vue
Use Object.assign (), vm. $ Data may be obtained under the current state of the data, vm. $ Options.data data can be acquired in the initialization state components.
Object.assign(this.$data, this.$options.data())Components written name option What is the role?
- When the project using the keep-alive, can be used with the component name cache filter
- DOM need to call their own name when doing recursive component
- vue-devtools debugging tools in the group see the display name is decided by the assembly name of vue
vue-router which hook function
The official document: VUE-hook function Router
- Global Front guard
router.beforeEach - Global analytic guard
router.beforeResolve - Global rear hook
router.afterEach - Routing exclusive guard
beforeEnter - Guard in the assembly
beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
Introduction and front-end routing vue-router implementation principle
routeAnd routerwhat the difference is?
routeIt is a "routing information object", including path, params, hash, query, fullPath, matched, nameand other routing information parameter.
routerIs "Routing Instance Object", the method comprising routing jump ( push, replace), etc. hook function.
React Vue and talk about understanding, and make a simple comparison
1. The principle different monitor data changes
- Vue through getter / setter hijacking and some functions, and can quickly calculate the exact difference in Virtual DOM. This is because it is in the rendering process, keeps track of dependencies for each component, the component does not need to re-render the entire tree.
- React default is cited by way of comparison, if not optimized, whenever the application status is changed, all the sub-components will be re-rendered, might lead to a lot of unnecessary re-rendering of the VDOM.
No special optimization Vue will be able to achieve a good performance, and for React, it needs to be controlled by PureComponent / shouldComponentUpdate this life-cycle approach. If your applications, complex interaction, to deal with a lot of UI changes, use the Virtual DOM is a good idea. If you do not frequently update the element, then the Virtual DOM is not necessarily applicable, the performance is likely not to directly manipulate DOM.
Why React imprecise monitor data changes? This is because the difference in Vue and React design, Vue using variable data, while React more emphasis on immutable data.
2. The different data streams
- Vue default support two-way binding, by v-model two-way binding between components and DOM. However, between the parent-child assembly, props in the data flow is unidirectional version 2.x
- React been advocated is unidirectional data flow, he called onChange / setState () mode.
However, because state regulatory framework we will generally use Vuex and Redux way data flow, etc., so many times we feel this is the difference.
3. rendering of different templates
On the surface, the different template syntax
- React template is rendered by JSX
- The Vue is rendered by an extension of HTML syntax
In the deep, different principles of the template, this is the essential difference between them:
- React JS code in the assembly, the native JS achieve common syntax template through, such as interpolation, conditions, loops, are achieved by JS syntax
- Vue is a separate component and separating the template JS code, implemented by instructions, conditional statements such as v-if need be implemented
对这一点，我个人比较喜欢 React 的做法，因为他更加纯粹更加原生，而 Vue 的做法显得有些独特，会把 HTML 弄得很乱。举个例子，说明 React 的好处：react 中 render 函数是支持闭包特性的，所以我们 import 的组件在 render 中可以直接调用。但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。
Vue 的 nextTick 的原理是什么？
1. 为什么需要 nextTick
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
2. 理解原理前的准备
首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。请阅大佬文章--彻底搞懂浏览器 Event-loop
常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;
3. Understand nextTick
and nextTick principle is the way vue DOM updates and nextTick callback function has executed an asynchronous queue control. If you read this part of the source code you will be found to do a lot isNative () judgment, because here there are compatibility issues graceful degradation. Vue visible development team thought, care and intention of performance.
If you a better understanding of the events of the previous cycle principle, it is recommended that you read this article, please read the article Gangster - a comprehensive analysis of realization of the principle Vue.nextTick
Vuex, which has several properties
There are five kinds of State, Getter, Mutation, Action,Module
vue-cli what had been done for us?
First of all you need to know what vue-cli that? It is based on Vue.js a full system rapid development, but also can be understood as a collection of many npm package. Secondly, vue-cli complete functionality What?
.vue File -> .js file
ES6 grammar -> ES5 grammar
Sass, Less, Stylus -> CSS
static resource jpg, png, font handling and other
hot update
the definition of an environment variable to distinguish between dev and production mode
...
If developers need to add or modify the default settings, you need to create a new file vue.config.js at the same level package.json
Finally, send a gift: VUE 248 knowledge points (interview questions) escort for you