vue学习总结（问题总结）

Nirvana丶
101 阅读3分钟

vue

1.虚拟dom

www.bilibili.com/video/BV1dV…

以前的jquery时期，我们是直接操作dom来改变视图的，再用vue或者react用的是虚拟dom，因为操作dom的开销太大了，而运行chrome运行js超快，所以就想到了用js去描述dom节点

image.png

这里用的是一个对象去描述一个节点也就是vnode（虚拟节点），tag是标签，props是属性，children是子节点。

其中vue的虚拟dom参考的就是Snabbdom的，github的库。就是将你用js对象描述的vnode利用patch函数插入到container容器中去，

image.png

2.diff算法

diff算法是虚拟dom的核心，vue在diff算法的基础上，就是新旧vnode比较，修改之后，遍历的次数太多，vue优化了，使用同级比较并且在同级比较的基础上如果说不存在或者新增了标签名字就直接跳过不进行更加深度的遍历了，新增的需要。

3.手写render函数

4.部署发布dist

idea中配置

image.png

把服务器和映射都配置好

然后npm run build:prod(prod是自己配置的服务)

image.png

之后dist右键上传

image.png

5.computed 和 watch（使用场景区别）

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

computed的用法


computed: {
  // 计算属性的 getter
  activitStatus: function () {
    // `this` 指向 vm 实例
    let map ={
      0:'进行中',
      1:'未开始' ,
      2:'未审核' ,
      3:'已结束',
      4:'已下线'
    }
    return map[this.dataList.activeStatus]
  }
},

watch的用法：


watch:{
   openEditAndLookStrategy(newName,oldName){
         console.log(newName,oldName)
   }
},

6.vue中组件传值。（组件注册）

课程：www.bilibili.com/video/BV1h7…

注册组件

在components目录下面创建组件。创建之后注册在要使用的页面，现在用的最多的，就是弹窗组件。

//引入创建策略的组件
import createStrategy from '../../../components/activitCpm/createStrategy.vue'

//声明组件
components: {
  createStrategy
},

//页面上引入组件
<createStrategy :createStrategyOpen="dialogVisible" :operationType="operation" :id="id" @closeActivity='close'/>

父组件像子组件传值，用的是props，用的属性


//在标签上这样写 bind上属性，然后在那边拿属性的名字用createStrategyOpen。父页面用的是后面的值dialogVisible

<createStrategy :createStrategyOpen="dialogVisible" :operationType="operation" :id="id" @closeActivity='close'/>
  
  
props: {
  createStrategyOpen: Boolean,
  id:Number,
  operationType: String
}, 


//页面上直接用
 
<el-dialog
  :title="title"
  :visible.sync="createStrategyOpen"
  width="60%"
  :before-close="closePage"
  center
> </el-dialog> 


//拿数据 js里面

this.$parent.id,

子组件像父组件从传值用的是事件，$emit(name，value)

//接受那边事件的值

 @closeActivity='close'
  
  
close(val) {
  this.dialogVisible = val 
}, 
  
  
  //组件
<el-button @click="closePage"></el-button>


closePage(){
  this.$emit("closeActivity", false)
},

7. vuex插件使用

1.state（存）

在store文件中的index中

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import manufacturer from './modules/manufactureId'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    manufacturer
  },
  getters
})

export default store

getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  
  // 这个地方导出
  
  hotelName: state=> state.user.hotelName
}
export default getters

模块文件modules中新建user.js

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    
    //hotelName是我新创建的
    hotelName:0 
  }
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      // login({ username: username.trim(), password: password }).then(response => {
      //   const { data } = response
        commit('SET_TOKEN', 'admin-token')
        setToken('admin-token')
        resolve()
      // }).catch(error => {
      //   reject(error)
      // })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      // getInfo(state.token).then(response => {
        const  data  = {
          avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
          name: 'Super Admin'
        }

        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { name, avatar } = data

        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(data)
      // }).catch(error => {
      //   reject(error)
      // })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

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

1.第一种使用方法

在页面上直接使用，就好像是一个globalData一样

<p>{{$store.state.user.hotelName}}</p>

2.第二种注册使用。使用computer属性来处理


//页面

<p>{{hotelName}}</p><el-button @click="subtractionCount"></el-button> 

//注册

import { mapGetters } from 'vuex' 


//计算属性
computed: {
  ...mapGetters([
    'hotelName'
  ])
},

2. mutation（扭转）

当然在组件和页面上可以操作state里面存储的值，但是不建议这样操作，需要的话最好在mutation里面做操作。

不能在mutations函数里面执行异步操作，这样修改的数据，监听器监听不到数据变化。所以mutation数据交给actions去做异步的处理。


//不合适的操作

addName(){
  this.$store.state.user.hotelName++
}



state： { 
    token: getToken(),
    name: '',
    avatar: '',
    hotelName:0 
}
 

mutations : { 
  add(state){
      state.hotelName++
  }
}


//页面上
addName(){
  this.$store.commit('add')
}

3.action （异步操作数据 ）

基本操作

thirdpartimg.51ishare.com/16641790015…

传参数的方式

thirdpartimg.51ishare.com/16641788217…

但是我的vue项目中使用不了上面的两种方法，因为开启了命名空间

   
const getDefaultState = () => {
  return { 
    hotelName:0
  }
}

const state = getDefaultState()

const mutations = {
  
  SET_ADD:(state)=>{
    state.hotelName ++
  }
}

const actions = { 
  addNameCaozuo({commit}){
    return new  Promise(resolve=>{
      commit('SET_ADD')
      resolve()
    })
  }
}

export default { 
  state,
  mutations,
  actions
}

页面上

<p>{{hotelName}}</p>
<el-button @click="addName">自增+</el-button> 


methods：{
    addName(){
       // await store.dispatch('user/resetToken')
       this.$store.dispatch('user/addNameCaozuo')
    }
}

4.getter

getter用于对store中的数据进行加工生成新的数据，类似于vue中的计算属性，是对数据的一种包装，并不会操作或者改变state中的数据。

第一种方式：

 this.$store.getter.名称

第二种方法：

import {mapGetters} from 'Vuex'

computed:{
    ...mapGetter({'showNum'})
}
avatar
文章
阅读
粉丝