1, the difference between small program development and web development?

  • 1, web development is a single thread, web development rendering thread and script thread is a process. Applets are different processes
  • 2, applets and web development environment is different
  • 3. Web development can use various DOM API exposed by the browser. The logic layer and rendering layer of the small program are separated.

2. Is vUE data flow unidirectional or bidirectional?

Essentially one-way, v-models are syntagmons of V-bind :value and V-on :input, which listen for user events to update data and perform special processing for extreme scenarios. And in VUE, when the parent and child components pass values, the data is one-way.

3. What are the advantages of Vue framework?

  • 1. Simple and easy to learn
  • 2. Virtual Dom loading
  • 3. Two-way data binding
  • 4. Componentized development
  • 5. Lightweight frameworks

4. What are the methods of value transmission between Vue?

  • 1. Transmission between father and son

(1) parent component binds custom properties in child component (2) Child component receives via porps property

  • 2. Child component passes value to parent component:

(1) Bind custom events in the parent component to the child component tag; (2) The child emits a custom event via the this.$emit() method, passing the value to the parent component.

  • 3. Value transfer between sibling components:

(1) shared to the parent, which is then distributed by the parent (state enhancement) (2) using Vuex (3) using the BUS event bus

  • Provide/Inject Parent Component Indicates the value of grandson component

We can use inject to accept the provide property value of the child component by passing values from the parent component

5. Why must data be a function in a Vue component?

If data is an object, when reusing components, because data points to the same reference type address, any changes to the data of one component will change the data of the other reused components as well. If data were a function that returns an object, this problem would not occur because each time a component is reused it returns a new object with a different reference address. What is the execution context? In short, an execution context is an abstraction of the context in which JavaScript code is evaluated and executed. Whenever Javascript code is running, it is running in an execution context.

Type of execution context

There are three types of execution context in JavaScript.

  • Global execution context – This is the default or base context, and any code that is not inside a function is in the global context. It does two things: it creates a global Window object (in the case of the browser) and sets the value of this to equal the global object. There is only one global execution context in a program.
  • Function execution Context – Each time a function is called, a new context is created for that function. Each function has its own execution context, but is created when the function is called. There can be any number of function contexts. Each time a new execution context is created, it performs a series of steps in a defined order (discussed later).
  • Eval function execution Context – Code executed inside the Eval function also has its own execution context, but since Eval is not often used by JavaScript developers, I won’t discuss it here.

Comparison between VUe3 and VUe2

1. V-if and V-for have different priorities

In VUe2, v--for has a higher priority, and in VUe3, V-if has a higher priority.Copy the code

2. Benefits of V-for Key

  • Problem: VUE features bi-directional binding, so whenever data changes, the page renders new data on the page. If the data is large, it is very time-consuming for V-FOR to iterate over it every time.

  • Solution: Key solves this problem. When adding data to a page, the page only renders the newly added data.

  • Key benefits: V-for uses the in-place reuse strategy by default. When the list data is modified, it will determine whether the value is changed based on the key. If it is changed, it will re-render.

  • The only reason for the key: The only reason for the key is that if you insert a piece of data in the insert, the data after the insert will be rendered

3. V-slot and slot

In vue2, slots are made up of slots and slot-scopes. In VUe3, v-solt is used directly. In VUe3, the name of the unnamed <slot> is implicitly "default". In VUe3, if a named slot is used, the v-slot directive is used, providing parameters as the nameCopy the code
Such as: <template v-slot:default> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> <template V-slot :footer> <p>Here's some contact info</p> </template> V-slot can only be added to template components. </p> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> <template #footer> <p>Here's some contact info</p> </templateCopy the code

4. Differences between V-IS and VUE2

In vue2, v-is can be a dynamic name, but in vue3, v-is can only be a stringCopy the code

5. What is the CompositionApi? For what? What problem was solved? What are his characteristics? How to use it?

  • 1. What is it? Is a new feature unique to VUE3

  • 2, for what? To solve code sharing and duplication problems in large projects. Merge fragmented code that is difficult to maintain and understand

  • 3. What problems have been solved? Keep single logical code clear in projects and simplify complex problems

  • 4. What are the characteristics?

    Setup: executes before the component is created. This does not have setup because the component instance is not created when setup is executed. Setup usually has two parameters (context, props), and any return from setup is exposed to the component and the component's template. A variable declaration, normally read as ref. Value ref, can make any variable react anywhere. The original object is not needed because the Number and string types are passed by value rather than by reference. Using a ref ensures fast and efficient response whenever and wherever possible. Setup registers a hook function. In setup, you have a hook function onMounted ④ Watch, which can take three parameters (the first is what you want to monitor, the second is a callback, and the third is an optional configuration option), and is itself a function. Functions functions, computed functions, to get computed data, you use the value property, like refCopy the code

  • Vue3 Global API

    There are a lot of global variables and configurations in VUe2 that provide a lot of convenience for VUE, but also raise questions

In vue, instances of the same vue constructor share the same global configuration. In Vue, instances of the same Vue constructor share the same global configuration. 2. After testing, restoring the local global configuration is also a hassle, and, in the VUE test, Import {createLocalVue, mount} from '@vue/test-utils' pain point: Global configuration makes it difficult to share the same copy of Vue between multiple "applications" on the same page with different global configurations. So in Vue3, a new global API was added: reateAppcCopy the code
  • Functional Components vue3
In VUe3, the single-file component (SFC) <template> of the functional component is removed. In VUe3, the {functional:true} property created by the function is removed. Functional components can only be created using normal functionsCopy the code

There are two uses in VUe2: (1) return multiple root nodes; (2) improve performance optimization because function components initialize faster than state components

Changes to VUe3 1. State components can also return multiple root nodes 2. Performance of state components has been improved to the same level as functional components

  • Add Async Components

In VUe2, there was nothing about asynchronously loading components. In VUe3, there was an asynchronous loading component. In VUe3, Functional Components are defined as pure functions that require a component definition wrapped in defineAsyncComponent to specify asynchronous Components

In the loader function, the vue2 loader has been replaced with Component, while the vue2 parameters reject and resolve do not need to be passed in vue3, but must return a Promise

Vue3 new

  • emits Options

Vue3 added the emits and emits attributes to define the events that a component can issue to its parent. Because in VUe2, while you can pass data using props, Vue3, which does not know which component is calling, can pass data using emits and props and specify which method is calling.

<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div></template><script>
export default {
props: ['text'],
emits: ['accepted']
}</script>
Copy the code

eventApi

1. The on, ON, ON, once, $off events are removed from vue3

  1. render function API
Changes in VUe3:1, H Render has become a global reference instead of an automatic reference. Import {h} from 'vue'; import {h} from 'vue'. The render function tag has changed. In VUe2, the Render function automatically accepts arrays like h, but in VUe3, the render function does not accept any other arguments, so it is usually used inside the setup function. Another advantage of this is that you can access the reaction states and functions declared in scope and the parameters passed to setup. VNode props formatting: In VUe2, a list can be nested if a custom attribute is a VNode attribute, but in VUe3 it is more likely to be flat, such as {nn:{innerHTML: "},}, innerHtml: "in vue3 In VUe2 a component is registered and the render function works fine when the component name is passed as a string to the first argument, but in VUe3 the string ID cannot be used to look up the registered component since VNode is no longer context-bound. But we can import the resolveComponent method to clean up the previous component.Copy the code
  1. APISlots Unification
In vue3, this.$slots is exposed as a method, This.$scopedSlots is removed // 2.x Syntaxthis.$scopedslots.header () Replace all this.$scopedSlots with this.$slots in 3.x 2. Replace all occurrences of this.$slots.myslot with this.$slots.myslot ().Copy the code

Transition Class Change

In VUe3, v-enter is renamed to v-enter-from, and v-leave is renamed to v-leave-form

$listeners removed

In vue3, the listener is removed and has been merged into the listener is removed and has been merged into the part of attrs

$attr sincludes class & style

In VUe2, class and style are handled in the virtual DOM, and they are not included in the $attr when they use inheritAttrs: False has the following side effects: 1. Attributes in $attrs are not automatically added to the root node, leaving the developer to decide where to add them. 2.Copy the code

FragMent

Vue3 is a new feature that allows only one root node in VUe2, but allows multiple root nodes in Vue3.Copy the code

Global API TreeShaking

In VUe2, custom exposure of Dom operations requires the addition of vue.nexttick () events, but in VUe3 nextTick is already globalized. It needs to be introduced to workCopy the code

Props Default FunctionthisAccess

In Vue3, the propsm default factory function does not have access to this, whereas in VUe3, props passes the received component as an argument to the default function. The Inject Api can use the custom-directives hook functions in the default functions and have been renamed to better align with the component declaration cycle

  • Bind beforeMount Called when the directive is bound to an element, and only once inserted Mounted called when the element is inserted into the parent DOM

    BeforeUpdate This hook function is called componentUpdated when the element itself has changed before being removed in update vue3. This hook function is used when the element of the component has changed but the child element has not changed This hook function is called when the component and its child nodes change

    BeforeUnmount Is similar to the component lifecycle hook function. It is called unbind unmounted before the element is unmounted and only once after the component is deleted

  • Custom Elements Interop Custom element interaction

In VUe3, custom elements should be configured through compiler configuration options rather than runtime, and custom element whitelists should be run during template compilation. The is attribute is limited to running only in < Component > components. 3. The new ADDITION of V-IS to vue3 also supports running in VUe2.Copy the code