18前端项目----Vue项目收尾优化|重要知识

收尾/知识点汇总

项目收尾
- 二级路由
- 未登录全局路由守卫
- 路由独享守卫
- 图片懒加载
- 路由懒加载
- 打包上线
重要知识点汇总
- 组件通信方式
- - 1. props
  - 2. 自定义事件
  - 3. 全局事件总线
  - 4. 订阅与发布pubsub
  - 5. Vuex
  - 6. 插槽
- sync修饰符
- attrs和listeners属性
- children和parent属性
- mixin混入
- 作用域插槽
- - 在vue3中

项目收尾

二级路由

个人中心采用二级路由

{
path: '/center',
component: Center,
//重定向
redirect:'/center/myorder',
// 添加元信息meta
meta: { show: true },
//二级路由组件
	children: [
		{
        	//要么全写'/center/myorder'，要么全不写'myorder'
        	path: '/center/myorder',
            component:MyOrder,
        },
        {
        	path: 'mygroup',
            component:MyGroup,
        },
       ]
},

未登录全局路由守卫

else{
	next();
}

未登录：不能去交易相关(trade)、支付相关(pay/paysuccess)、不能去个人中心(center/……)

 let toPath = to.path;//字符串类型
if (toPath.indexOf('/trade') != -1 || toPath.indexOf('/pay') != -1 || toPath.indexOf('/center')) {
	next('/login');
}

但是情况：如果用户未登录，然后点击个人中心，然后跳转到登录，登录完应该回到最初点击的个人中心页面，而不是每次都是home主页

那么就需要先存储点击的路径，然后再登录完回到该路径

修改为：next('/login?redirect='+toPath)
toPath为/center/myorder
跳到登录，此时路由为/login?redirect=%2Fcenter%2Fmyorder
这是进行编码后的,实际上编译过来=/center/myorder
可见进入登录页添加了query参数
那么在点击登录时需要判断一下是否有query参数，有则进行该路由跳转，没有才都是回到home首页

//Login组件内userLogin修改

//存储需要跳转的路径(query参数中),没有则是/home
let toPath = this.$route.query.redirect||'/home';
this.$router.push(toPath);

路由独享守卫

交易页必须是从购物车页点击结算才能跳转到，而不是可以直接在地址栏输入就可以进入.( 支付页也同理,必须是从交易页pay而来)

{
	path: '/trade',
    component: Trade,
    // 添加元信息meta
    meta: { show: true }, 
    //独享守卫：只管跳到trade路由的守卫
    beforeEnter: (to, from, next) => {
    	if (from.path == '/shopcart') {
        	next();
        } else {
        	//从其他路由而来的,停留在当前
        	next(false);
        }
   	}
},

next(false);中断当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器后退按钮)，那么URL地址会重置到from路由对应的地址

问题:
当前页是shopcart，然后再手动输入trade仍然可以跳转，但是不对，应该只有点击<router-link class="sum-btn" to="/trade">结算</router-link>才能进入

解决:
在shopcart路由信息meta中加一个flag，初始值为false。当点击去结算按钮触发事件，flag置为true。然后在trade的独享路由守卫中判断一下flag是否为true，当flag为true时，则是通过点击去结算按钮跳转的，然后放行。

 {
 path: '/trade',
component: Trade,
// 添加元信息meta
meta: { show: true ,falg:false}, 
//独享守卫：只管跳到trade路由的守卫
beforeEnter: (to, from, next) => {
	if (from.path == '/shopcart' && from.mate.falg == true) {
	//跳转后需要将原来flag置为false
	from.meta.flag = false;
	next();
	} else {
		next(false);
		}
	}
},

路由跳转写成编程式路由跳转

 methods: {
    toTrade() {
      this.$route.meta.flag = true;
      this.$router.push('/trade');
    }
  }

图片懒加载

当服务器数据没有返回时，页面上显示默认图。

主要目的是延迟加载图片，直到用户滚动到图片所在的位置时才加载。

查看vue-lazyload官方文档
main.js

//引入vue-lazyload插件
import VueLazyload from 'vue-lazyload';
import Karry from '@/assets/Karry.gif';
//use()实质上触发install安装插件的方法
Vue.use(VueLazyload, {
  //可添加配置
  //1. 懒加载默认图：(图片和json文件是默认对外暴露的
  loading: Karry,
});

组件中<img v-lazy="image.src" />

路由懒加载

当打包构建应用时，js包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

原先是在router中配置路由信息前import组件，现在是在配置路由信息component时import。—路由懒加载

 {
	path:"/home",
	component:()=>import ('@/pages/Home'),
	meta:{show:true}
},

只有当用户访问该路径时才执行箭头函数，引入组件。使得路由跳转更高效

打包上线

打包：npm run build
在这里插入图片描述
打包后(js文件夹)，代码都是经过压缩加密的,如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样,准确输出是哪一行有错

map文件也可以去除
在vue.config.js配置productionSourceMap: false即可。

重要知识点汇总

组件通信方式

1. props

①(非函数) 父传子:
- 在父组件中如:<Floor v-for="floor in floorList" :key="floor.id" :list="floor" />在子组件上绑定属性list，传递floor数据，子组件props:['list']接收
- props接受数据方式：数组[]或对象{list:Array}、{list:Array,default:[]}
② (函数)子传父

// 子组件
<template>
<!--3.value双向数据绑定,渲染接收过来的数据-->
<!--4.绑定原生事件input事件触发updateValue回调-->
  <input :value="value" @input="updateValue">
</template>

<script>
export default {
//2.子组件通过props接收数据
  props: ['value'],
  methods: {
    updateValue(event) {
    //5.输入数据:调用触发父组件的自定义input事件并传值给父组件
      this.$emit('input', event.target.value);
    }
  }
}
</script>

// 父组件
<template>
  <div>
  	<!--
  	1. 父组件的 message 初始为空字符串
  	通过 v-model 将message作为value传递给子组件
	子组件输入框显示空值
	-->
    <child-component v-model="message"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  }
}
</script>

📌 v-model常规写法（手动绑定 value 和 input）
<input	:value="message" 
@input="message = $event.target.value"
/>
✅ v-model 简写（推荐）

javascript <input v-model="message" />

完全等价于上面的写法！ Vue 内部会自动将其编译成 :value + @input 的形式。

实现：父组件 →（通过 props）→ 子组件 →（通过 $emit）→ 父组件 → 循环更新。

注意:在组件身上@绑定事件会被当做自定义事件,而不是原生DOM事件。如果想把自定义事件变为原生DOM事件加上修饰符.native
(那么该组件任何位置都会触发click[假设绑定的是@click],原理其实是利用事件委派给该组件根标签绑定了该原生DOM事件)

总结:原生DOM节点(如<input>、<button>)—原生事件,自定义组件—自定义事件

2. 自定义事件

$on和$emit:绑定事件、触发事件
上面例子用到$emit，但是没有用到$on,因为@input底层就是

this.$on('input', (value) => {
  this.message = value
})) // Vue 内部自动完成

3. 全局事件总线

main.js中:Vue.prototype.$bus = this
📌 为什么将this根实例挂载到$bus身上?
将根实例赋值给 Vue.prototype.$bus，使其成为全局可访问的事件总线。而且根实例的原型链上有$on和$emit属性，使其可访问到。

4. 订阅与发布pubsub

在react中运用较多

5. Vuex

6. 插槽

可以实现父子组件通信,一般是结构

sync修饰符

父组件给子组件传值，而且给子组件绑定一个自定义事件(update:money)

<Child :money="money" @update:money="money = $event">

等价于

<Child :money.sync="money">

子组件props:[‘money’]接受,
第一种触发写法$emit('upate:money',money-100)
第二种$emit('update',money-100)

attrs和listeners属性

$attrs:
属于组件的一个属性,可以获取到父组件传递过来的props数据

注意:如果是通过props接受的数据,那么在$atters中是获取不到的

应用：封装elementUI
父组件：

//引入的子组件
//传入静态属性:直接作为字符串写入DOM
<HintButton type="success" icon="el-icon-delete" size="mini" title="提示按钮"></HintButton>

子组件：

<template>
	<div>
		<!--a标签的额外属性title,可以鼠标悬停时,浏览器会自动显示 title 的内容作为提示文本-->
		<a :title="title">
			<!--那么el-button会显示响应type属性的样式-->
			<el-button :type="$attrs.type"></el-button>
		</a>
	</div>
</template>
<script>
	export default{
		name:"",
		props:["title"],
		mounted(){
			console.log(this.$attrs);
			//{type:'success',icon:'el-icon-delete',size:'mini'}
		}
	}
</script>

如果有大量属性
可以<el-button v-bind="$attrs"></el-button>将所有接受的数据作为el-button的属性。注意必须写v-bind全称，不能写冒号

$listener:
在父组件中给HintButton绑定自定义事件，子组件内可以通过$listener获取到该自定义事件

//触发自定义事件
<el-button v-on="$listener"></el-button>

同样v-on不能简写为@

children和parent属性

$children

在父组件:

<!--ref:可以获取节点(组件标签)-->
<Son ref = "son"/>
<Girl ref="girl"/>

this.$refs.son就是子组件实例：
在这里插入图片描述

那么就可以通过ref获取到子组件里的数据

$children是组件的一个属性，可以获取当前组件的所有的子组件(Son和Girl)
打印:this.$children===>[VueComponent,VueComponent]
注意：该数组是无序的，this.$children[0]不一定是son

$parent
在某个子组件内可以通过$parent获取到该组件的父组件，那么就可以获取到父组件的数据/方法

mixin混入

逻辑复用：mixin，可以将多个组件共用的逻辑、数据、方法等提取到一个单独的对象中，然后在多个组件中混入使用

可以将mixin单独出一个模块然后对外暴露，在组件中直接import使用

// 定义一个 mixin
const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
};

// 在组件中使用 mixin
export default {
  mixins: [myMixin],
  created() {
    this.greet(); // 输出: Hello from mixin!
  }
};

作用域插槽

elementUI主要就是作用域插槽

父组件:

<!--父组件向List子组件传递 todos 数组-->
<List :todos="todos">
	<template slot-scope = "todo">
		<span :style="color:todo.todo.isComplete?'green':'red'}">{{todo.todo.text}}</span>
	</template>
</List>

<!---->
<script>
export default{
	data(){
		return {
			todos:[
				{id: 1, text: 'AA', isComplete:false},
				{id: 2, text: 'BB', isComplete:true},
				{id: 3, text: 'CC', isComplete:false},
			]
		}
	}
}
	
</script>

子组件:

<ul>
	<li v-for="(item,index) in todos" :key="index">
		<!--每个 item 通过 slot 回传给父组件 -->
		<slot :todo="item"></slot>
	</li>
</ul>

<!--script中:List组件接收todos-->
props:['todos']

核心概念:

子组件通过 <slot> 暴露数据给父组件（ :todo=“item”）
父组件通过 slot-scope = “todo” 接收子组件暴露的数据命名为todo

关键点:
（1）slot-scope 的命名
父组件中 slot-scope="todo" 的 todo 是临时变量名，可以任意命名（如 scope、data）
实际接收的是子组件 <slot :todo="item"> 中 :todo 绑定的数据
（2）数据结构
子组件传递给slot-scope变量todo的数据结构：

{ todo: { id: 1, text: 'AA', isComplete: false } }

因此父组件中访问的是 todo.todo.text（第一个 todo 是 slot-scope 变量，第二个 todo 是子组件绑定的属性名[:todo=“item”])

总结:子组件的数据来源于父组件，子组件向父组件传递一个对象，父组件自定义子组件内部的部分渲染逻辑

在vue3中

在 Vue 3 中，slot-scope 被废弃，改用 v-slot：

<List :todos="todos">
  <template v-slot="todo">
    <span :style="{color: todo.todo.isComplete ? 'green' : 'red'}">
      {{ todo.todo.text }}
    </span>
  </template>
</List>

或解构写法：

<template v-slot="{ todo }">  <!-- 解构 -->
  <span :style="{color: todo.isComplete ? 'green' : 'red'}">
    {{ todo.text }}
  </span>
</template>