Vue

computed和watch的差别:

• vue 的计算属性有缓存，依赖与data域内数据。数据改变则重新渲染，Date.now()不依赖data域数据，所以不重新渲染

computed: {
    now() {
    	return Date.now()
    }
}

• 计算属性用于一个数据基于多个数据改变，watch用于多个数据基于一个数据改变

vue生命周期

• 钩子函数
  • created：data属性已初始化，el未被初始化
  • beforeMount：el被初始化，但模板未被渲染
  • mounted：模板渲染完成，el挂载

vuex基本用法

• 定义

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

// store / index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  // 同步权利修改 state 的数据
  mutations: {
    addN(state,step){
      // 变更状态
      state.count += step
    }
  },
  // 异步修改state
  actions: {
    // 在Actions 中不能直接修改 state中的数据，要通过 mutations修改。
    addAsync(context,step) {
      setTimeout(() => {
        context.commit('addN',step)
      }, 1000);
    }
  },
  getters: {
    showNum(state) {
      return '当前最新的数量是【' + state.count + '】'
    }
  },
})

• 使用

IncrementN(){
  this.$store.commit('addN',5)
}

handle(){
  this.$store.dispatch('addAsync',5)
}
handle2(){
  // 触发 actions 的第一种方式
  this.$store.getters.showNum
}

vuex中模块用法

• 目录解构

- src
- components
- store
    -index.js
    -modules
        -app.js
        -bus.js

• app.js

const state = {
    user: {}, // 需要管理的状态数据
}

const mutations = {
    setUser (state, val) {
            state.user = val
        }
}
const getters = {}
const actions = {}

export default {
    namespaced: true,
    state,
    mutations,
    getters,
    actions
}

• index.js(手动引入方式)

import Vue from 'vue'
import Vuex from 'vuex'

import bus from './module/bus'
import app from './module/app'

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        // 这里是根vuex状态
    },
    mutations: {
        // 这里是根vuex状态
    },
    actions: {
        // 这里是根vuex状态
    },
    modules: { // 子vuex状态模块注册
        namespaced: true, // 为了解决不同模块命名冲突的问题
        app,
        bus
    }
})

• index.js(动态引入方式)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const dynamicModules = {}
const files = require.context('.', true, /\.js$/)

const dynamicImportModules = (modules, file, splits, index = 0) => {
  if (index == 0 && splits[0] == 'modules') {
    ++index
  }
  if (splits.length == index + 1) {
    if ('index' == splits[index]) {
      modules[splits[index - 1]] = files(file).default
    } else {
      modules.modules[splits[index]] = files(file).default
    }
  } else {
    let tmpModules = {}
    if ('index' == splits[index + 1]) {
      tmpModules = modules
    } else {
      modules[splits[index]] = modules[splits[index]] ? modules[splits[index]] : {namespaced: true, modules: {}}
      tmpModules = modules[splits[index]]
    }
    dynamicImportModules(tmpModules, file, splits, ++index)
  }
}

files.keys().filter(file => file != './index.js').forEach(file => {
  let splits = file.replace(/(\.\/|\.js)/g, '').split('\/');
  dynamicImportModules(dynamicModules, file, splits)
})

export default new Vuex.Store({
  modules: dynamicModules,
  strict: process.env.NODE_ENV !== 'production'
})

• main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})