本文总结了前端开发中的Vue.js核心知识点，包括$set的使用、Vue插槽的详细讲解、Vuex状态管理的深入理解，以及日期格式化、全局替换空格、Vue双重循环等实用技巧。同时，还探讨了Vuex的mutations、actions、getters的使用以及源码解析，提供了一些面试常见问题的解答。
前端知识总结
1，$set的用法
//可以实现数据响应式改变，写法如下
this.$set(this.classDataObj, "startClassTime", new Date(row.startTime));
2，判断字段没有值就切掉
const obj = {
...origin };
// if (!obj.endTime || !obj.startTime) {
// obj.endTime = "";
// obj.startTime = "";
// }
for (const [key, val] of Object.entries(obj)) {
if (!val) {
delete obj[key];
}
}
3，vue插槽slot的使用
1，插槽默认值的使用
<button-self></button-self>
<script>
//全局组件
Vue.component('buttonSelf',{
template:`<button type="submit"><slot>Submit</slot></button>`
})
var app =new Vue({
el:"#app",
data(){
return{
user:{
name:'新年快乐！'}
}
}
})
</script>
//注意：如果<button-self></button-self>中间不加任何值那就默认使用<slot>Submit</slot>这里的Submit值
2，具名插槽
<base-layout>
<template v-slot:header>
<h1>Here might be a page title<h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
<script>
//全局组件
Vue.component('baseLayout',{
template:`<div class="container">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>`
})
var app =new Vue({
el:"#app",
data(){
return{
user:{
name:'新年快乐！'}
}
}
})
</script>
4，转成日期年月日时分秒格式
//格式化日期成年月日形式
// export function formatTen(num) {
// return num > 9 ? (num + "") : ("0" + num);
// }
// export function formatNewMonthDate(date) {
// var date = new Date(date)
// var year = date.getFullYear();
// var month = date.getMonth() + 1;
// var day = date.getDate();
// var hour = date.getHours();
// var minute = date.getMinutes();
// var second = date.getSeconds();
// return year + "-" + formatTen(month) + "-" + formatTen(day)+ " " +formatTen(hour)+ ":" +formatTen(minute)+ ":" +formatTen(second);
// return year + "-" + formatTen(month) + "-" + formatTen(day);
// }
//好像之前axious里面加上这个 withCredentials:true 貌似可以处理跨域的哎，这个可以加吗？
5，父组件触发后代组件的使用方法
父组件:
// provide() {
// return {
// load: this.load,
// };
// },
后代组件：
inject: ["load"],
this.laod();
6，vuex的使用
6.1学习目标
能够说出Vuex的基本使用步骤；能够说出Vuex的核心概念；能够基于Vuex实现业务功能
6.2学习内容
Vuex概述；Vuex的基本使用；Vuex的核心概念；基于Vuex的案例
6.3Vuex概述
6.3.1组件之间共享数据的方式
父向子传值：v-bind属性绑定；
子向父传值：v-on事件绑定；
兄弟组件之间共享数据：EventBus。1，$on 接收数据的那个组件；2，$emit发送数据的那个组件
6.3.2 Vuex是什么
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。有三个功能，即：1，状态管理（非父子通信）；2，数据快照；3，方便管理和调试，方便进行时光旅行调试
如下图：
6.3.3使用Vuex统一管理状态的好处
1，能够在vuex中集中管理共享的数据，易于开发和后期维护；
2，能够高效的实现组件之间的数据共享，提高开发效率；
3，存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。
1，什么样的数据适合存储在Vuex中
一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。
6.4，Vuex的使用流程图
6.5，Vuex的mutations和actions的基本使用
1，安装vuex依赖包：npm install vuex --save
2，在src目录下新建一个store文件夹，并新建一个index.js文件，内容如下
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
//在需要取该数据的组件中使用 this.$store.state.isTabbarShow 这样获取
//自定义的共享状态
isTabbarShow:true,
comingList:[]
},
mutations:{
//唯一修改状态的位置，在需要使用的组件中使用 this.$store.commit('HideMaizuoTabbar',false)这样调用
HideMaizuoTabbar(state,data){
state.isTabbarShow=data;
},
ShowMaizuoTabbar(state,data){
state.isTabbarShow=data;
},
comingListMutation(state,data){
state.comingList=data;
}
},
actions:{
//进行相关的异步处理
getComingListAction(store){
axios({
url:"https://m.maizuo.com/gateway?type=2&cityId=110100&k=5553387",
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16347115603213314142240769"}'
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{
//console.log(res.data);
store.commit('comingListMutation',res.data.data.films)
})
}
}
})
3，在main.js中注册store
import Vue from 'vue'
import store from '@/store/index';
new Vue({
el: '#app',
router,
store,
render: (h) => h(App),
});
4，需要调用store中的action里的getComingListAction方法的组件内容如下：
实现防止数据频繁请求思路：1，判断store中有没有数据，没有的话，ajax请求，（action–>mutation–>state)；2，有数据，直接就从store中取数据渲染页面
<template>
<div>
<ul>
<li v-for="item in $store.state.comingList">{
{
item.name}}</li>
</ul>
</div>
</template>
<script>
export default{
mounted(){
if(this.$store.state.comingList.length===0){
//实现防止数据频繁请求
this.$store.dispatch("getComingListAction")
}else{
console.log("使用缓存数据")
}
}
}
</script>
6.5.1，mutation常量的使用
1，在src目录下新建一个type文件夹，并新建一个index.js文件，内容如下
export const HIDE_TABBAR_MUTATION="hide"
export const SHOW_TABBAR_MUTATION="show"
2，在src目录下新建一个store文件夹，并新建一个index.js文件，内容如下
import Vue from 'vue'
import Vuex from 'vuex'
import {
HIDE_TABBAR_MUTATION,SHOW_TABBAR_MUTATION}from "@/type"
Vue.use(Vuex)
export default new Vuex.Store({
state:{
//在需要取该数据的组件中使用 this.$store.state.isTabbarShow 这样获取
//自定义的共享状态
isTabbarShow:true,
comingList:[]
},
mutations:{
[HIDE_TABBAR_MUTATION](state,data){
state.isTabbarShow=data
},
/*
以上这种写法[HIDE_TABBAR_MUTATION]类似与：var name="key";var obj={[name]:"aaaa"};console.log(obj);方括号里面的就成了变量
*/
[SHOW_TABBAR_MUTATION](state,data){
state.isTabbarShow=data
},
},
//actions:{//进行相关的异步处理}
})
2，在需要调用store中mutations里面的方法的组件内容如下
<script>
import {
HIDE_TABBAR_MUTATION,SHOW_TABBAR_MUTATION}from "@/type"
export default{
beforeMount(){
this.$store.commit(SHOW_TABBAR_MUTATION,true);
},
beforeDestroy(){
this.$store.commit(HIDE_TABBAR_MUTATION,false);
}
}
</script>
6.6，Vuex的mapState和getters的基本使用
**state：**单一状态树，每个应用将仅仅包含一个store实例。this.$store.state.状态名字；…mapState([“title”])
**getters:**可以从store中的state中派生出一些状态，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。可以认为是store的计算属性；this.$store.getters的计算属性名字；…mapGetters([“getFilms”])
1，mapState使用
1，在src目录下新建一个store文件夹，并新建一个index.js文件，内容如下
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
//在需要取该数据的组件中使用 this.$store.state.isTabbarShow 这样获取
//自定义的共享状态
isTabbarShow:true,
comingList:[]
},
// mutations:{},
//actions:{//进行相关的异步处理}
})
2，在需要调用store中的mapState方法的组件内容如下
<tempalte>
<div>
<p v-show="isTabbarShow">123
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
