1. What is the difference between a watch and computed and methods?

First translate the word, then explain the function, and finally force to find the difference.

Important: The biggest difference between computed and methods is that computed has a cache: If the attributes that computed attributes depend on do not change, then computed attributes do not recalculate. Methods means seeing and calculating once.

Compare watch with computed, which computes a property (nonsense), and watch, which might do something else (such as report data)

2. Required: What lifecycle hook functions does Vue have? What’s the use of separation?

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed.

Mounted specifies the mounted hook in which data is requested.

3. Required test: How does Vue communicate between components?

Parent and child components: Communicate through events using V-Ons

Father-grandson component: Use v-ON twice to realize father-grandson communication through father-grandfather communication and father-son communication

Any component: Use eventBus = new Vue() to communicate, eventbus. on and eventbus. on and eventbus. emit are the main apis

Any component: Communicate using Vuex

Reference: segmentfault.com/a/119000002…

4. Required test: Vue data response how to do?

The answer is in the document Deep Responsive Principles.

Use Object.defineProperty to turn all of these properties into getters/setters

Vue cannot detect the addition or deletion of object attributes. The solution is to manually call Vue. Set or this.$set

What is vue.set used for?

See a problem

6. How do you use Vuex?

Vuex is a state management mode developed specifically for vue.js applications.

Name the core concepts and function: State/Getter/Mutation/Action/Module

How did you use the VueRouter?

Vue Router is the official route manager for vue.js.

Name and use the core concepts: History mode/navigation guard/route lazy loading

Name common apis:

router-link

router-view

this.$router.replace

this.$route.params

this.$router.push(‘/user-admin’)

BeforeEach ((to, from, next) => {if (to.name! == 'Login' && ! isAuthenticated) next({ name: 'Login' }) else next() })Copy the code

Route lazy loading

JavaScript packages can become very large when packaged to build applications, affecting page loads. It would be much more efficient if we could split the components corresponding to different routes into different code blocks and then load the components only when the routes are accessed.

8. What is a route guard?

Look at the official documentation for an example.

Router. beforeEnter: Three parameters (to,from.next)

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
Copy the code