Vue面试题及Vue知识点整理

const store = new Vuex.Store({ //store实例
  state: {
   count: 0
    },
  mutations: {
   increment (state) {
   state.count++
   }
   },
  actions: {
   increment (context) {
   context.commit('increment')
 }
 }
})

modules项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }
const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
})

九、vue-cli如何新增自定义指令？

1.创建局部指令

var app = new Vue({
 el: '#app',
 data: {
 },
 // 创建指令(可以多个)
 directives: {
  // 指令名称
  dir1: {
   inserted(el) {
    // 指令中第一个参数是当前使用指令的DOM
    console.log(el);
    console.log(arguments);
    // 对DOM进行操作
    el.style.width = '200px';
    el.style.height = '200px';
    el.style.background = '#000';
   }
  }
 }
})

2.全局指令

Vue.directive('dir2', {
 inserted(el) {
  console.log(el);
 }
})

3.指令的使用

<div id="app">
 <div v-dir1></div>
 <div v-dir2></div>
</div>

十、vue如何自定义一个过滤器？

html代码：

<div id="app">
  <input type="text" v-model="msg" />
  {{msg| capitalize }}
</div>

JS代码：

var vm=new Vue({
 el:"#app",
 data:{
  msg:''
 },
 filters: {
  capitalize: function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
  }
 }
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数。

十一、对keep-alive 的了解？

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。