Basic use of Vue

0. Vue

  • The MVVM pattern.
  • Two-way binding (responsive) : Observer-Watcher implements data updates from VM to V; Dom event listener implements data update from V to VM;
  • Incremental :(1) if you already have an existing server application, you can embed vue as part of the application to bring a richer interactive experience; (2) If you want to put more business logic on the front end, then VUE’s core library and ecosystem can also meet your various needs (Core +vuex+ VUE-route). (3) If we are building a large application, at this point we may need to split things up into separate components and files, vue has a command line tool that makes it very easy to quickly initialize a real project (Vue init webpack my-project). The use of VUE can be large or small, and it will be integrated into your project in a certain way. So it’s an incremental framework.
  • Contrast AngularJS:
  1. Reactive approach: Vue uses an observer-subscriber pattern, with a Watcher instance for each component instance, which records “touched” properties as dependencies during component rendering. Watcher is then notified when the setter for the dependency fires, causing its associated component to be re-rendered. To observe means to use Object.defineProperty to collect the dependencies in the getter with dep.depend, to get the dependencies in the setter with dep.notify, and to subscribe means to trigger Render to update the syntax tree. Assign value changes to the virtual DOM to implement partial component updates. AngularJS uses dirty checking. It uses watch to bind the values to be checked, then checks the values to be checked by watch, then checks the values to be checked by watch, then checks the data to be checked by scope for changes, but only enters the dirty checking when the specified event is triggered. Such as click, input, select and other user operations; Manually call apply(), apply(), apply(), digest(), HTTP, HTTP, HTTP, timeout; Ng-click (angular implements the apply directive for us) and apply (rootScope to $scope). If there are any changes, update the value and redraw the page.

1. Deep responsivity principle

  • When Vue is instantiated, getter and setter changes are made to properties in data, which is reactive. Vue can implement dynamic listening on arrays and objects already declared in data; Therefore, reactive attributes must be declared in data.
  • Vue does not allow you to dynamically add root-level responsive properties to instances that have already been created, and an error is reported.
  • An array of: Vue rewrites the usual approach to arrays to make them responsive, but does not detect changes that include modifying arrays by subscript index and changing array length. Can be achieved byVue.set(arr,index,value)orvm.arr.splice(index,1,value)To implement a response to a change in the array. withvm.splice(newLength)To respond to changes in array length.
  • Object: You can add responsive properties to nested objects. You need to use vue. set or set to add responsive properties. ‘vue. set(Object, Property,value)’ or ‘vm.set adds responsive properties. ‘vue. set(object, Property,value)’ or ‘vm.set’ adds responsive attributes. ‘Vue. Set (object, property, value)’ or ‘vm. Set (object, property, value); `

obj = Object.assign({},this.obj,{a:1,b:2});

  • Asynchronous update (DOM) queue: When a responsive property is modified, the component is not rendered immediately because the VUE is designed to update the DOM asynchronously. When it listens for data changes, the VUE opens a queue and caches all changes in an event loop. If a watcher is fired multiple times in this event loop, it will only be pushed into the queue once to record all data changes (this is important to remove duplicate data while buffering to avoid unnecessary calculations and DOM manipulation), and then update the component in the next ‘tick’ event loop. This is used if you want to update reactive properties and then ensure that the DOM is also updated (with effect)this.$nextTick(()=>{}), the callback function will be called after the DOM update is complete.

2.. Sync operator

reference

Implement the binding of component property values from the child component to the parent component. This applies if the child component also modifies the state value. Is a V-ON listener that is extended to automatically update the parent component’s properties.

<text-document :title.sync="doc.title"></text-document> When the child component needs to update the value of title, it needs to explicitly trigger an update event:  this.$emit('update:title', newValue)Copy the code

PS: The component uses the v-model default to assign a value to the props value property. PPS: In JavaScript, objects and arrays are passed in by reference, so for a prop of an array or object type, changing the object or array itself in a child component will affect the state of the parent component. PPPS: props property validation, note that those props are validated before a component instance is created, so instance properties (such as data, computed, and so on) are not available in default or validator functions.

3. Ref registers the reference

Specify an index ID for the child component, registering reference information for the element or component. Refs is an object that contains all of the REF components. Convenient access to DOM and DOM manipulation, reduce the consumption of DOM node acquisition; Non-reactive, avoid use in templates and computed properties. PS: $indicates that refs is a VUE object, not a normal JS object.

4. The IS attribute of the label

Used for dynamic components and to unbind certain tags from inner tags.

  • Dynamic tags: reserved by use<component>Element, dynamically bound to itsisFeature that allows multiple components to use the same mount point and switch dynamically.
`var` `vm =` `new` `Vue({`
`el:` `’#example’“,`
`data: {`
`currentView:` `’home’`
` `}
`components: {`
`home: {` `/* … * / ` `}, `
`posts: {` `/* … * / ` `}, `
`archive: {` `/* … * / ` ` `}
`} `
` `})
` `
` `
` `
  • The TABLE, UL, and OL labels cannot be inserted with custom labels, but with specific labels. Therefore, the IS attribute is used
` `

`

`

`

`

5. Slot Distributes content

6. Scope scope

7.vm.
a t t r s with v m . Attrs and vm. listener

8. Attribute inheritance is disabled for the root element of the child component

Set inhertAttrs: False in the child component’s option, which does not affect the style and class binding

9. Use v-Models on components

<input v-model="searchText">
Copy the code

Is equivalent to:

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
Copy the code

When used with components, the V-Model looks like this:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>
Copy the code

In order for it to work, the inside this component must:

  • itvalueAttribute is bound to a name namedvalueOn the prop of
  • In itsinputThe event is triggered when a new value is passed through a custominputEvent is thrown

The code looks like this:

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})
Copy the code

The V-Model should now work perfectly on this component:

<custom-input v-model="searchText"></custom-input>
Copy the code

10. Lazy loading of images

The default and failure diagrams can be configured globally or locally using the VUe-Lazyload plug-in v-lazy directive.

11. Customize the command V-crop

1. Keep-alive (built-in abstract component)

www.cnblogs.com/sysuhanyf/p…

  • Built-in abstract component

  • Actived and Deactived life cycles, nested triggers

  • Complete life cycle

  • Local content cache

  1. Include attribute: string or regular expression. Only components that match (name) are cached
  2. Exclude: string or regular expression. Any matching component will not be cached
  • Page caching
  1. Fixed: Configures routes and adds attributesmetaThe object of thekeep-AliveProperty, and can pass$route.meta.keepAliveGet, and pair in order<router-view>Do the distinction to achieve uniform site pages need to cache can match the effect.
  2. Dynamic: Navigation guard hooks are used when a page needs to dynamically configure caching based on the jumpbeforeRouteLeave(to,from.next)Set in theto.meta.keepAlive
  • usekeep-aliveExtra triggeractivatedanddeactivatedThe life cycle
  • Flush forward, cache backward
  • Record the scrolling position of the page

2. Differences and application scenarios between Watch and computed Tomography

  • Difference: Computed has caching, which complements setters;

  • Application scenarios: computed: (1) when the array of the need to deal with or as a filter to show, is not convenient to use v – for immediate processing, can be defined to calculate attribute filter order processing, such as using computed properties, and for not applicable for calculating properties of multilayer nested case, the inner need to filter the sorting can use additional methods, such as;

    <ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  } 
}
Copy the code

    (2) Can monitor the change of multiple responsive attributes;

3. The modifier

Juejin. Cn/post / 684490…

  • Form modifiers: V-model. lazy, V-model. number, V-model. trim
  • Event modifiers: Three phases of the event flow: Capture phase In the target phase bubbling phase. The default is the bubbling phase event. @click.once, @click.stop, @click.self, @submit. Prevent, @click.capture, @scroll. Modifiers can be used in series, with priority from left to right.

5. Event handling methods

Events are native “DOM events.” Manipulation of the DOM is triggered.

Sometimes you also need to access the raw DOM event in the associative sentence processor. You can pass it to the method with the special variable $event.

4.Vue deep monitoring

5.Vue parent and child components transfer values

props/emit

Parent and parent and children

6. NextTick and comparison with setTimeout

NextTick delays the callback until after the next DOM update cycle

SetTimeout is the next queue for the macro task

7.vue diff

8. Vue fundamentals

9. How to optimize VUE

10.
p a r e n t with The parent and children

The root Vue instance of the current component tree.

A direct child of the current instance.

11. The virtual DOM

12. Rely on collections

Core plug-in – Vue Router

1. Single-page vs. multi-page apps:

A SPA needs a routing system, which is why vue-Router exists (remember router-view routes are all jammed in a local location, and the entire HTML only comes in on the first request). The core of front-end routing lies in that JS can sense the change of URL, change the view without sending a request to the back end, just JS re-rendering, which requires additional USE of SSR for search engine optimization, and Vuex can be used to transfer data for state management. Multi-page application is an architectural design different from single-page application. In a project, entry can be used to configure multiple HTML files to achieve multi-page application. Template.html of each project can be maintained and user information can be injected into the header. The technologies and frameworks used are the usual ones.

2. The difference between the hash mode and the History mode is that the route is detailed and easy to understand

www.jianshu.com/p/9449d7605…

Blog.csdn.net/fifteen718/…

www.jianshu.com/p/6470a1cf4…

3. Dynamic route matching and routing component parameter transmission:

It can be obtained from the route.params object, but it is highly coupled to the route. You can decouple props, which can be used directly in components by registering props; In addition, the route.params object is obtained, but the coupling with the route is high. You can decouple props, which can be used directly in components by registering props; In addition, the route.params object is obtained, but the coupling with the route is high. You can decouple props, which can be used directly in components by registering props; In addition, route.query can get the query parameter of the route

4. Nested routines are:

That is, it is still used in an outer routing page and children is added to the route configuration attribute to configure child routes

5. Navigation Route:

, a tag-like function that allows users to navigate in routable applications. Specifying the destination address with the to attribute actually implements router.push(), similar to window.history.pushState(), which adds a record to history. In addition also has the replace property, invoked the route. The replace (), similar to the window. The history. The replaceState (), append attribute, the tag attributes, etc. You don’t have to write a jump event…

6. Vm. $router:

vm.$router.push()

vm.$router.replace()

Vm.$router.go(n)/back(n) indicates how many steps forward or backward, similar to window.history.go/back

7. Named views:

To display multiple views on a page, name the view and add the Components configuration option to the routing configuration. (Of course, this can also be done directly through components.)

Redirect routes and aliases:

Redirect attributes are used in route configuration options. Setting the alias attribute alias can be used to abbreviate the route name.

9. Navigation Guard:

  • Global guards: router.beforeeach (), router.beforeresolve (), router.aftereach ()
  • Exclusive Guard: Added beforeEnter to route configuration
  • Component internal guard: Added berforeRouteEnter, berforeRouteUpdate, berforeRouteLeave, etc
  • Global, route exclusivity, and guards within components are interspersed in a sequence of triggers

10. Transition dynamic effect:

Vue provides a variety of application transitions when inserting, updating, or removing the DOM. Encapsulate components using the Transition provided by VUE

Core plug-in — VueX

Core plug-in – Vue SSR