Vue2.0与Vue 3.0 尚硅谷

已于 2022-09-16 22:07:15 修改
阅读量1.1k 收藏 5
点赞数
文章标签： vue.js javascript 前端
于 2022-05-09 21:44:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiamengjiaomeng/article/details/124659711
版权

Vue2.0

Vue基础

Vue简介

1.描述：一套用于构建用户界面的渐进式JS框架
2.特点：组件化模式，提高代码复用率，更好维护代码；声明式编码（与传统命令式编码相对），编码人员无需直接DOM,提高开发效率；

Vue初识

1…Vue.js与Vue,minjs的了解、下载、与引入

2.浏览器安装Vue-detools包（注意：安装到chrome拓展程序里时候再再设置Vue允许文件访问地址）

3.配置Vue.config，阻止Vue生成时生成生产提示

4.使用原理
4.1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
4.2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
4.3.root容器里的代码被称为【Vue模板】；
4.4.Vue实例和容器是一一对应的；
4.5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
4.6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
4.7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注：应该区分js表达式 和 js代码(语句)
表达式：一个表达式会产生一个值，可以放在任何一 个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’
js代码(语句)
(1). if( ){ }
(2). for( ){ }

5.模板语法
Vue语法分为插值语法、指令语法
5.1 插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
5.2 指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性

6.数据绑定
6.1.单向绑定(v-bind)：数据只能从data流向页面。
6.2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

7data与el的2种写法
7.1 el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
7.2 data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
7.3一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

8.MVVM模型与Vue
8.1 MVVM模型
（1）M：模型(Model) ：data中的数据
（2）V：视图(View) ：模板代码
（3）VM：视图模型(ViewModel)：Vue实例
观察发现：
（1）1.data中所有的属性，最后都出现在了vm身上。
（2）.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。
Vue中的MVVM
在这里插入图片描述

9.数据代理
9.1 ES6新语法Object.defineProperty给对象添加新的属性，该属性是默认不可以被遍历,但可以添加配置项控制该属性是否可以被遍历

Object.defineProperty(person,'age',{
				 value:18,
				 enumerable:true, //控制属性是否可以枚举，默认值是false
				 writable:true, //控制属性是否可以被修改，默认值是false
				 configurable:true //控制属性是否可以被删除，默认值是false

				//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}

			})

9.2 数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

//通过obj2来获取、修改obj中的属性值
let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})

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

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		//此时应有vm._data == options.data = data
		//第一个vm._data为vm对象所代理的data, options.data为Vue对象创建时配置的data,data为本来的data数据
		let data = {
				name:'尚硅谷',
				address:'宏福科技园'
		}
		
		const vm = new Vue({
			el:'#root',
			})
	</script>

在这里插入图片描述

10.事件处理
10.1 事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

<body>
div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 三种绑定事件的方法 -->
			<button v-on:click="showInfo0">点我提示信息</button> 
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo0(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好')
				},
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2($event,number){
					console.log(number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>

10.2 事件修饰符
ue中的事件修饰符：
1.prevent：阻止默认事件（常用）；用法：@事件名.prevent.stop…可以连写
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息只提示一次</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件；变相阻止冒泡 -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>

11.键盘事件
键盘事件也可以连写
11.1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

11.2Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

11.3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

11.4.也可以使用keyCode去指定具体的按键（不推荐）

11.5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					console.log(e.key,e.keyCode)
					//console.log(e.target.value)
				}
			},
		})
	</script>

12计算属性

案例：姓名，用插值{{}}，用{{methods}}
计算属性：
12.1.定义：要用的属性不存在，要通过已有属性计算得来。
12.2原理：底层借助了Objcet.defineproperty方法提供的getter和set

List item

ter。
12.3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
12.4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
（1）计算属性最终会出现在vm上，直接读取使用即可。
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<body>
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			测试：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			<!-- 全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
		</div>
</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>

计算属性简写（用于一般只需要读取计算属性，不需要修改）

computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}

13.监视属性
监视属性watch：
13.1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
13.2.监视的属性必须存在，才能进行监视！！
13.3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
天气案例

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

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			//写法1
			// watch:{
			// 	isHot:{
			// 		immediate:true, //初始化时让handler调用一下
			// 		handler(newValue,oldValue){
			// 			console.log(newValue,oldValue)
			// 		}
			// 	}
			// }
		})
		// 写法2
		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
</script>

13.4深度监视
13.4.1深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

13.4.2 监视属性简写
在vm里进行监视

				//正常写法
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, 
				//简写,当配置项只有handler时才可以简写
				isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} 
			}

在vm外进行监视

	//正常写法
		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) 
		//简写
		vm.$watch('isHot',function(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue,this)
		})

13.3监视属性与计算属性的区分
（1）.computed能完成的功能，watch都可以完成。
（2）.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
（1）所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
（2）所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

14.绑定样式
绑定样式：
14.1. class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
14.2. style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。

<body>
<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					//随机获取心情
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>

15.条件渲染
v-show = “false” 结构还在，只是display:none
v-if =“false” 结构也不在了
15.1.v-if
写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
15.2.v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
图为v-if与template的配合使用，template为模板，非实际元素

	<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>

16列表渲染
16.1基本列表
v-for指令:
（1）1.用于展示列表数据
（2）语法：v-for=“(item, index) in xxx” :key=“yyy”
（3）可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<body>
<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.age}}##{{p.name}}
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<!--其中a为value值,b为key键名-->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(a,b) of car" :key="b">
					{{a}}-{{b}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>

16.2 key原理
面试题：react、vue中的key有什么作用？（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. 用index作为key可能会引发的问题：==
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 => 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM: 会产生错误DOM更新 => 界面有问题。
3.
== 4. 开发中如何选择key? ==
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
3.若没有写key,则遍历时会把默认将数组的index作为唯一标识
在这里插入图片描述
在这里插入图片描述
16.3列表过滤
（1）用数据监视watch实现

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
	</body>
		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			 new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						// 此处设置immediate可使原空的数组 filPerons:[]被赋值
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								// 注：indexOf('') = 0
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) 
</script>

（2）用computed实现

	new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			})

16.4 Vue监测数据改变的原理
以对象为例
在这里插入图片描述
在这里插入图片描述

<script type="text/javascript" >

			let data = {
				name:'尚硅谷',
				address:'北京',
			}

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k]
						},
						set(val){
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}		
		</script>

16.5 Vue.set的使用 vm. $ set()
对象中后追加的属性，Vue默认不做响应式处理(即没有get与set）,如需给后添加的属性做响应式,应使用如下两种api Vue.set 和 vm.$ set()
注：不能直接操作Vue实例或者Vue实例的根数据对象（data 或 vm的_data）
案例：点击按钮给student添加性别

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>

数组 的修改比较特殊，Vue承认数组原有的方法(但跟Array.prototype.push…不一样，Vue的数组操作方法是将Array.prototype.push…封装后的）可以实现响应式操作：push,pop,shift,unshift,splice，reverse…
也可以用Vue.set（）与vm.$set（ ）进行操作

总结：
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()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

17.收集表单数据

常见的表单类型：text、password、number、radio、checkBox、selection
收集表单数据规则：
若：，则v-model收集的是value值，用户输入的就是value值。
若：，则v-model收集的是value值，且要给标签配置value值。
若：
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

18过滤器

过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据

<body>
<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<!-- 过滤器参数配置，1：准备处理的数据 2：过滤器名  3.下一个过滤器名 -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好，尚硅谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>
19.内置指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
		<!-- 引入Vue -->
	</head>
	<body>
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>

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

<div id="root">
			//此时n保留为初始赋的值
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
</div>

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

20.自定义指令

自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
3.指令函数与对象中的this指向window

<body>
<div id="root">
			<h2>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		//定义全局指令
		/* Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) */

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
				// 当指令名称用kebab-case命名时，不能简写指令函数
				/* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				},
				
				fbind:{
					// 使用函数定义指令聚焦不成功的原因在于没有在element被插入到页面时进行
					// element.focus()
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>
21.Vue生命周期

生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
在这里插入图片描述

Vue组件

1. 模块与组件定义

模块定义：向外提供特定功能的js程序，一般为一个js文件
组件定义：用来实现局部（特定）功能效果的代码集合
注意区分组件化与模块化
组件有两种编写形式：单文件组件、非单文件组件

2.非单文件组件

定义：一个文件中包含n个组件
Vue中使用组件的三大步骤：
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
1.如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
（1）.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
（2）.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

2.如何注册组件？
（1）局部注册：靠new Vue的时候传入components选项
（2）全局注册：靠Vue.component(‘组件名’,组件)

<body>
<div id="root">
			<hello></hello>
			<hr>
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>

		<div id="root2">
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步：创建school组件
		const school = Vue.extend({
			template:`
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
			// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
			data(){
				return {
					schoolName:'尚硅谷',
					address:'北京昌平'
				}
			},
			methods: {
				showName(){
					alert(this.schoolName)
				}
			},
		})

		//第一步：创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'张三',
					age:18
				}
			}
		})
		
		//第一步：创建hello组件
		const hello = Vue.extend({
			template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
			data(){
				return {
					name:'Tom'
				}
			}
		})
		
		//第二步：全局注册组件
		Vue.component('hello',hello)

		//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好啊！'
			},
			//第二步：注册组件（局部注册）
			components:{
				school,
				student
			}
		})

		new Vue({
			el:'#root2',
		})
	</script>

几个注意点：
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染。

3.一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options

<body>
<div id="root">
			<h1>{{msg}}</h1>
			//组件使用
			<my-school></my-school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义组件
		/* const s = Vue.extend({
			// 定义时给组件命名,开发者工具中呈现的是该名字
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		}) */

		// 组件定义简化
		const s ={
			// 定义时给组件命名,开发者工具中呈现的是该名字
			name:'atxuehailou',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		}

		//组件注册
		new Vue({
			el:'#root',
			data:{
				msg:'欢迎学习Vue!'
			},
			components:{
				'my-school':s
			}
		})
	</script>

组件的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件(第四层)
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件(第三层)
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			//注册组件（局部）
			components:{
				student
			}
		})

		//定义hello组件(第三层)
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'欢迎来到尚硅谷学习！'
				}
			}
		})
		
		//定义app组件(第二层)
		const app = Vue.extend({
			template:`
			<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

		//创建vm(第一层)
		new Vue({
			template:'<app></app>',
			el:'#root',
			//注册组件（局部）
			components:{app}
		})
	</script>
</html>

在这里插入图片描述
VueComponent
关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，
即Vue帮我们执行的：new VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

4.关于this指向：
(1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。
重要的内置关系
1.一个重要的内置关系：VueComponent.prototype.__ proto __ === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
23

3单文件组件

3.1单文件的创建：首先创建一个.vue文件

<template>
<!-- 组件结构 -->
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
//交互
	// 分别暴露
	//  export school =Vue.extend({})
	// 统一暴露
	// export {school}
	// 默认暴露 defalut school
	
	// 简化的组件注册与暴露学法
	 export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
/* 样式 */
	.demo{
		background-color: orange;
	}
</style>

3.2 单文件组件的引用：

<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './School.vue'
	import Student from './Student.vue'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

3.3 组件的汇总：一般创建main.js组件

import App from './App.vue'

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

3.4 组件的真正使用:按顺序在html文件中引入vue.js与main.js与main.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
		<script type="text/javascript" src="../js/vue.js"></script> 
		<script type="text/javascript" src="./main.js"></script> 
	</body>
</html>

Vue脚手架

一 .脚手架结构分析

  1. npm 全局安装 vue/cli
  2. 创建Vue脚手架
  3. render函数的使用
    当不使用render函数时，Vue脚手架创建项目时自动创建的main.js引用Vue路径不正确，应该修改为正确的路径
    render为Vue调用的一个函数，render函数调用时传递了createElement函数，createElement函数可以创建具体的元素，编写具体的模板（相当于是精简版的模板解析器，可以节省存储空间）
  4. 关于不同版本的Vue：
    4.1 vue.js与vue.runtime.xxx.js的区别：
    (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
    (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
    4.2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

二.修改Vue默认配置

  1. 终端使用vue inspect > output.js 命令，可将vue脚手架的配置文件导出
  2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

三.ref属性

  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式：
    （1）打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
    （2） 获取：this.$refs.xxx

四.props配置项1. 功能：让组件接收外部传过来的数据

  1. 传递数据：<Demo name="xxx"/>

  2. 接收数据：

    （1） 第一种方式（只接收）：props:['name']

    （2） 第二种方式（限制类型）：props:{name:String}

    （3） 第三种方式（限制类型、限制必要性、指定默认值）：

     ```js
 props:{
 	name:{
 	type:String, //类型
 	required:true, //必要性
 	default:'老王' //默认值
 	}
 }
 ```

    备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

五.mixin混入

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

  2. 使用方式：

（1） 第一步定义混合：

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

（2) 第二步使用混入：

​ 全局混入： Vue.mixin(xxx)

局部混入：mixins:['xxx']

六.插件

  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()

七.scoped样式

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

八.TodoList案例

  1. 组件化编码流程：

    (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

1).一个组件在用：放在组件自身即可。

2). 一些组件在用：放在他们共同的父组件上（`<span style="color:red">`状态提升）。

(3).实现交互：从绑定事件开始。

  2. props适用于：

    (1).父组件  ==>  子组件 通信

(2).子组件 ==> 父组件 通信（要求父先给子一个函数）

  3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

  4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

九.组件的自定义事件

  1. 一种组件间通信的方式，适用于：== 子组件 == ==> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

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

    2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
......
mounted(){
   this.$refs.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指向会出问题！

十.全局事件总线

  1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信。

  2. 安装全局事件总线：

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

  3. 使用事件总线：

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

      methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

    2. 提供数据：B组件提供数据，则在B组件内出发A组件定义在bus上的事件this.$bus.$emit('xxxx',数据)

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

十二.消息订阅与发布

  1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信。
  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.demo) //订阅消息
}

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

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

十三 nextTick

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM更新 循环结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

十四.过渡与动画

  1. 单个动画实现
<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>



<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>



<style scoped>
	h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}

	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

2.动画效果用transition实现

<template>
	<div class="demo"> 
		<button @click="isShow =!isShow">显示隐藏</button>
		<!-- Vue使用transition标签包裹需要动画效果的DOM元素 -->
		<transition name="hello" appear>
			<h1 v-show="!isShow" key="1">你好Vue</h1>
		</transition>
		
	</div>
</template>



<script>
	export default {
		name:'Test2',
		data() {
			return {
				isShow:true

			}
		},
	}
</script>



<style scoped>
	/*组件里相同的样式名会被覆盖掉  */
	h1{
		background-color: aqua;
		
	}
	/* 进入的起点、离开的终点*/
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX();
	}
	/*进入与离开的过程*/
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	
</style>

3.多个动画实现:将transition标签替换为transition-group标签，并给每一个需要动画效果的DOM元素添加唯一的key值

<template>
	<div class="demo"> 
		<button @click="isShow =!isShow">显示隐藏</button>
		<!-- Vue使用transition标签包裹需要动画效果的DOM元素 -->
		<!-- transition-group用于多个DOM元素的动画效果，每个元素需配置唯一的key值 -->
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好Vue</h1>
			<h1 v-show="isShow" key="2">你好尚硅谷</h1>
		</transition-group>
		
	</div>
</template>
  1. 借助动画库（animate.css）
<!-- 使用animate.css库给元素添加动画，先安装——>再引入——>再配置类名——>选择动画 -->
		<transition-group 
		appear
		name="animate__animated animate__bounce" 
		enter-active-class="animate__wobble"
		leave-active-class="animate__backInDown"
		>
			<h1 v-show="!isShow" key="1">你好Vue</h1>
			<h1 v-show="isShow" key="2">你好尚硅谷</h1>
		</transition-group>

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

  2. 图示：在这里插入图片描述

  3. 写法：

    1. 准备好样式：

      • 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      • 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

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

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

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

十五.Vue-Cli配置代理服务器

方法一
在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
方法二
编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

注：跨域问题是客户端（window）与服务器端的问题，服务器之间相互通信不存在跨域问题。

十六.插槽

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

  2. 分类：默认插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 默认插槽：

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

    2. 具名插槽：

      父组件中：
        <Category>
            <template slot="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>

    3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：

        父组件中：
  		<Category>
  			<template scope="scopeData">
  				<!-- 生成的是ul列表 -->
  				<ul>
  					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
  				</ul>
  			</template>
  		</Category>
  
  		<Category>
  			<template slot-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

一.概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

二.何时使用？

多个组件需要共享数据时

三.搭建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
})

四.基本使用

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

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

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('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.commit('mutations中的方法名',数据)

    备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写 dispatch，直接编写 commit

五.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

六.四个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'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

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

    methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),

    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

七.vuex模块化

  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-route

一.基本概念

  1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
  2. 前端路由：key是路径，value是组件。
    附：vue-router主要应用于SPA(单页面应用）
  3. 路由的分类
    （1）前端路由：value为component,用于展示页面内容，
    工作过程，浏览器路径改变，对应的组件就会展示
    （2）后端路由：指客户端的请求与服务器处理函数之间的映射关系，value是function,用于处理客户端发起的请求
    工作过程，服务器接收到一个请求，根据请求路径找到匹配函数来处理请求，返回响应数据

二.基本使用

  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>

三.几个注意点

  1. 路由组件通常存放在 pages文件夹，一般组件通常存放在 components文件夹。
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有自己的 $route属性，里面存储着自己的路由信息。
  4. 整个应用只有一个router，可以通过组件的 $router属性获取到。

四.嵌套路由

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

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

  2. 跳转（要写完整路径）：

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

五.路由的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. 接收参数：

 $route.query.id
 $route.query.title

六.路由的命名

  1. 作用：可以简化路由的跳转。

  2. 如何使用

    1. 给路由命名：

      {
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

    2. 简化跳转：

      <!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

七.路由的params参数

  1. 配置路由，声明接收params参数
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

  1. 传递参数

    <!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

    特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  2. 接收参数

    $route.params.id
$route.params.title

八.路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：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
		}
	}
}

九.vouter-link 的 replace

vouter-link默认为push模式，该模式下保留历史页面记录

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

十.编程式路由导航

  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
		}
})

this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

十一.缓存路由组件

  1. 作用：让不展示的路由组件保持挂载，不被销毁。

  2. 具体编码：

    //includes对应的是组件名
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

十二.新的生命周期钩子

  1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
  2. 具体名字：
    1. activated路由组件被激活时触发。
    2. deactivated路由组件失活时触发。

十三.路由守卫

  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 = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

  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) {
}

十一.路由器的两种工作模式

hash&history（服务的部署与发布）

  1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
  3. hash模式：
    1. 地址中永远带着#号，不美观 。
    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式：
    1. 地址干净，美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
      history后端解决方案：引入引入connect-history-api-fallback插件

Vue UI 组件库

常见的ui组件库：
移动端：Vant 、Cube UI、Minit UI
PC端：Element UI 、IView UI

Vue3

一.组合式API setup

  1. 一个新的配置项，值为一个函数；组件中所用到的所有数据、方法等，均要配置在setup中
  2. 两个返回值
  • 若返回一个对象，则对象中的属性、方法，在模板中均可以使用
  • 若返回一个渲染函数，则可以自定义渲染内容
  1. 注意：尽量不要与vue2混用，因为vue2中的data、methods、computed会访问到setup中的东西；但是setup中无法访问vue2的配置；如有重名，setup优先；setup不能是一个async函数
  2. setup的注意点
  • setup执行的时机
    》在beforeCreate之前执行一次，this是undefined。
  • setup的参数
    》props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
    》context：上下文对象
    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit

二.ref函数

  1. 作用: 定义一个响应式的数据
  2. 语法: const xxx = ref(initValue)
  3. 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
  • JS中操作数据： xxx.value
  • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
  1. 备注：
  • 接收的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
  • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

三.reactive函数

  1. 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
  2. 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
  • reactive定义的响应式数据是“深层次的”。
  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

四. Vue3响应式原理

  1. vue2的响应式原理

  • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）

  • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

    Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

  • 存在问题：

  • 新增属性、删除属性, 界面不会更新。

  • 直接通过下标修改数组, 界面不会自动更新。

  1. vue3的响应式原理
  • 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
  • 通过Reflect（反射）: 对源对象的属性进行操作。
      new Proxy(data, {
      	// 拦截读取属性值
          get (target, prop) {
          	return Reflect.get(target, prop)
          },
          // 拦截设置属性值或添加新属性
          set (target, prop, value) {
          	return Reflect.set(target, prop, value)
          },
          // 拦截删除属性
          deleteProperty (target, prop) {
          	return Reflect.deleteProperty(target, prop)
          }
      })
      
      proxy.name = 'tom'

五. reactive对比ref

  1. 从定义数据角度对比：
  • ref用来定义：基本类型数据。
  • reactive用来定义：对象（或数组）类型数据。
  • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
  1. 从原理角度对比：
  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
  • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
  1. 从使用角度对比：
  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
  • reactive定义的数据：操作数据与读取数据：均不需要.value。

六.Setup的两个注意点

七. 计算属性与监视

  1. compute函数
    computed函数与Vue2.x中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]
        }
    })
}

六.

xiamengjiaomeng
关注
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记（八）
weixin_44566194的博客
03-01 1713
本文整理了B站尚硅谷Vue2.0 + Vue3.0 全家桶入门到精通教程视频关于 Vue 3.0部分的知识课程笔记，包括：Vue3 简介、创建 Vue3.0 工程、常用 Composition API、 Composition API 的优势、新的组件以及其他改变等。
VUE学习
TerryZjl的博客
10-20 489
学习vue之前最好先对javaScript、html、css有一定的了解，vue是将这三者完美结合的一种框架，例如一个前端功能如导航栏，在很多页面都可能用到，但每个导航栏的信息不一样，也就是说这个导航栏的html和css一样，但js动态渲染的数据不一样，我们可以使用vue将这三者组合起来称为一个组件，在其他页面要用导航栏的时候调用和这个组件，将展示的数据用vue的方法传入这...
vue-tools踩坑日记|vue-tools的安装|vue-tools安装配置指南
最新发布
Wilelm的博客
08-12 490
只是想自己配个浏览器插件工具，结果打包遇到各种问题，看了2个帖子，结合帖子内的内容来调整的冲突之后也试了类似的忽略文件还是不行。其他版本都因为我的vue脚手架安装不了依赖，要么就是镜像问题，旧的淘宝镜像已经没有证书了，这里我用新的。然后npm run build是build不了的，要安装安装 yarn 工具。1、首先去下载5.1.1版本的vue-tools。用git的话要切换一下分支，我用的小乌龟切换。然后安装依赖，npm i 会出现安装错误问题。淘宝镜像安装，这个是旧的地址。目前我下载的是5.1.1。
vue学习
qq_38254978的博客
04-17 295
从零开始学习Vue（一） 引言 最近终于安定下来进了一家公司，闲了两个月再上班还有点小激动。因为公司现在的项目要求是需要进行前后端分离，所以前端也得会(为啥前端也得我们自己写啊)。前端框架用到的是Vue(为啥用vue不是用angular啊)。因为之前对这个angula4.0有所了解，所以觉得应该不会很困难。学习过程中使用的是node.js平台，ide是webstorm，所以这个应该是...
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
07-08
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
10-20
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3126
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （四）
weixin_44566194的博客
12-24 551
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第四章的学习内容的笔记，包括Vue 脚手架配置代理，GitHub 用户搜索案例，vue项目中常用的2个Ajax库，slot插槽等知识。
Vue学习
weixin_43784288的博客
10-07 91
template有什么用？ template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上　template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上 https://www.cnblogs.com/tu-0718/p/11177236.html html <thead> 标签 <thead> 标签用于组合 HTML 表格的表头内容。 <thead> 元素应该与 &lt.
学习Vue
jingkai0714的博客
10-16 154
1.插值表达式应用在标签体中 指令语法在标签属性中应用 ； 2. v-model双向绑定只能应用在表单类元素上 eg:v-model="name"(因为v-model默认绑定的就是value值) v-bind可以简写成:value="name" ； 3.el 两种写法 new Vue({el:"#root"}) ; const vm=new Vue({}) vm.$mount("#root") 4.data:{} data(){return{}} 5.MVVM模型 6.Obj.define...
Vue学习-Vue入门
weixin_59357453的博客
04-02 4353
这是一篇vue学习记录
VUE学习（入门）
m0_61871870的博客
05-05 95
Vue (读音/vj，类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router，vue-resource,vuex）或既有项目整合。MVVM的实现者Model:模型层，在这里表示JavaScript 对象View:视图层，在这里表示 DOM(HTML操作的元素)
vue学习总结
Long_gone的博客
10-23 578
一、变量 <div id="app"> <span>{{msg}}</span> <div> <script src="vue.js></script> <script> var vm = new Vue({ el:"#app", data:{ msg:"123" } }) </script> 二、识别标签 三、绑定事件
完整版的Vue基础学习
Gueyue的博客
10-09 368
Vue 基础学习 目录Vue 基础学习MVC、MVP、MVVMMVCMVPMVVM基础指令Vue实例中的属性组件1、组件化的特性:2、组件化的优点:Vue生命周期Vue中的样式绑定1、class的对象绑定2、class的数组绑定3、style对象绑定4、style数组绑定深入理解Vue组件组件细节1、tbody、ul、select下只能存放特定的标签2、子组件data为function3、vue ...
Vue新手学习笔记：基础知识点整理及示例
乐之终曲
01-03 8758
作为一个刚毕业的应届生，实话我自学能力不好，因此我选择写文章将我的学习过程，感悟记录下来，慢慢改进提高自学能力。 学习Vue的一些基本语法 MVC和MVVM的关系图解： 官方手册： https://cn.vuejs.org/v2/guide/ 不管学什么，起码要知道自学将要学习的东西是什么，以及一些基本的语法。 在vue的官网上学习语法，同时可以在官方提供的平台上做简单的代码编写，...
学习vue框架(慢慢积累)
m0_66127642的博客
12-13 584
慢慢积累
尚硅谷vue2.0+vue3.0全套教程
07-16
### 回答1： 尚硅谷是国内知名的IT培训机构，他们提供了关于...总之，尚硅谷的Vue2.0和Vue3.0全套教程是一门系统且综合的学习课程，通过学习这些教程，学员可以全面了解和掌握Vue的开发技术，并能够应用到实际项目中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值