Frequently asked questions about vue interviewers 2

1. Please briefly describe the first rendering process of Vue.

• First, initialize Vue, initialize the instance members and static members of Vue
• After the initialization, the constructor is defined and the this._init(options) method is called
• Call this.$mount() in _init()
  • Note: The core function of $mount() is to help us compile the template into the render function, but it will first determine whether the render option is currently passed in. If it is not passed in, it will get our template option, if the template option If not, he will use the content in el as our template, and then compile the template into a render function. It uses the compileToFunctions() function to help us compile the template into a render function. When the render function is compiled, It will mount the render function in options.render
• The next call to mountComponent() will first determine the render option. If there is no render option, but we have passed in the template and the current development environment is a development environment, a warning will be sent. The purpose is if we are currently using the runtime version of Vue, and we No render is passed in, but template is passed in, telling us that the runtime version does not support the compiler. Next, the hook function in the beforeMount life cycle will be triggered (before starting the mount)
• Then updateComponent() is called. In this function, vm._render and vm._update are called. The function of vm._render is to generate a virtual DOM, and the function of vm._update is to convert the virtual DOM into a real DOM and mount it to On the page (you can see it on the page)
• Next, create the Watcher object. When creating the Watcher, pass the updateComponent function, which is finally called inside the Watcher. The get method is used inside the Watcher. When the Watcher is created, the mounted hook function in the life cycle will be triggered. In the get method, updateComponent() will be called
• After mounting, return to Vue instance

2. Please briefly describe the principle of Vue responsiveness.

• Responsive refers to that when your data changes, Vue can respond and re-render the page. It uses data hijacking, combined with the publisher-subscriber model, and hijacks each property through Object.defineProperty() Setter, getter, publish messages to subscribers when the data changes, and trigger the response listener callback

• The response in vue3.0 is to use the method Proxy in es6. This method does not need to loop through each attribute of data, and do a responsive process for each attribute. Instead, it directly proxies the entire data object, intercepting the get and set methods of all the attributes contained in this object.

  • benefit:
  • 1. When we dynamically add an attribute to data, without any processing, this attribute is already responsive.
  • 2. Any operation on the array can also trigger a response.

3. Please briefly describe the role and benefits of Key in the virtual DOM.

• Function: It
  can track each node, and when comparing, it will rearrange the order of the elements based on the change of the key value. In this way, existing elements are reused and reordered, and elements whose keys do not exist are removed. It is convenient for vnode to find the corresponding node in the diff process, and then reuse it.

• Benefits: It
  can reduce the operation of dom, reduce the time required for diff and rendering, and improve performance

  When creating virtual dom in vue2.0, spaces and line breaks will also be converted into a single virtual dom, so code habits are also very important (affecting performance). In
  vue3.0, the virtual dom algorithm is optimized to remove spaces, line breaks, etc. The created useless virtual dom further improves performance

4. Please briefly describe the process of template compilation in Vue.

1.缓存公共的mount函数，并重写浏览器平台的mount

2.判断是否传入了render函数，没有的话，是否传入了template，没有的话，则获取el节点作为template

3.调用baseCompile函数

4.解析器(parse)将模板字符串的模板编译转换成 AST 抽象语法树

5.优化器(optimize)-对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化

6.通过generate将AST抽象语法树转换为render函数的js字符串

7. 将render函数通过createFunction函数转换为一个可以执行的函数将render函数挂载到options中

8.执行公共的mount函数