Vue2+3笔记分享

---

一、vue基础

（1）Vue特点

1. vue是一套用于构建用户界面的渐进式JavaScript.

2. vue采用组件化模式，提高代码复用率、且让代码更好维护.

3. vue为声明式编码，让编码人员无需直接操作DOM，提高开发效率.

4. vue使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点.

（2）初识Vue

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象.
2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法.
3. root容器里的代码被称为Vue模板.
4. Vue实例和容器是一一对应的.
5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用.
6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性.
7. 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新.
8. hello world案例

<!--准备好一个容器-->
<div id="root">
    <h1>Hello,{{name}}</h1>
</div>

//创建Vue实例
new Vue({
	el:'#root'	//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
	data:{		//data中用于存储数据，数据供el所指定的容器去使用
		name:'world'
	}
})

（3）Vue模板语法

插值语法

1. 功能：用于解析标签体内容.
2. 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性.

指令语法

1. 功能：用于解析标签.
2. 写法：Vue中有很多的指令，且形式都是：v-???.

（4）数据绑定

1. 单向绑定(v-bind)：数据只能从data流向页面.

（v-bind:href="xxx"可以简写为==:href=“xxx”==）

2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data.

（双向绑定一般都应用在表单类元素上）

（v-model:value可以简写为v-model，因为v-model默认收集的就是value值）

3. v-model的三个修饰符

​ [1]lazy：失去焦点再收集数据.

​ [2]number：输入字符串转为有效的数字.

​ [3]trim：输入首尾空格过滤.

（5）el与data的两种写法

1. el写法

​ [1]new Vue时配置el属性.

​ [2]先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值.

2. data写法：[1]对象式 [2]函数式

（6）MVVM模型

1. M(Model)：对应data中的数据.
2. V(View)：模板.
3. VM(ViewModel)：Vue实例对象.

（7）Object.defineproperty**(**obj, prop, desc)方法

1. 作用：直接在一个对象上定义一个新属性，或者修改一个已经存在的属性.
2. 参数配置：

​ [1]obj：第一个参数就是要在哪个对象身上添加或者修改属性.

​ [2]prop：第二个参数就是添加或修改的属性名.

​ [3]desc：配置项，一般是一个对象.

3. 第三个参数中的配置属性

属性	说明
writable	是否可重写
value	当前值
get	读取内部调用的函数
set	写入时内部调用的函数
enumerable	是否可以遍历
configurable	是否可再次修改配置项

let person = {
	name:"码农",
	age: 18
}
Object.defineProperty(person,'sex',{
	value:"男",       //设置属性值
    enumerable:true, //控制属性是否可以枚举，默认值是false
    writable:true, //控制属性是否可以被修改，默认值是false
    configurable:true //控制属性是否可以被删除，默认值是false
})
console.log(person)

（8）数据代理

1. 数据代理：通过一个对象代理对另一个对象中属性的操作.
2. Vue中的数据代理：通过vm对象来代理data对象中属性的操作.
3. Vue中数据代理的好处：更加方便的操作data中的数据.
4. 基本原理：通过Object.defineProperty( )把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在getter/setter内部去操作data中对应的属性.

（9）事件处理

1. 使用v-on:xxx或==@xxx==绑定事件，其中xxx是事件名.

2. 事件的回调需要配置在methods对象中，最终会在vm上.

3. methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象.

（10）事件修饰符

1. prevent：阻止默认事件.
2. stop：阻止事件冒泡.
3. once：事件只触发一次.
4. capture：使用事件的捕获模式.
5. self：只有event.target是当前操作的元素时才触发事件.
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕.

（11）键盘事件

1. Vue常用的按键别名

​ [1]回车：enter [2]删除：delete [3]退出：esc [4]空格：space [5]换行：tab

​ [6]上：up [7]下：down [8]左：left [9]右：right

2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意要转为kebab-case.
3. 系统修饰键：ctrl、alt、shift、meta

​ [1]配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发.

​ [2]配合keydown使用：正常触发事件.

4. 可以使用keyCode去指定具体的按键.
5. Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名.

（12）计算(computed)属性

1. 定义：要用的属性不存在，要通过已有属性计算得来.
2. 原理：底层借助了Object.defineproperty方法提供的getter和setter.
3. get函数执行

​ [1]初次读取时会执行一次.

​ [2]当依赖的数据发生改变时会被再次调用.

4. 优势：与methods实现相比，内部有缓存机制，效率更高，调试方便.
5. 计算属性最终会出现在vm上，直接读取使用即可.
6. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化.

（13）监视属性watch

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作.
2. 监视的属性必须存在，才能进行监视.
3. 监视的两种写法

​ [1]new Vue时传入watch配置.

​ [2]通过vm.$watch监视.

4. 天气案例

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

new Vue({
	el:'#root',
	data:{
		isHot:true
	},
	computed:{
        info(){
            return this.isHot?'炎热':'凉爽'
        }
    },
    methods:{
    	changeWeather(){
            this.isHot=!this.isHot
        }
	},
    watch:{
        isHot:{
            immediate:true,	//初始化时让handler调用
            handler(newValue,oldValue){
                console.log('isHot被修改了')
            }
        }
    }
})

5. 深度监视

​ [1]Vue中的watch默认不监测对象内部值的改变(一层).

​ [2]配置deep:true可以监测对象内部值改变(多层).

6. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以.
7. 使用watch时根据数据的具体结构，决定是否采用深度监视.

（14）条件渲染

v-if

1. 写法

​ [1]v-if=“表达式” [2]v-else-if=“表达式” [3]v-else=“表达式”

2. 不展示的DOM元素直接被移除.

v-show

1. 写法：v-show=“表达式”
2. 不展示的DOM未被移除，仅仅是使用样式隐藏.

（15）列表渲染

v-for

1. 用于展示列表数据.
2. 语法：v-for=“(item,index) in xxx” :key=“yyy”.
3. 可遍历：数组、对象、字符串、指定次数.

key内部原理

1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较.
2. 对比规则

​ [1]旧虚拟DOM中找到了与新虚拟DOM相同的key：

​ ①若虚拟DOM中内容没变，直接使用之前的真实DOM.

​ ②若虚拟DOM中内容改变，则生成新的真实DOM，随后替换掉页面中之前的真实DOM.

​ [2]旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到页面.

3. 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值.
4. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于显示，可使用index作为key.

<div>
	<ul>
    	<li v-for="(p,index) in persons" :key="index">
            {{p.name}}-{{p.age}}
        </li>
	</ul>
</div>

new Vue({
    el:'#root',
    data:{
        persons:[
            {id:'001',name:'张三',age:18},
            {id:'002',name:'李四',age:19},
            {id:'003',name:'王五',age:20}
        ]
    }
})

（16）Vue监视数据原理

1. vue会监视data中所有层次的数据.
2. 监测对象中的数据通过setter实现监视，且要在new Vue时就传入要监测的数据

​ [1]对象中后追加的属性，Vue默认不做响应式处理.

​ [2]如需给后添加的属性做响应式，可使用如下API：

​ ①Vue.set(target,propertyName/index,value)

​ ②vm.$set(target,propertyName/index,value)

3. 通过包裹数组更新元素的方法实现

​ [1]调用原生对应的方法对数组进行更新.

​ [2]重新解析模板，进而更新页面.

4. 在Vue修改数组中的某个元素一定要用如下方法

​ [1]使用这些API：push( )、pop( )、shift( )、unshift( )、splice( )、sort( )、reverse( ).

​ [2]Vue.set( )或vm.$set( ).

（17）过滤器

1. 定义：对要显示的数据进行特定格式化后再显示.
2. 语法

​ [1]注册过滤器：Vue.filter(name,callback)或new Vue{filters:{ }}

​ [2]使用过滤器：{{xxx|过滤器名}}或v-bind:属性=“xxx|过滤器名”

3. 过滤器也可以接收额外参数，多个过滤器也可以串联.
4. 过滤器并没有改变原本的数据，是产生新的对应的数据.

（18）指令

v-text

1. 作用：向其所在的节点中渲染文本内容.
2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会.

V-html

1. 作用：向指定节点中渲染包含html结构的内容.
2. 与插值语法的区别

​ [1]v-html会替换掉节点中所有的内容，{{xx}}则不会.

​ [2]v-html可以识别html结构.

v-cloak

1. 其本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性.
2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题.

v-once

1. v-once所在节点在初次动态渲染后，就视为静态内容.
2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能.

v-pre

1. 跳过其所在节点的编译过程.
2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译.

自定义指令

1. 定义语法

//局部指令
new Vue({
    directives:{指令名:配置对象}	//或directives:{指令名:回调函数}
})
//全局指令
Vue.directive(指令名,配置对象)	   //或Vue.directive(指令名,回调函数)

2. 配置对象

​ [1]bind：指令与元素成功绑定时调用.

​ [2]inserted：指令所在元素被插入页面时调用.

​ [3]update：指令所在模板结构被重新解析时调用.

3. 代码案例

<div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
    </div>

const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          // 操作DOM元素，将放大后的数值放入DOM元素中
          // bingding.value 获取当前指令绑定的表达式的值
          // element.innerText 将放大后的数值放入DOM元素中
          element.innerText = bingding.value * 10
        },
      },
    })

4. 指令名多个单词之间使用短线符连接之后，在自定义指令的声明定义时，需要使用引号进行包裹.
5. 自定义指令中的this都指向window，不指向vue实例对象.

（19）生命周期

解释说明

1. 可以理解vue生命周期就是指vue实例从创建到销毁的过程，在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后.

2. 创建(实例)

​ [1]beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点(没有 data，没有el).

​ [2]created：实例已经创建，仍然不能获取DOM节点(有data，没有el).

3. 载入(数据)

​ [1]beforeMount：是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建(有 data，有el).

​ [2]mounted：数据和DOM都已经被渲染出来.

4. 更新

​ [1]beforeUpdate：检测到数据更新时，但在DOM更新前执行.

​ [2]updated：更新结束后执行.

5. 销毁

​ [1]beforeDestroy：当要销毁vue实例时，在销毁前执行.

​ [2]destroyed：销毁vue实例时执行.

适用场景

1. beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建；在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化；不能在这个阶段使用data中的数据和methods中的方法.

2. create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作.

3. beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的.

4. mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了；此时组件脱离了创建阶段，进入到了运行阶段；如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行.

5. beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步.

6. updated：页面显示的数据和data中的数据已经保持同步了，都是最新的.

7. beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态，还没有真正被销毁.

8. destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态，组件已经被销毁了.

二、Vue组件化编程

（1）模块与组件、模块化与组件化

1. 模块：向外提供特定功能的js程序.
2. 组件：用来实现局部(特定)功能效果的代码集合.
3. 模块化：当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用.
4. 组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用.

（2）使用组件

1. 定义组件

​ [1]使用==Vue.extend(options)==创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别，区别如下：

​ ①el不要写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器.

​ ②data必须写成函数：避免组件被复用时，数据存在引用关系.

​ [2]使用template可以配置组件结构.

2. 注册组件

​ [1]局部注册：靠new Vue的时候传入components选项.

​ [2]全局注册：靠Vue.component(‘组件名’,组件).

3. 编写组件标签

4. 代码案例

<div id="root">
    <!--第三步：编写组件标签-->
    <school></school>
</div>

//第一步：创建school组件
const school=Vue.extend({
    template:`
    	<div>
    		<h2>学校名称：{{schoolName}}</h2>
    		<h2>学校地址：{{address}}</h2>
    	</div>
    `,
    data(){
        return{
            schoolName:'hdxg',
            address:'hz'
        }
    }
})

new Vue({
    el:'#root',
    //第二步：注册组件(局部注册)
    components:{
        school
    }
})

（3）VueComponent

1. 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的.
2. 我们只需要写组件标签，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行new VueComponent(options).
3. 每次调用Vue.extend，返回的都是一个全新的VueComponent.

（4）单文件组件格式

<!--School.vue-->
<template>
	<div class="demo">
    	<h2>学校名称：{{schoolName}}</h2>
    	<h2>学校地址：{{address}}</h2>
        <button @click="showName">"点我提示学校名"</button>
    </div>
</template>
<script>
    export default{
    	name:'School'
    	data(){
       		return{
            	schoolName:'hdxg',
            	address:'hz'
       		}
    	},
    	methods:{
        	showName(){
                alert(this.schoolName)
            }
    	}
    }
</script>
<style>
    .demo{
        background-color:orange;
    }
</style>

import School from './School.vue'

new Vue({
    el:'#root',
    template:`<School></School>`,
    components:{School}
})

三、vue-cli

（1）脚手架文件结构

1. –node_modules
2. –public

​ -----[1]favicon.ico：页签图标

​ -----[2]index.html：主页面

3. –src

​ -----[1]assets：存放静态资源

​ -----①logo.png

​ -----[2]component：存放组件

​ ------①HelloWord.vue

​ -----[3]App.vue：汇总所有组件

​ -----[4]main.js：入口文件

4. –.gitignore：git版本管制忽略的配置
5. –babel.config.js：babel的配置文件
6. –package.json：应用包配置文件
7. –README.md：应用描述文件
8. –package-lock.json：包版本控制文件

（2）ref属性

1. 被用来给元素或子组件注册引用信息(id的替代者).
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc).
3. 使用方式

​ [1]打标识：<h1 ref="xxx">·····</h1>或<School ref="xxx"></Schooll>

​ [2]获取：this.$refs.xxx

（3）配置项props

1. 功能：让组件接收外部传过来的数据.
2. 传递数据

<Demo name="xxx"></Demo>

3. 接收数据

//第一种方式(只接收)
props:['name']
//第二种方式(限制类型)
props:{
    name:String
}
//第三种方式(限制类型、限制必要性、指定默认值)
props:{
    name:{
        type:String,	//类型
        required:true,	//必要性
        default:'zrl'   //默认值
    }
}

4. props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告.

（4）mixin(混入)

1. 功能：可以把多个组件共用的配置提取成一个混入对象.
2. 定义混合

{
    data(){···},
    methods:{···}
    ···
}

3. 使用混入

//全局混入
Vue.mixin(xxx)
//局部混入
mixins:['']

（5）插件

1. 功能：用于增强Vue.
2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据.
3. 定义插件

对象.install=function(Vue,options){
    //1.添加全局过滤器
    Vue.filter(···)
    
    //2.添加全局指令
    Vue.directive(···)
    
    //3.配置全局混入
    Vue.mixin(···)
    
    //4.添加实例方法
    Vue.prototype.$myMethod=function(){···}
    Vue.prototype.$myProperty=xxxx
}

4. 使用插件：Vue.use( )

（6）scoped样式

1. 作用：让样式在局部生效，防止冲突.
2. 写法：<stylr scroped>

（7）组件的自定义事件

1. 一种组件间通信的方式，适用于：==子组件 =====>父组件.
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中).
3. 绑定自定义事件：

​ [1]第一种方式，在父组件中：<Demo @atguigu="test"/>或<Demo v-on:auguigu="test">.

​ [2]第二种方式，在父组件中：

<Demo ref="demo"/>
······
mounted(){
	this.$ref.xxx.$on('atguigu',this.test)
}

​ [3]若想让自定义事件只能触发一次，可以使用once修饰符，或==$once==方法.

4. 触发自定义事件：this.$emit('atguigu',数据).
5. 解绑自定义事件：this.$off('atguigu').
6. 组件上也可以绑定原生DOM事件，需要使用native修饰符.
7. 通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题.

（8）全局事件总线

1. 一种组件间通信的方式，适用于任意组件间通信.
2. 安装全局事件总线：

new Vue({
	······
	beforeCreate(){
		Vue.prototype.$bus=this	// 安装全局事件总线，$bus就是当前应用的vm
	},
	······
})

3. 使用事件总线

​ [1]接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身.

method(){
    demo(data){······}
}
······
mounted(){
    this.$bus.$on('xxx',this.demo)
}

​ [2]提供数据：this.$bus.$emit('xxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件.

（9）消息订阅与发布

1. 一种组件间通信的方式，适用于任意组件间通信.
2. 使用步骤：

​ [1]安装pubsub：npm i pubsub-js.

​ [2]引入：import pubsub from 'pubsub-js'.

​ [3]接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身.

methods(){
    demo(data){······}
}
······
mounted(){
    this.pid=pubsub.subscribe('xxx',this.data)	// 订阅消息
}

​ [4]提供数据：pubsub.publish('xxx',数据).

​ [5]最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅.

（10）Vue.$nextTick()

1. 在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM.

（11）过度与动画

1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名.
2. 图示：

3. 样式

​ [1]元素进入的样式：

​ ①v-enter：进入的起点.

​ ②v-enter-active：进入过程中.

​ ③v-enter-to：进入的终点.

​ [2]元素离开的样式：

​ ①v-leave：离开的起点.

​ ②v-leave-active：离开过程中.

​ ③v-leave-to：离开的终点.

4. 使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello">
    <h1 v-show="isShow">你好啊</h1>
</transition>

5. 若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值.

（12）配置代理

1. 方法一

devServer:{
    proxy:"http://localhost:5000"
}
//1.优点：配置简单，请求资源时直接发给前端即可.
//2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理.
//3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）.

2. 方法二

module.exports={
    devServer:{
        proxy:{
            '/api1':{	// 匹配所有以'api1'开头的请求路径 
                target:'http://localhost:5000',	// 代理目标的基础路径
                changeOrigin:true,
                pathRewrite:{'^/api1':''}
            },
            ······
        }
    }
}
//1.changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000.（默认为true）
//2.优点：可以配置多个代理，且可以灵活的控制请求是否走代理.
//3.缺点：配置略微繁琐，请求资源时必须加前缀.

（13）插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件=========>子组件==.
2. 分类：默认插槽、具名插槽、作用域插槽.
3. 使用方式：

<!--默认插槽-->
父组件中：
	<Category>
        <div>html结构1</div>
	</Category>
子组件中：
	<template>
		<div>
        	<!--定义插槽-->
            <slot>插槽默认内容</slot>
        </div>
	</template>

<!--具名插槽-->
父组件中：
	<Category>
        <template solt="center">
			 <div>html结构1</div>
        </template>
        
        <template v-slot:footer>
			 <div>html结构2</div>
        </template>
	</Category>
子组件中：
	<template>
		<div>
        	<!--定义插槽-->
            <slot name="center">插槽默认内容</slot>
            <slot name="footer">插槽默认内容</slot>
        </div>
	</template>

<!--作用域插槽-->
<!--数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定-->
父组件中：
	<Category>
        <template scope="scopeData">
			<!--生成的是ul列表-->
			<ul>
                <li v-for="g in scopeData.games" :key="g">{{g}}</li>
            </ul>
        </template>
	</Category>

	<Category>
        <template scope="scopeData">
			<!--生成的是h4标题-->
            <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
        </template>
	</Category>
子组件中：
	<template>
		<div>
            <slot :games="games">插槽默认内容</slot>
        </div>
	</template>

	<script>
		export default{
            name:'Category',
            props:['title'],
            //数组在子组件自身
            data(){
                return{
                    games:['王者荣耀','蛋仔派对','哈利波特']
                }
            }
        }
	</script>

四、vuex

（1）理解xuex

1. 概念：专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信.
2. 使用Vuex时机

​ [1]多个组件依赖于同一状态.

​ [2]来自不同组件的行为需要变更同一状态.

3. 工作原理

（2）搭建vuex环境

1. 创建文件：src/store/index.js.

// 引入Vue核心库
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions对象-响应组件中用户的动作
const actions={}
// 准备mutations对象-修改state中的数据
const mutations={}
// 准备state对象-保存具体的数据
const state={}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2. 在main.js中创建vm时传入store配置项.

······
// 引入store
import store from `./store`
······

// 创建vm
new Vue({
    el:'#app',
    render:h => h(App),
    store
})

（3）基本使用

1. 初始化数据、配置actions、配置mutations，操作文件store.js .

// 引入Vue核心库
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

const actions={
    // 响应组件中加的动作
    jia(context,value){
        context.commit('JIA',value)
    },
}

const mutations={
    // 执行加
    JIA(state,value){
        state.sum+=value
    }
}
// 初始化数据
const state={
    sum:0
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2. 组件中读取vuex中的数据：$store.state.sum.
3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或$store.dispatch('mutations中的方法名',数据).
4. 若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit.

（4）getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工.
2. 在store.js中追加getters配置

······
const getters={
	bigSum(state){
		return state.sum*10
	}
}

// 创建并暴露store
export default new Vuex.Store({
    ······
    getters
})

3. 组件中读取数据：$store.getters.bigSum.

（5）四个map方法的使用

1. mapState方法：用于帮助我们映射state中的数据为计算属性.

computed:{
    // 借助mapState生成计算属性：sum、school、subject（对象写法）
    ···mapState({sum:'sum',school:'school',subject:'subject'}),
    
    // 借助mapState生成计算属性：sum、school、subject（数组写法）
    ···mapState(['sum','school','subject'])，
}

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性.

computed:{
    // 借助mapGetters生成计算属性：bigSum（对象写法）
    ···mapGetters({bigSum:'bigSum'}),
    
    // 借助mapGetters生成计算属性：bigSum（数组写法）
    ···mapGetters(['bigsum']),
}

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数.

methods:{
    // 靠mapActions生成：incrementOdd、incrementWait（对象写法）
    ···mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    
    // 靠mapAction生成：incrementOdd、incrementWait（数组写法）
    ···mapActions(['jiaOdd','jiaWait']),
}

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数.

methods:{
    // 靠mapMutations生成：increment、decrement（对象写法）
    ···mapActions({increment:'JIA',decrement:'JIAN'}),
    
    // 靠mapMutations生成：JIA、JIAN（数组写法）
    ···mapActions(['JIA','JIAN']),
}

（6）模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确.
2. 修改store.js

const countAbout={
    namespaced:true,	// 开启命名空间
    state:{x:1},
    mutations:{···},
    actions:{···},
    getters:{
        bigSum(state){
            return state.sum=10
        }
    }
}

const personAbout={
    namespaced:true,	// 开启命名空间
    state:{···},
    mutations:{···},
    actions:{···},
}

const store=new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})

3. 开启命名空间后，组件中读取state数据

 // 方式一：自己直接读取
this.$store.state.personAbout.list
 // 方式二：借助mapState读取
···mapState('countAbout',['sum','school','subject'])

4. 开启命名空间后，组件中读取getters数据

 // 方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
 // 方式二：借助mapGetters读取
···mapGetters('countAbout',['bigSum'])

5. 开启命名空间后，组件中调用dispatch

 // 方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
 // 方式二：借助mapActions
···mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6. 开启命名空间后，组件中调用commit

 // 方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
 // 方式二：借助mapMutations
···mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})

五、vue-router

（1）理解概念

1. vue-router：vue的一个插件库，专门用来实现SPA应用.
2. SPA应用：

​ [1]单页Web应用.

​ [2]整个应用只有一个完整的页面.

​ [3]点击页面中的导航链接不会刷新页面，只会做页面的局部更新.

​ [4]数据需要通过ajax请求获取.

3. 路由：一个路由就是一组映射关系(key-value).

（key为路径，value可能是function或component）

​ [1]后端路由

​ ①value是function，用于处理客户端提交的请求.

​ ②服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据.

​ [1]前端路由

​ ①value是component，用于展示页面内容.

​ ②当浏览器的路径改变时，对应的组件就会显示.

（2）基本使用

1. 安装vue-router，命令：npm i vue-router.
2. 应用插件：Vue.use(VueRouter).
3. 编写router配置项

// 引入VueRouter
import VueRouter from 'vue-router'
// 引入LuYou组件
import About from '../components/About'
import Home from '../components/Home'

// 创建router实例对象，去管理一组一组的路由规则
const router=new VueRouter({
 routes:[
     {
         path:"/about",
         component:About
     },
     {
         path:"/home",
         component:Home
     }
 ]   
})
// 暴露router
export default router

4. 实现切换(active-class可配置高亮样式)

<router-link active-class="active" to="/about">About</router-link>

5. 指定展示位置

<router-view></router-view>

（3）多级路由

1. 配置路由规则，使用children配置项

routes:[
     {
         path:"/about",
         component:About
     },
     {
         path:"/home",
         component:Home，
         children:[	// 通过children配置子级路由
         	{
         		path:"news",	// 此处一定不要写：/news
         		component:News
     		}，
    		{
    			path:"message",
         		component:Message
    		}
         ]
     }
 ]   

2. 跳转(要写完整路径)

<router-link to="/home/news">News</router-link>

（4）路由的query参数

1. 传递参数

<!--跳转并携带query参数，to的字符串写法-->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!--跳转并携带query参数，to的字符串写法-->
<router-link
	:to="{
         	path:'/home/message/detail',
         	query:{
         		id:666,
         		title:'你好'
         	}
         }"             
>跳转</router-link>

2. 接收参数

$router.query.id
$router.query.title

（5）命名路由

1. 作用：可以简化路由的跳转.
2. 给路由命名

routes:[
     {
         path:"/home",
         component:Home，
         children:[	
         	{
         		name:'hello'	// 给路由命名
         		path:"news",	
         		component:News
     		}
         ]
     }
 ]   

3. 简化跳转

<!--简化前，需要写完整的路径-->
<router-link to="/home/news">跳转</router-link>
<!--简化后，直接通过名字跳转-->
<router-link :to="{name:hello}">跳转</router-link>

（6）路由的params参数

1. 配置路由，声明接收params参数

routes:[
     {
         path:"/home",
         component:Home，
         children:[	
         	{
         		name:'hello'	
         		path:"news/:id/:title",	// 使用占位符声明接收params参数	
         		component:News
     		}
         ]
     }
 ]   

2. 传递参数

<!--跳转并携带params参数，to的字符串写法-->
<router-link :to="/home/news/666/你好">跳转</router-link>
<!--跳转并携带params参数，to的对象写法-->
<router-link
	:to="{
         	name:'xiangqing',
         	params:{
         		id:666,
         		title:'你好'
         	}
         }"             
>跳转</router-link>
<!--路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置-->

3. 接收参数

$router.params.id
$router.params.title

（7）路由的props配置

// 作用：让路由组件更方便的收到参数
{
    name:'home'
    path:"/home",
    component:Home，
    // 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
    // props:{a:900}
    
    // 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
    // props:true
    
    // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    props(route){
        return{
            id:route.query.id,
            title:route.query.title
        }
    }
}

（8）<router-link>的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式.
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push.
3. 如何开启replace模式：<router-link replace···> News</router-link>.

（9）编程式路由导航

1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活.
2. 具体编码

// $router的两个API
this.$router.push({
	name:'xiangqing',
    	params:{
            id:xxx,
            title:Xxx
        }
})
this.$router.replace({
    name:'xiangqing',
    	params:{
            id:xxx,
            title:xxx
        }
})

（10）缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁.
2. 具体编码

<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

（11）两个新的生命周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态.
2. 具体名字

​ [1]activated路由组件被激活时触发.

​ [2]deactivated路由组件失活时触发.

（12）路由守卫

1. 作用：对路由进行权限控制.
2. 分类：全局守卫、独享守卫、组件内守卫.
3. 全局守卫

// 全局前置守卫，初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next)=>{
    console.log('beforeEach',to,from)
    if(to.meta.isAuth){	// 判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school')==='atguigu'){	// 权限控制的具体规则
            next()	// 放行
        }else{
            alert('暂无权限查看')
            // next({name:'guanyu'})
        }
    }else{
        next()	// 放行
    }
})
// 全局后置守卫，初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
    console.log('afterEach',to,from)
    if(to.meta.title){
        document.title=tp.meta.title	// 修改网页的title
    }else{
        document.title='vu'
    }
})

4. 独享守卫

beforeEnter(to,from,next){
    console.log('beforeEnter',to,from)
    if(to.meta.isAuth){	// 判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school')==='atguigu'){	// 权限控制的具体规则
            next()	// 放行
        }else{
            alert('暂无权限查看')
            // next({name:'guanyu'})
        }
    }else{
        next()	// 放行
    }
}

5. 组件内守卫

// 进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to from,next){
},
// 离开守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next){23 }

六、vue3

（1）使用vue-cli创建

// 查看@vue.cli版本，确保@vue/cli版本在4.5.0以上
vue --version
// 安装或者升级你的@vue/cli
npm install -g @vue/cli
// 创建
vue create vue_test
// 启动
cd vue_test
npm run serve

（2）setup

1. 理解：Vue3中一个新的配置项，值为一个函数.

2. setup是所有Composition API”表演的舞台“.

3. 组件中所用到的数据、方法等等，均要配置在setup中.

4. setup函数的两种返回值

​ [1]若返回一个对象，则对象中的属性、方法在模板中均可以直接使用.

​ [2]若返回一个渲染函数，则可以自定义渲染内容.

5. Vue2.x配置(data、methods、computed…)中可以访问到setup中的属性、方法，但在setup中不能访问到Vue2.x配置.（如果有重名，setup优先）
6. setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性.

（3）ref函数

1. 作用：定义一个响应式的数据.
2. 语法：const xxx=ref(initValue).

​ [1]创建一个包含响应式数据的引用对象(reference对象).

​ [2]JS中操作数据：xxx.value.

​ [3]模板中读取数据：不需要value，直接：<div>{{xxx}}</div>.

3. 接收的数据可以是基本类型、也可以是对象类型.
4. 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的.
5. 对象类型的数据：内部求助了Vue3.0中的一个新函数reactive.

（4）reactive函数

1. 作用：定义一个对象类型的响应式数据.（基本类型别用它，用ref函数）
2. 语法：const 代理对象=reactive(被代理对象)接收一个对象(或数组)，返回一个代理器对象(proxy对象).
3. reactive定义的响应式数据是"深层次的".
4. 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据都是响应式的.

（5）reactive对比ref

1. 从定义数据角度对比：

​ [1]ref用来定义：基本类型数据.

​ [2]reactive用来定义：对象(或数组)类型数据.

​ [3]ref也可以用来定义对象(或数组)类型数据，它内部会自动通过reactive转为代理对象.

2. 从原理角度对比：

​ [1]ref通过Object.defineProperty()的get与set来实现响应式(数据劫持).

​ [2]reactive通过使用Proxy来实现响应式，并通过Reflect操作源对象内部的数据.

3. 从使用角度对比：

​ [1]ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value.

​ [2]reactive定义的数据：操作数据与读取数据均不需要.value.

（6）setup的两个注意点

1. setup执行的时机

​ [1]在beforeCreate之前执行一次，this是undefined.

2. setup的参数

​ [1]props：值为对象，包含组件外部传递过来，且组件内部声明接收了的属性.

​ [2]context：上下文对象

​ ①attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs.

​ ②slots：收到的插槽内容，相当于this.$slots.

​ ③emit：分发自定义事件的函数，相当于this.$emit.

（7）计算属性与监视

1. computed函数

import {computed} from 'vue'

setup(){
    ···
    // 计算属性--简写
    let fullName=computed(()=>{
        return person.firstName+'-'+person.lastName
    })
    // 计算属性--完整
    let fullName=computed({
        get(){
          return person.firstName+'-'+person.lastName  
        },
        set(value){
            const nameArr=value.split('-')
            person.firstName=nameArr[0]
            person.lastName=nameArr[1]
        }
    })
}

2. watch函数

// 情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
},{immediate:true})

// 情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
    console.log('sum或msg变化了',newValue,oldValue)
})

// 情况三：监视reactive定义的响应式数据
// (若watch监视的是reactive定义的响应式数据，则oldValue无法正确获取且强制开启了深度监视)
// (若watch监视的是reactive定义的响应式数据中某个属性时，deep配置有效)
watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false})	// 此处的deep配置不再奏效

// 情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.name,(newValue,oldValue)=>{
    console.log('person的name变化了',newValue,oldValue)
},{immediate:true,deep:true})

// 情况五：监视reactive所定义的一个响应式数据中的某些属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
    console.log('person的name或age变化了',newValue,oldValue)
})

// 特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true})	// 此处由于监视的是reactive定义的对象中的某个属性，所以deep配置有效

3. watchEffect函数

​ [1]watch的套路是：既要指明监视的属性，也要指明监视的回调.

​ [2]watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性.

​ [3]watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值.

// watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect(()=>{
    const x1=sum.value
    const x2=person.age
    console.log('watchEffect配置的回调执行了')
})

（8）生命周期

1. Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有两个被更名：

​ [1]beforeDestroy改名为beforeUnmount.

​ [2]destroyed改名为unmounted.

2. Vue3.0也提供了Componsition API形成的生命周期钩子，与Vue2.x中钩子对应关系如下：

​ [1]beforeCreate===> setup()

​ [2]created===> setup()

​ [3]beforeMount===> onBeforeMount

​ [4]mounted===> onMounted

​ [5]beforeUpdate===> onBeforeUpdate

​ [6]update===> onUpdate

​ [7]beforeUnmount===>onBeforeUnmount

​ [8]unmounted===> onUnmounted

（9）自定义hook函数

1. hook本质是一个函数，把setup函数中使用的Componsition API进行了封装.
2. 类似于vue2.x中的mixin.
3. 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂.

（10）toRef

1. 作用：创建一个ref对象，其value值指向另一个对象中的某个属性值.
2. 语法：const name=toRef(person,'name').
3. 应用：要将响应式对象中的某个属性单独提供给外部使用时.

（11）shallowReactive与shallowRef

1. shallowReactive：只处理对象最外层属性的响应式(浅响应式).
2. shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理.
3. 什么时候用

​ [1]如果有一个对象数据，结构比较深，但变化时只是外层属性变化===>shallowReactive.

​ [2]如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换===>shallowRef.

（12）readonly与shallowReadonly

1. readonly：让一个响应式数据变为只读的(深只读).

2. shallowReadonly：让一个响应式数据变为只读的(浅只读).

3. 应用场景：不希望数据被修改时.

（13）toRaw与markRaw

1. toRaw：

​ [1]作用：将一个由reactive生成的响应式对象转为普通对象.

​ [2]使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新.

2. markRaw：

​ [1]作用：标记一个对象，使其永远不会再成为响应式对象.

​ [2]应用场景：

​ ①有些值不应被设置为响应式的，例如复杂的第三方类库等.

​ ②当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能.