Lifecycle hook functions

The beformeCreate command cannot obtain the props and data, and cannot manipulate the DOM. This command can only be executed once

Created is the first access to the data and props data in the VUE lifecycle, but it cannot manipulate the DOM tree. It can only be done once

BeforeMount Before rendering, data can be manipulated but dom cannot be manipulated. Perform this operation only once

After mounted, the first dom operation in the life cycle can be executed only once

BeforeUpdate and updated Are called before and after data is updated. They can be called multiple times but are rarely used

The page that uses keep-alive has two unique life cycles: Activated when the page is displayed and deactivated when the page is hidden

Finally, there are before-and-after hook functions, beforeDestroy and Destroyed. The former is suitable for cleaning up the page (removing events, timers, etc.) to avoid memory leaks

Component communication

Component communication generally falls into the following categories

  • Parent-child component communication
  • Sibling communication
  • Communicate across multiple tiers of components
  • Any component

Father and son components

The parent component passes data to the child component via props, and the child component passes data to the parent component by sending events via emit. However, this is a one-way data flow and the parent component must be told to modify the data through an event

Sibling communication

You can transfer values between components via the public bus

Communicate across multiple tiers of components

Provide and Inject are used together in vue

Arbitrary component communication

Make changes to a single piece of data in multiple places in vUE, preferably using VUEX for communication

Communication between components

  • ref & parent
    • Parent to Child (Parent accesses child instance object (this))
      • Define the REF attribute on the child component tag
      • This.$refs.ref value === subcomponent this
    • Child to parent (an object where a child accesses an instance of the parent)
      • This.$parent=== this of the parent component
      // app <van-button> <son></son> </van-button> $parent===van-button's thisCopy the code
  • props
    emit

    • eventbus
      • Definition: The intermediate message hub defines a $bus in main.js

        • Vue.prototype.$bus=new Vue()

      • Register: Creates a listening event for the component that wants to receive the message 
        this.$bus.on('message',(str)=>{
	console.log(str)
})
Copy the code
      • Trigger: Send a message via $emit in the component that wants to send a message

      This.bus.bus.bus. emit(‘ event name ‘, ‘parameter passed ‘)

  • vuex
  • attrs & listeners
    • V-bind =” attrs”attrs” attrs”attrs” attrs”attrs non-props attribute
    • v-on=”$listeners”
  • provide & inject
    • Higher-order component pass
    • Only used to pass values from higher components to lower components
      • The value of provide cannot be modified
      • Inject: value (the heap can be modified, the stack cannot be modified), the original value cannot be changed, the value of the reference value can be modified at will as long as its reference is not changed

The difference between computed and Watch

Computed is a computed property that relies on one or more values to generate new values. Computed has a cache and only changes when the dependent values change

The watch is executed only when the value it listens for changes, with two parameters, one old value and one new value.

The role of the keep-alive component

When switching components, keep some components in state to prevent multiple renders. You can wrap the component’s routing exit with keep-alive, using the name identifier, and separate it with commas if there are more than one.

There are two special lifecycle constructors in Keep-Alive. Instead of destroying a component during a switch, they are cached in memory and execute the Deactivated hook function, which is executed when the component is re-rendered

V-if is different from V-show

V-show is done by controlling display: None; And display:block switch, does not re-render dom, consumption is relatively small, suitable for frequent switching

V-if is the underlying vUE compilation. When false, the component is not compiled, and rendering is not compiled into the page until true. (V-if cannot be used in the same tag as V-for)

Dynamic components

A special element is provided in VUE to dynamically mount different components, using the IS feature to select which components to mount

<ul>
	<li @click="mycom='login'">The login</li>
    <li @click="mycom='regitser'">registered</li>
</ul>
<compontent :is="mycom"></compontent>

<script>
import login from './login'
import regitser from './register'
export default{
	data(){
    	return {
        	mycom:'login'}}}Copy the code

Performance optimization

Disadvantages of VUE are as follows: 1 Slow initial loading 2 Compatibility. Only VUE optimization above IE8 is supported

  • Gzip compression (server processing)
    • Gzip is a compression of the corresponding HTML, CSS, JS
    • Front end compression
      • Compression is supported in WebPack packaging
    • The back-end compression
  • Route lazy loading
  • Reducing interface requests
    • Cache components
    • Vuex stores user information
  • Components load on demand (asynchronous components, common methods, etc.)
  • Image Sprite (reduces server requests)
  • CDN global use of JS library
  • Image compression and other resources