1. MVC is different from MVVM

Why is data a function

The data in the component is written as a function, and the data is defined in the form of the return value of the function, so that each time the component is reused, a new data is returned, similar to creating a private data space for each component instance and letting each component instance maintain its own data.

3. Vue component communication mode

  1. props 和 $emit
  2. $parent $children
  3. $attrs 和 $listeners
  4. provide inject
  5. $refsGetting component instances
  6. EventBus sibling data transfer
  7. Vuex status management

4. Vue life cycle

5. The difference between V-if and V-show

V-if is converted to a ternary expression during compilation. This node is not rendered if the condition is not met. V-show is suitable for scenarios where the condition is switched very frequently

Opacity :0; display: none; visibility:hidden; opacity:0

All three have something in common: hiding. The difference between

  1. Does it take up space

Display: none Indicates that the position is not occupied after being hidden, and opacity: hidden, opacity: 0 indicates that the position is still occupied after being hidden

  1. Whether the child element inherits

Display: None does not inherit quilt elements

Visibility: hidden displays child elements by setting the child element visibility:visible

Opacity: 0 is inherited by the quilt element, but cannot be redisplayed by setting a child element opacity:1

  1. event

Display: None The events that cannot trigger the binding

Visibility: Hidden Will not trigger the binding event

Events bound to the opacity: 0 element can be triggered

  1. Transition animations

Transition is not valid for display

Transition is not valid for visibility

Transition does not apply to opacity

6. Vue built-in instructions

  1. v-once

An element or component with a V-once directive defined (including all descendant nodes within the element or component) can only be rendered once. After the first rendering, even if the data changes, it will not be re-rendered. Generally used for static content display. You can use v-cloak to set styles that will be removed from the bound HTML element when the vue instance is compiled. The page displays the vue source code when the network is slow and the page is still loading vue.js. We can solve this problem with the V-cloak command.

<div id="app" v-cloak>
    {{ context }}
</div>
Copy the code
[v-cloak] {
    display: none
}
Copy the code
  1. v-bind

The V-bind directive can be used to update HTML attributes in a responsive manner

<! -- Complete syntax -->
<a v-bind:href="url"></a>

<! - for - >
<a :href="url">

<! -- Dynamic abbreviations -->
<a :[key] ="url">
Copy the code

  1. v-on

  2. v-html

Double braces turn the data into plain text, not HTML code. To output real HTML, you need to use the V-HTML directive

Arbitrary HTML rendered dynamically on a site can be very dangerous because it can easily lead to XSS attacks. Use HTML interpolation only for trusted content and never for user-supplied content.

  1. v-text

Parse the data into plain text 7.V-model

  1. v-if/v-else
  2. v-show
  3. v-for
  4. v-pre

7. Vue one-way data flow

All prop forms a one-way downlink binding between their parent prop: updates to the parent prop flow down to the child, but not the other way around. This prevents unexpected changes in the state of the parent component from the child, which can make the application’s data flow difficult to understand.

Every time a parent component changes, all prop in the child component is refreshed to the latest value. But we often have the need to change prop values

  1. The op is used to pass an initial value: the child component that wants to use it as a local prop data can define a local data property and take the prop as its initial value
props: ['initialCounter'].data() {
  return {
    counter: this.initialCounter
  }
}
Copy the code
  1. This prop is passed in as a raw value and needs to be converted. In this case, the value of prop is finally used to define a calculated property
props: ['size'].computed: {
  normalizedSize() {
    return this.size.trim().toLowerCase()
  }
}
Copy the code

Note that objects and arrays are passed in by reference in JS, 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

8.Com Puted and Watch differences and application scenarios

Computed is a computed property that depends on other property values, and computed values have a cache that returns content only when the value of a computed property changes. It can set getters and setters

Watch listens for a change in the value and executes a callback, in which logical operations can be performed

Summary: Use computed if a piece of data needs to undergo complex computations; use Watch if a piece of data needs to be monitored and manipulated

9. Why not use v-if and V-for together

When vUE processes instructions, V-for has a higher priority than V-if. When you need to use them together, you can use computed properties.

<ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
</ul>
Copy the code

It will go through the following checks

this.users.map(function (user) {
    if(user.isActive) {
      return user.name
    }
  })
Copy the code

So even if we render only a small portion of the user’s elements, we have to traverse the entire list every time we re-render.

  computed: {
    activeUsers: function() {
      return this.users.filter(function(user) {
        return user.isActive
      })
    }
  },
Copy the code
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
Copy the code

This way to write

  • The filtered list is recomputed only when the Users array changes, making filtering more efficient
  • Using v-for=”user in activeUsers” so that we only iterate over activeUsers, rendering is more efficient
  • Decouple the logic of the render layer for greater maintainability.

To be continued…