vue入门以及生命周期

最新推荐文章于 2024-07-22 09:08:11 发布

邂逅于晚风

最新推荐文章于 2024-07-22 09:08:11 发布

阅读量322

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_58670730/article/details/121005127

版权

1.Vue基础介绍

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)
前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道，来制作前端页面效果;

1.2.为什么要学习Vue框架

企业为了提高开发效率:在企业中，时间就是效率，效率就是金钱;
企业中，使用框架，能够提高开发的效率;
提高开发效率的发展历程:原生JS -> Jquery之类的类库-> 前端模板引擎-> Angularjs 1 Vue,js (能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念[通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了] )
在Vue中,一个核心的概念，就是让用户不再操作DOM元素, 解放了用户的双手，让程序员可以更多的时间去关注业务逻辑;

1.3. MVVM 模式
M： model （数据层，也就是指数据（前端是js））
V：view ( 也就是指DOM层或用户界面 )
VM : view-model (视图模型，处理数据和界面的中间层，虚拟dom)

2Vue基本使用

2.1常用指令

2.2插值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		 <div id="d1">
			<h4>{{msg}}</h4> 
		 </div>
			
	</body>
	<script type="text/javascript">
	/* 	绑定边界  */ 
		new Vue({
			/* 第一种  ES6 体现 */
			el:'#d1',
			data() {
				return {msg:'Vue基本使用'}
			}
			/* 第二种 */
// 			data:{
// 				msg :'Vue基本使用',
// 			},
// 			第三种
// 			data :function(){
// 				return  {msg:'Vue基本使用'}
// 			}
		})
	</script>
</html>

2.3数据双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		 <div id="d1">
			<h4>{{msg}}</h4> 
			 <input type="text" v-model="msg" />
			 <h4>{{msg}}</h4> 
			 <h4>{{msg}}</h4> 
			
		 </div>
			
	</body>
	<script type="text/javascript">
	/* 	绑定边界  */ 
		new Vue({
			/* 第一种  ES6 体现 */
			el:'#d1',
			data() {
				return {msg:'Vue基本使用'}
			}
		})
	</script>
</html>

将输入框与标签的内容同步绑定，当对输入框进行修改时其他绑定的标签随之改变

2.4事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		 <div id="d1">
			<h4>{{msg}}</h4> 
			 <input type="text" v-model="msg" />
			 <h4>{{msg}}</h4> 
			 <h4>{{msg}}</h4> 
			 <button type="button" v-on:click="getmsg">提交</button>
		 </div>
			
	</body>
	<script type="text/javascript">
	/* 	绑定边界  */ 
		new Vue({
			/* 第一种  ES6 体现 */
			el:'#d1',
			data() {
				return {msg:'Vue基本使用'}
			},
			methods:{
				getmsg(){
					alert(this.msg)
				}
			}
			
		})
	</script>
</html>

3.Vue生命周期

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

new Vue()实例化一个vue实例，然后init初始化event 和 lifecycle，其实这个过程中分别调用了3个初始化函数（initLifecycle(), initEvents(), initRender()），分别初始化了生命周期，事件以及定义createElement函数，初始化生命周期时，定义了一些属性，比如表示当前状态生命周期状态得_isMounted ，_isDestroyed ，_isBeingDestroyed，表示keep-alive中组件状态的_inactive，而初始化event时，实际上就是定义了$once、$off、$emit、$on几个函数。而createElement函数是在初始化render时定义的（调用了initRender函数）
执行beforeCreate生命周期函数
beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样，后续当数据发生变化时，才能感知到数据的变化并完成页面的渲染
执行created生命周期函数，所以，当这个函数执行的时候，我们已经可以拿到data下的数据以及methods下的方法了，所以在这里，我们可以开始调用方法进行数据请求了
created执行完后，我们可以看到，这里有个判断，判断当前是否有el参数(这里为什么需要判断，是因为我们后面的操作是会依赖这个el的，后面会详细说)，如果有，我们再看是否有template参数。如果没有el，那么我们会等待调用$mount(el)方法(后面会详细说)。
确保有了el后，继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数（其实在这前面是还有一个判断的，判断当前是否有render函数，如果有的话，则会直接去渲染当前的render函数，如果没有那么我们才开始去查找是否有template模板），如果没有template，那么我们就会直接将获取到的el（也就是我们常见的#app，#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。
之后再调用beforMount，也就是说实际从creted到beforeMount之间，最主要的工作就是将模板或者el转换为render函数。并且我们可以看出一点，就是你不管是用el，还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件，他其实是会先编译成为template)，最终他都是会被转换为render函数的。
beforeMount调用后，我们是不是要开始渲染render函数了，首先我们会先生产一个虚拟dom（用于后续数据发生变化时，新老虚拟dom对比计算），进行保存，然后再开始将render渲染成为真实的dom。渲染成真实dom后，会将渲染出来的真实dom替换掉原来的vm.$el（这一步我们可能不理解，请耐心往下看，后面我会举例说明）,然后再将替换后的$el append到我们的页面内。整个初步流程就算是走完了
之后再调用mounted，并将标识生命周期的一个属性_isMounted 置为true。所以mounted函数内，我们是可以操作dom的，因为这个时候dom已经渲染完成了。
再之后，只有当我们状态数据发生变化时,我们在触发beforeUpdate，要开始将我们变化后的数据渲染到页面上了（实际上这里是有个判断的，判断当前的_isMounted是不是为ture并且_isDestroyed是不是为false，也就是说，保证dom已经被挂载的情况下，且当前组件并未被销毁，才会走update流程）
beforeUpdate调用之后，我们又会重新生成一个新的虚拟dom(Vnode)，然后会拿这个最新的Vnode和原来的Vnode去做一个diff算，这里就涉及到一系列的计算，算出最小的更新范围，从而更新render函数中的最新数据，再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新
然后再执行updated，所以updated里面也可以操作dom，并拿到最新更新后的dom。不过这里我要插一句话了，mouted和updated的执行，并不会等待所有子组件都被挂载完成后再执行，所以如果你希望所有视图都更新完毕后再做些什么事情，那么你最好在mouted或者updated中加一个$nextTick（），然后把要做的事情放在$netTick()中去做（至于为什么，以后讲到$nextTick再说吧）
再之后beforeDestroy没啥说的，实例销毁前，也就是说在这个函数内，你还是可以操作实例的
之后会做一系列的销毁动作，解除各种数据引用，移除事件监听，删除组件_watcher，删除子实例，删除自身self等。同时将实例属性_isDestroyed置为true

论证代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="d1">
			<div>number:{{number}}</div>
			<div>{{detail()}}</div>
			<input type="text" v-model="number" />
		</div>
		<script>
			var data = {
				number:999,
				msg:null
			};
			var vm = new Vue({
				el:'#d1',
				data:data,
				methods:{
					detail:function(){
						return "使用方法来插值："+this.msg;
					}
				},
				beforeCreate:function(){
		            console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
		            console.log(this.msg)//undefined
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		        },
		        created:function(){
		            console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
		            this.msg+='!!!'
		            console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
		        },
		        beforeMount:function(){
		            console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
		            this.msg+='@@@'
		            console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		            console.log('接下来开始render，渲染出真实dom')
		        },
		        // render:function(createElement){
		        //     console.log('render')
		        //     return createElement('div','hahaha')
		        // },
		        mounted:function(){ 
		            console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
		            console.log(document.getElementsByClassName("myp")[0])
		            console.log('可以在这里操作真实dom等事情...')
		
		        //    this.$options.timer = setInterval(function () {
		        //        console.log('setInterval')
		        //         this.msg+='!'  
		        //    }.bind(this),500)
		        },
		        beforeUpdate:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('beforeUpdate:重新渲染之前触发')
		            console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
		        },
		        updated:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('updated:数据已经更改完成，dom也重新render完成')
		        },
		        beforeDestroy:function(){
		            console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
		            // clearInterval(this.$options.timer)
		        },
		        destroyed:function(){
		            console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
		        }
			});
		</script>
	</body>
</html>

邂逅于晚风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门以及生命周期

1.Vue基础介绍 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发) 前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道，来制作前端页面效果;1.2.为什么要学习Vue框架企业为了提高开发效率:在企业中，时间就是效率，效率就是金钱; 企业中，使用框架，能够提高开发的效率; 提高开发效率的发展历.
复制链接

扫一扫