vue生命周期实战（三）—— 实例更新并深刻理解nextTick、watch和生命周期的关系

最新推荐文章于 2024-08-02 09:06:02 发布
最新推荐文章于 2024-08-02 09:06:02 发布
阅读量884 收藏 3
点赞数
分类专栏： vue学习 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jcyka/article/details/106262588
版权

此学习教程是对官方教程的解析，

本章节主要涉及到的官方教程地址：

生命周期图示 — Vue.js

上一章 ：vue生命周期实战（二）——实例挂载

本章节介绍实例更新阶段的生命周期钩子：beforeUpdate和updated

beforeUpdate、updated和beforeMount、mounted的区别

beforeUpdate、updated和beforeMount、mounted主要区别在于虚拟dom是初次渲染还是重新渲染。

生命周期钩子区别
beforeMount虚拟dom以及非异步子组件初次渲染并挂载前触发
因为在初次渲染前， 所以在这个钩子中非异步更改响应式属性，不会重新渲染，从而不会触发beforeUpdate和updated钩子
mounted虚拟dom以及非异步子组件都已经初次渲染并挂载后触发
因为已初次渲染， 所以在这个钩子中更改响应式属性，将重新渲染，会触发beforeUpdate和updated钩子
beforeUpdate以下三种情况导致的虚拟dom重新渲染前触发：
1.初次渲染前（mounted之前生命周期钩子）异步更改响应式属性
2.初次渲染后更改响应式属性
3.异步子组件初次渲染并挂载前
在这个钩子中避免更改响应式属性。因为若赋值给响应式属性不是一个固定的值而是一个不断动态变化的值，比如像这样this.a++，则此更改将会导致重新渲染触发自身(beforeUpdate钩子)，beforeUpdate钩子又会再次执行更改，又重新导致渲染触发自身(beforeUpdate钩子)，如此循环往复，造成死循环
updated以下三种情况导致的虚拟dom重新渲染后触发：
1.初次渲染前（mounted之前生命周期钩子）异步更改响应式属性
2.初次渲染后更改响应式属性
3.异步子组件初次渲染并挂载后
在这个钩子中避免更改响应式属性。因为若赋值给响应式属性不是一个固定的值而是一个不断动态变化的值，比如像这样this.a++，则此更改将会导致重新渲染触发自身(updated钩子)，updated钩子又会再次执行更改，又重新导致渲染触发自身(updated钩子)，如此循环往复，造成死循环

beforeUpdate和updated的区别

beforeUpdate和updated的具体区别如下：

生命周期钩子可获取的对象常见应用场景
beforeUpdate和mounted可获取对象相同适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated和mounted可获取对象相同–

综合例子

单个组件例子

不更改响应式属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
      <ul ref="node">
        <li v-for="(item,index) in maxLen" :key="index">{{item}}</li>
      </ul>
  </div>
<script>
var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3
  },
  beforeCreate() {
	 console.log('beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 console.log('created',document.querySelectorAll('li').length)
  },
  beforeMount() {
    console.log('beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
    console.log('mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
    console.log('beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	console.log('updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到，仅仅是new一个Vue实例的话，只输出before、created、beforeMount、mounted四个生命周期钩子。而且beforeCreate、created、beforeMount显示<li>元素数量只有1，而mounted显示4，说明beforeCreate、created、beforeMount三个钩子在初次渲染前，而mounted钩子在初次渲染后。

初次渲染前非异步更改响应式属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
      <ul ref="node">
        <li v-for="(item,index) in maxLen" :key="index">{{item}}</li>
      </ul>
  </div>
<script>
var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3
  },
  beforeCreate() {
	 this.maxLen = 4;
	 console.log('beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 this.maxLen = 5;
	 console.log('created',document.querySelectorAll('li').length)
  },
  beforeMount() {
	 this.maxLen = 6;
    console.log('beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
    console.log('mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
    console.log('beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	console.log('updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到，初次渲染前更改响应式属性的话，还是只输出before、created、beforeMount、mounted四个生命周期钩子。而且before、created、beforeMount都对同一个响应式属性更改的话，mounted钩子只执行一次，那是因为是顺序执行的，所以以最后一个钩子即beforeMount为准。所以在mounted可以看到，最后渲染的<li>元素数量为6。

初次渲染后更改响应式属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
      <ul ref="node">
        <li v-for="(item,index) in maxLen" :key="index">{{item}}</li>
      </ul>
  </div>


<script>
var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3
  },
  beforeCreate() {
	 this.maxLen = 4;
	 console.log('beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 this.maxLen = 5;
	 console.log('created',document.querySelectorAll('li').length)
  },
  beforeMount() {
	 this.maxLen = 6;
     console.log('beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	 this.maxLen = 7;
     console.log('mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到，初次渲染后（此处是在mounted钩子中）更改响应式属性， 会触发beforeUpdate、updated钩子。而且mounted、beforeUpdate显示<li>元素数量为6，而updated显示7，说明mounted、beforeUpdate钩子在重新渲染前，而updated钩子在重新渲染后。

注意， 在beforeCreate钩子里面非异步方式更改响应式属性this.maxLen = 4;是无效的，因为此时响应式属性还未注入到Vue实例中。

使用nextTick得到下次整个视图渲染的结果

如上例，假设我在响应式属性更新后就想对渲染结果进行处理怎么办呢？使用nextTick，就可得到下次整个视图渲染的结果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
      <ul ref="node">
        <li v-for="(item,index) in maxLen" :key="index">{{item}}</li>
      </ul>
  </div>


<script>
var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3
  },
  beforeCreate() {
	 this.maxLen = 4;
	 this.$nextTick(function () {
		console.log('beforeCreate nextTick',document.querySelectorAll('li').length)
  	 })
	 console.log('beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 this.maxLen = 5;
	 this.$nextTick(function () {
		console.log('created nextTick',document.querySelectorAll('li').length)
  	 })
	 console.log('created',document.querySelectorAll('li').length)
  },
  beforeMount() {
	 this.maxLen = 6;
	 this.$nextTick(function () {
		console.log('beforeMount nextTick',document.querySelectorAll('li').length)
  	 })
	 console.log('beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	 this.maxLen = 7;
	 this.$nextTick(function () {
		console.log('mounted nextTick',document.querySelectorAll('li').length)
  	 })
	 console.log('mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到，beforeCreate nextTick、created nextTick、beforeMount nextTick运行在mounted之后，显示的结果为6，这说明这三个钩子中的nextTick在初次渲染后重新渲染前执行。

mounted nextTick运行在beforeUpdate、updated之后，显示的结果为7， 说明mounted的nextTick是在重新渲染后才执行。

异步更改响应式属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
      <ul ref="node">
        <li v-for="(item,index) in maxLen" :key="index">{{item}}</li>
      </ul>
  </div>


<script>
var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3
  },
  beforeCreate() {
	 vm = this;
	 setTimeout(function () {
		vm.maxLen = 4;
  	 })
	 console.log('beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 vm = this;
	 setTimeout(function () {
		vm.maxLen = 5;
  	 })
	 console.log('created',document.querySelectorAll('li').length)
  },
  beforeMount() {
	 vm = this;
	 setTimeout(function () {
		vm.maxLen = 6;
  	 })
     console.log('beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	 vm = this;
	 setTimeout(function () {
		vm.maxLen = 7;
  	 })
     console.log('mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

在这里插入图片描述
可以看到每次异步更改响应式属性，都会重新渲染，触发beforeUpate、updated钩子。而是排在mounted后面。那是因为beforeCreate、created、beforeMount、mounted钩子是同步任务，优先顺序执行; 而setTimout是异步执行的，放在一个异步队列里面，只有同步任务执行完了，才执行异步任务。

使用nextTick得到每次异步任务渲染的结果

因为每次异步都会重新渲染并更改整个视图，所以你可以在异步的回调中使用nextTick：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
      <ul ref="node">
        <li v-for="(item,index) in maxLen" :key="index">{{item}}</li>
      </ul>
  </div>


<script>
var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3
  },
  beforeCreate() {
	 vm = this;
	 setTimeout(function () {
		vm.maxLen = 4;
		vm.$nextTick(function () {
			console.log('beforeCreate nextTick',document.querySelectorAll('li').length)
		 })
  	 })
	 console.log('beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 vm = this;
	 setTimeout(function () {
		vm.maxLen = 5;
		vm.$nextTick(function () {
			console.log('created nextTick',document.querySelectorAll('li').length)
		})
  	 })
	 console.log('created',document.querySelectorAll('li').length)
  },
  beforeMount() {
	 vm = this;
	 setTimeout(function () {
		vm.maxLen = 6;
		vm.$nextTick(function () {
			console.log('beforeMount nextTick',document.querySelectorAll('li').length)
		 })
  	 })
     console.log('beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	 vm = this;
	 setTimeout(function () {
		vm.maxLen = 7;
		vm.$nextTick(function () {
			console.log('mounted nextTick',document.querySelectorAll('li').length)
		 })
  	 })
     console.log('mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到nextTick在每个updated后执行，所以它总能正确返回每次渲染的结果。

注意， 在beforeCreate钩子里面异步方式更改响应式属性vm.maxLen = 4;是有效的，因为异步任务在mounted之后执行，此时更改响应式属性会触发重新渲染。

父子组件例子

让我们将上面的例子改造下，变成父子组件。
父组件(其实是父实例，不过组件与实例本质是一样的）：vm
非异步子组件：v-ul

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>
Vue.component('v-ul', {
  template: '\
     <ul :style="{fontSize:size}">\
       <li v-for="(item,index) in max" :key="index">{{item}}</li>\
     </ul>\
  ',
  props: ['max'],
  data: function(){
		 return {"size":"18px"}
  },
  beforeCreate() {
	 console.log('ul beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 console.log('ul created',document.querySelectorAll('li').length)
  },
  beforeMount() {
    console.log('ul beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
    console.log('ul mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
    console.log('ul beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	console.log('ul beforeUpdate',document.querySelectorAll('li').length)
  }
})




var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 console.log('vm created',document.querySelectorAll('li').length)
  },
  beforeMount() {
     console.log('vm beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
     console.log('vm mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('vm beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('vm updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到， 在父组件vm的beforeMount和mounted钩子中间，又执行了非异步子组件的beforeCreate、created、beforeMount、mounted钩子。所以对于父组件来说，在mounted钩子中，非异步子组件是必然挂载好的。

父组件更改响应式属性

父组件更改与子组件props不绑定的响应式属性

在初步渲染前（created或beforeMount中）非异步更改父组件的ulcolor属性并不会触发重新渲染；
在异步更改或在初步渲染后（比如mounted中）非异步更改父组件的ulcolor属性会触发重新渲染：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>
Vue.component('v-ul', {
  template: '\
     <ul :style="{fontSize:size}">\
       <li v-for="(item,index) in max" :key="index">{{item}}</li>\
     </ul>\
  ',
  props: ['max'],
  data: function(){
		 return {"size":"18px"}
  },
  beforeCreate() {
	 console.log('ul beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
     //异步更改响应式属性
     /*
     var vm = this;
	 setTimeout(function () {
		vm.ulcolor = "red"
  	 })
  	 */
	 console.log('ul created',document.querySelectorAll('li').length)
  },
  beforeMount() {
    console.log('ul beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
    console.log('ul mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
    console.log('ul beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	console.log('ul beforeUpdate',document.querySelectorAll('li').length)
  }
})




var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 console.log('vm created',document.querySelectorAll('li').length)
  },
  beforeMount() {
     console.log('vm beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	 this.ulcolor = "red"
     console.log('vm mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('vm beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('vm updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

在这里插入图片描述
可以看到，在初次渲染之后更改和子组件不关联的响应式属性时，只会执行父组件的beforeUpdate、updated钩子。

父组件更改与子组件props绑定的响应式属性

在初步渲染前（created或beforeMount中）非异步更改父组件的maxLen属性并不会触发重新渲染；
在异步更改或在初步渲染后（比如mounted中）非异步更改父组件的与子组件关联的maxLen属性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>
Vue.component('v-ul', {
  template: '\
     <ul :style="{fontSize:size}">\
       <li v-for="(item,index) in max" :key="index">{{item}}</li>\
     </ul>\
  ',
  props: ['max'],
  data: function(){
		 return {"size":"18px"}
  },
  beforeCreate() {
	 console.log('ul beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 console.log('ul created',document.querySelectorAll('li').length)
  },
  beforeMount() {
    console.log('ul beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
    console.log('ul mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
    console.log('ul beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	console.log('ul updated',document.querySelectorAll('li').length)
  }
})




var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 console.log('vm created',document.querySelectorAll('li').length)
  },
  beforeMount() {
     console.log('vm beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	 this.maxLen = 4
     console.log('vm mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('vm beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('vm beforeUpdate',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

在这里插入图片描述
可以看到，在异步更改或初次渲染之后更改与子组件props绑定的响应式属性时，不但会执行父组件的beforeUpdate、updated钩子，还会执行子组件的beforeUpdate、updated钩子，而且在父组件的beforeUpdate、updated钩子之间执行。
为什么会这样呢？
那是因为更改maxLen，不但是更改了父组件的响应式属性，当maxLen值传到子组件的props时，也等于是更改了子组件的响应式属性，所以当然会先触发父组件的重新渲染，然后触发子组件的重新渲染。

父组件更改子组件的响应式属性

父组件可以异步更改或在初步渲染后（比如mounted中）非异步更改子组件的data或props的值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>
Vue.component('v-ul', {
  template: '\
     <ul :style="{fontSize:size}">\
       <li v-for="(item,index) in max" :key="index">{{item}}</li>\
     </ul>\
  ',
  props: ['max'],
  data: function(){
		 return {"size":"18px"}
  },
  beforeCreate() {
	 console.log('ul beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 console.log('ul created',document.querySelectorAll('li').length)
  },
  beforeMount() {
    console.log('ul beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
    console.log('ul mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
    console.log('ul beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	console.log('ul updated',document.querySelectorAll('li').length)
  }
})




var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate',document.querySelectorAll('li').length)
  },
  created() { 
     /*异步更改
	 var vm = this;
	 setTimeout(function () {
		vm.$children[0].size = "12px"
  	 })
	 */
	 console.log('vm created',document.querySelectorAll('li').length)
  },
  beforeMount() {	
     console.log('vm beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
    //更改子组件data中的size
	this.$children[0].size = "12px"
	//也可以更改子组件props中的max，但会抛错，因为父组件重新渲染时会覆盖此值
	//this.$children[0].max = 4
	console.log('vm mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('vm beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('vm updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到，更改子组件的响应式属性仅触发子组件的重新渲染。

子组件更改响应式属性

子组件更改自己的响应式属性

在初步渲染前（created或beforeMount中）非异步更改data或props的值并不会触发重新渲染；
在子组件内部异步更改或在初步渲染后（比如mounted中）非异步更改data或props的值会触发重新渲染。
将上面的例子重写如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>
Vue.component('v-ul', {
  template: '\
     <ul :style="{fontSize:size}">\
       <li v-for="(item,index) in max" :key="index">{{item}}</li>\
     </ul>\
  ',
  props: ['max'],
  data: function(){
		 return {"size":"18px"}
  },
  beforeCreate() {
	 console.log('ul beforeCreate',document.querySelectorAll('li').length)
  },
  created() {
	 /*异步方式
	 var vm = this;
	 setTimeout(function () {
		vm.size = "13px"
  	 })
	 */
	 console.log('ul created',document.querySelectorAll('li').length)
  },
  beforeMount() {
    console.log('ul beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	//更改data中的size
	this.size = "12px"
	//也可以更改props中的max，但会抛错，因为父组件重新渲染时会覆盖此值
	//this.max = 4
    console.log('ul mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
    console.log('ul beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	console.log('ul updated',document.querySelectorAll('li').length)
  }
})

var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate',document.querySelectorAll('li').length)
  },
  created() { 
	 console.log('vm created',document.querySelectorAll('li').length)
  },
  beforeMount() {	
     console.log('vm beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	console.log('vm mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('vm beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('vm updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到，子组件在初次渲染之后更改子组件的响应式属性只会触发子组件的beforeUpdate、updated钩子。这和在父组件那边更改是一样的结果。

子组件更改父组件的响应式属性

在子组件中更改父组件的响应式属性和在父组件中更改结果是一致的：如果此属性是与子组件props绑定的，则父子组件都会重新渲染；不与子组件props绑定的，则仅父组件重新渲染。
放上更改父组件的与子组件props绑定的响应式属性的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>
Vue.component('v-ul', {
  template: '\
     <ul :style="{fontSize:size}">\
       <li v-for="(item,index) in max" :key="index">{{item}}</li>\
     </ul>\
  ',
  props: ['max'],
  data: function(){
		 return {"size":"18px"}
  },
  beforeCreate() {
	 console.log('ul beforeCreate',document.querySelectorAll('li').length)
  },
  created() { 
	 console.log('ul created',document.querySelectorAll('li').length)
  },
  beforeMount() {
    console.log('ul beforeMount',document.querySelectorAll('li').length)
  },
  mounted() { 
    this.$parent.maxLen = 4 
    console.log('ul mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
    console.log('ul beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	console.log('ul updated',document.querySelectorAll('li').length)
  }
})

var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate',document.querySelectorAll('li').length)
  },
  created() { 
	 console.log('vm created',document.querySelectorAll('li').length)
  },
  beforeMount() {	
     console.log('vm beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	console.log('vm mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('vm beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('vm updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果如下：
在这里插入图片描述
可以看到父子组件都重新渲染了。

在mounted中使用nextTick得到下次视图渲染结果

同时可以看到，当这种情况时，父子组件重新渲染发生在父组件的mounted钩子之后。所以在父组件的mounted钩子显示<li>元素个数还是3。如果想在mounted钩子中得到父组件和所有子孙组件更改响应式数据后的下次视图渲染结果可以使用mounted钩子的一开始就使用nextTick：

mounted: function () {
    this.$nextTick(function () {
    	console.log('vm mounted nextTick',document.querySelectorAll('li').length)
    })
	console.log('vm mounted',document.querySelectorAll('li').length)
}

运行后，你将会看到<li>元素个数变成了4。
注意，这是下次整个视图渲染结果，但不包括异步情况，因为无论是异步更改响应式属性还是初始化异步子组件，都是异步任务，它们的视图渲染会在同步任务的视图渲染之后。 可查看本单节最后的例子以加深理解。

异步子组件

mounted 不会保证所有的子组件也都一起被挂载

在mounted API中说“mounted 不会保证所有的子组件也都一起被挂载”。为什么会这样呢？这是因为有一种子组件是异步组件，它并不会在父组件mounted钩子中被挂载，而是触发父组件的重新渲染，
在beforeUpdate、updated钩子之间完成初步渲染和挂载。
将上面的例子的v-ul子组件重写成异步子组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>

Vue.component('v-ul', function (resolve, reject) {
  setTimeout(function () {
	  resolve({
			template: '\
		 <ul :style="{fontSize:size}">\
		   <li v-for="(item,index) in max" :key="index">{{item}}</li>\
		 </ul>\
	  ',
	  props: ['max'],
	  data: function(){
			 return {"size":"18px"}
	  },
	  beforeCreate() {
		 console.log('ul beforeCreate',document.querySelectorAll('li').length)
	  },
	  created() { 
		 console.log('ul created',document.querySelectorAll('li').length)
	  },
	  beforeMount() {
		console.log('ul beforeMount',document.querySelectorAll('li').length)
	  },
	  mounted() { 
		
		console.log('ul mounted',document.querySelectorAll('li').length)
	  },
	  beforeUpdate() {
		console.log('ul beforeUpdate',document.querySelectorAll('li').length)
	  },
	  updated(){
		console.log('ul updated',document.querySelectorAll('li').length)
	  }  
	  })
  })
})

var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate',document.querySelectorAll('li').length)
  },
  created() { 
	 console.log('vm created',document.querySelectorAll('li').length)
  },
  beforeMount() {	
     console.log('vm beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
	console.log('vm mounted',document.querySelectorAll('li').length)
  },
  beforeUpdate() {
     console.log('vm beforeUpdate',document.querySelectorAll('li').length)
  },
  updated(){
	 console.log('vm updated',document.querySelectorAll('li').length)
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到在父组件的beforeUpdate、updated钩子之间完成子组件的beforeCreate、created、beforeMount、mounted钩子。这说明在异步子组件初始化时，会触发父组件的重新渲染。

父子组件同时更改

updated 不会保证所有的子组件也都一起被重绘

如果子组件异步更改响应式属性，并且父组件也更改响应式属性呢？
例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>

Vue.component('v-ul', {
			template: '\
		 <ul :style="{fontSize:size}">\
		   <li v-for="(item,index) in max" :key="index">{{item}}</li>\
		 </ul>\
	  ',
	  props: ['max'],
	  data: function(){
			 return {"size":"18px"}
	  },
	  beforeCreate() {
		 console.log('ul beforeCreate')
	  },
	  created() { 
		 console.log('ul created')
	  },
	  beforeMount() { 
		console.log('ul beforeMount')
	  },
	  mounted() { 
	    setTimeout(()=>
	  		this.size="12px"
		) 
		console.log('ul mounted')
	  },
	  beforeUpdate() {
		console.log('ul beforeUpdate')
	  },
	  updated(){
		console.log('ul updated',this.size)
	  }  
})

var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate')
  },
  created() { 
	 console.log('vm created')
  },
  beforeMount() {	
     console.log('vm beforeMount')
  },
  mounted() {
	this.ulcolor="red"
	console.log('vm mounted')
  },
  beforeUpdate() {
     console.log('vm beforeUpdate')
  },
  updated(){
	 console.log('vm updated',this.$children[0].$el.style.fontSize)
  }
})
</script>
</body>
</html>

在这里插入图片描述
可以看到，子组件的beforeUpdate、updated在父组件updated后面。所以父组件的updated钩子里面显示的还是子组件的重绘前的结果。

在updated中使用nextTick得到下次整个视图渲染结果

父子组件各自更改各自属性的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor}">
      </v-ul>
  </div>


<script>
var v_ul_config = Vue.extend({
			template: '\
		 <ul :style="{fontSize:size}">\
		   <li v-for="(item,index) in max" :key="index">{{item}}</li>\
		 </ul>\
	  ',
	  props: ['max'],
	  data: function(){
			 return {"size":"18px"}
	  },
	  beforeCreate() {
		 console.log('ul beforeCreate')
	  },
	  created() { 
		 console.log('ul created')
	  },
	  beforeMount() { 
		console.log('ul beforeMount')
	  },
	  mounted() { 
	    this.size="1px"
		console.log('ul mounted')
	  },
	  beforeUpdate() {
		console.log('ul beforeUpdate')
	  },
	  updated(){ 
	    console.log('ul updated',this.size)
	    this.size="12px"
	  }  
});

Vue.component('v-ul', v_ul_config)

var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark"
  },
  beforeCreate() { 
	 console.log('vm beforeCreate')
  },
  created() { 
	 console.log('vm created')
  },
  beforeMount() {	
     console.log('vm beforeMount')
  },
  mounted() {
	this.ulcolor = "red";
	console.log('vm mounted')
  },
  beforeUpdate() { 
     console.log('vm beforeUpdate')
  },
  updated(){
	 this.$nextTick(function () {
		console.log('vm updated nextTick',this.$children[0].$el.style.fontSize)
	 })  
	 console.log('vm updated',this.$children[0].$el.style.fontSize)
  }
})

</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到，不使用nextTick是无法得到子组件最新的渲染结果的。

响应式属性变化处理：mounted、beforeUpdate、updated、nextTick、watch的区别

对数据变化进行处理的方式针对对象哪些数据哪种变化处理时间处理方式限制
mountedVue实例所有响应式属性在初次渲染前的变化数据变化导致所关联的DOM初次渲染并挂载完成时
(不会保证所有的子组件也都一起渲染并被挂载)		初次渲染只有一次，
所以是针对初次渲染后的一次性处理		–
beforeUpdate、updatedVue实例所有响应式属性在初次渲染后、重新渲染前的变化数据变化导致所关联的DOM重新渲染前后
(不会保证所有的子组件也都一起被重新渲染)		重新渲染都会触发，
因此每次重新渲染都会处理，
所以是重新渲染前后的通用处理		避免更改响应式属性
nextTick整个视图整个视图所有Vue实例的响应式属性下一次整个视图渲染前的变化数据变化导致下一次整个视图的DOM渲染完成时下一次整个视图渲染后的一次性处理–
watchVue实例某个响应式属性每次变化数据变化后DOM渲染前处理业务逻辑，不能获取渲染后的DOM每次数据变化都会触发，
所以是针对某个响应式属性的通用处理		不能处理渲染后的DOM, 如想处理可以使用nextTick

深刻理解nextTick、watch和生命周期的关系

例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
      <v-ul :max="maxLen" :style="{color:ulcolor,fontSize:ulsize}">
      </v-ul>
  </div>


<script>
var v_ul_config = Vue.extend({
			template: '\
		 <ul :style="{fontSize:size}">\
		   <li v-for="(item,index) in max" :key="index">{{item}}</li>\
		 </ul>\
	  ',
	  props: ['max'],
	  data: function(){
			 return {"size":"18px"}
	  },
	  beforeCreate() {
		 console.log('ul beforeCreate')
	  },
	  created() { 
		 console.log('ul created')
	  },
	  beforeMount() { 
		console.log('ul beforeMount')
	  },
	  mounted() { 
		console.log('ul mounted')
	  },
	  beforeUpdate() {
		console.log('ul beforeUpdate')
	  },
	  updated(){ 
	    console.log('ul updated',this.size)
	  }  
});

Vue.component('v-ul', v_ul_config)

var vm = new Vue({
 el: '#app',
 data: {
    maxLen: 3,
	ulcolor: "dark",
	ulsize: "18px"
  },
  watch: {
    ulcolor: function (newColor, oldColor) {
	  console.log('========= watch start  ==========')
	  console.log('watch oldColor',oldColor)
	  console.log('watch newColor',newColor)
	  console.log('========= watch end =========')
    }
  },
  beforeCreate() { 
	 console.log('vm beforeCreate')
	 this.$nextTick(function () {
		console.log('vm beforeCreate nextTick',this.$children[0].$el.style.color)
	 })  
  },
  created() { 
	 this.ulcolor = "yellow"
	 console.log('vm created')
	 this.$nextTick(function () {
		console.log('vm created nextTick',this.$children[0].$el.style.color)
	 }) 
  },
  beforeMount() { 	
     console.log('vm beforeMount')
	 this.$nextTick(function () {
		console.log('vm beforeMount nextTick',this.$children[0].$el.style.color)
	}) 
  },
  mounted() {
	this.ulcolor = "green"
	this.$nextTick(function () {
		console.log('vm mounted nextTick, modify ulcolor to red...',this.$children[0].$el.style.color)
		this.ulcolor = "red"
	})
	setTimeout(()=>{
		this.ulcolor = "orange";
	})
	console.log('vm mounted')
  },
  beforeUpdate() { 
     console.log('vm beforeUpdate')
  },
  updated(){
	 this.$nextTick(function () {
		console.log('vm updated nextTick',this.$children[0].$el.style.color)
	 })  
	 console.log('vm updated',this.$children[0].$el.style.color)
	 this.ulcolor = "blue"
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述

原理

JS代码执行流程

执行代码的流程为：
先执行同步任务（同步宏任务)，再执行异步任务（异步宏任务)。

执行同步/异步任务的流程为：
先执行任务（宏任务）队列，再执行子任务（微任务）队列，最后浏览器UI接口渲染构成一个事件循环。

事件循环只能存在一个

一个页面只能存在一个事件循环，同步任务属于一个事件循环，异步任务属于一个新的事件循环(上一个事件循环结束）。

同步任务事件循环 -> 事件循环结束 -> 异步任务事件循环 -> 事件循环结束 -> 下一个异步任务事件循环 -> …

一个事件循环可以包含多个异步子任务队列/DOM更新循环/tick

一个事件循包含一个任务队列和零个或多个异步子任务队列/DOM更新循环/tick。 nextTick相当于在下一个异步子任务队列/DOM更新循环/tick要做的事

例子的运行逻辑

同步任务所属事件循环
--------------------------------------------------事件循环开始--------------------------------------------------

-------------同步任务队列-------------
同步任务队列，顺序执行任务

  1. beforeCreate
    console.log('vm beforeCreate')
  2. created
    this.ulcolor = "yellow"
    console.log('vm created')
  3. beforeMount
    console.log('vm beforeMount')
  4. 子组件beforeCreate、created、beforeMount、mounted
    console.log('ul beforeCreate')
    console.log('ul created')
    console.log('ul beforeMount')
    console.log('ul mounted')
  5. mounted
    this.ulcolor = "green"
    console.log('vm mounted')

beforeCreate 、created、beforeMount、mounted中的nextTick操作

  1. 调用nextTick => 回调函数作为异步子任务 => 转入nextTick的异步子任务队列
    beforeCreate ：console.log('vm beforeCreate nextTick',this.$children[0].$el.style.color)

  2. 此任务队列发生的响应式属性更新（一个任务队列watch只触发一次, mounted里面ulcolor数据变化: dark=>(created的yellow被mounted的green替换)=>green）=> DOM更新操作作为异步子任务 => 转入nextTick的异步子任务队列
    created：this.ulcolor = "yellow"
    mounted：this.ulcolor = "green"
    触发DOM更新异步子任务

  3. 调用nextTick => 回调函数作为异步子任务 => 转入nextTick的异步子任务队列
    created：console.log('vm created nextTick',this.$children[0].$el.style.color)

  4. 调用nextTick => 回调函数作为异步子任务 => 转入nextTick的异步子任务队列
    beforeMount ：console.log('vm beforeMount nextTick',this.$children[0].$el.style.color)

  5. 调用nextTick => 回调函数作为异步子任务 => 转入nextTick的异步子任务队列
    mounted：
    console.log('vm mounted nextTick, modify ulcolor to red...',this.$children[0].$el.style.color)
    this.ulcolor = "red"

-------------同步任务队列结束-------------


-------------第一次DOM 更新循环(tick，异步子任务队列)-------------
异步子任务队列，顺序执行子任务

  1. 异步子任务1： 执行nextTick 回调函数
    console.log('vm created nextTick',this.$children[0].$el.style.color)

  2. 异步子任务2：上次tick中mounted里面ulcolor数据变化: dark=>(created的yellow被mounted的green替换)=>green，DOM更新操作开始
    侦听器（watch）
    第一次重新渲染（beforeUpdate、updated）

  3. 异步子任务3： 执行nextTick 回调函数
    console.log('vm created nextTick',this.$children[0].$el.style.color)

  4. 异步子任务4： 执行nextTick 回调函数
    console.log('vm beforeMount nextTick',this.$children[0].$el.style.color)

  5. 异步子任务5： 执行nextTick 回调函数
    console.log('vm mounted nextTick, modify ulcolor to red...',this.$children[0].$el.style.color)

异步子任务2中的nextTick操作

  1. 此tick中调用nextTick => 回调函数作为异步子任务 => 转入nextTick的异步子任务队列
    console.log('vm updated nextTick',this.$children[0].$el.style.color)

  2. 此tick中发生的响应式属性更新（一个任务队列watch只触发一次, nextTick里面ulcolor数据变化:green=>(updated的blue被nextTick的red替换)=> red）=> DOM更新操作作为异步子任务 => 转入nextTick的异步子任务队列
    updated：this.ulcolor = "blue"
    nextTick：this.ulcolor = "red"
    触发DOM更新异步子任务

  3. 此tick中调用nextTick => 回调函数作为异步子任务 => 转入nextTick的异步子任务队列
    console.log('vm mounted nextTick, modify ulcolor to red...',this.$children[0].$el.style.color)
    -------------第一次DOM 更新循环结束 -------------


-------------第二次DOM 更新循环(tick，异步子任务队列)-------------
异步子任务队列，顺序执行子任务

  1. 异步子任务1： 执行nextTick 回调函数
    console.log('vm updated nextTick',this.$children[0].$el.style.color)

  2. 异步子任务2：上次tick中ulcolor数据变化:green =>(updated的blue被nextTick的red替换)=> red，DOM更新操作开始
    侦听器（watch）
    第二次重新渲染（beforeUpdate、updated）

  3. 异步子任务3：执行nextTick 回调函数
    console.log('vm mounted nextTick, modify ulcolor to red...',this.$children[0].$el.style.color)

异步子任务2的nextTick操作

  1. 此tick中发生的响应式属性更新（updated里面ulcolor数据变化:red => blue）=> DOM更新操作作为异步子任务
    => 转入nextTick的异步子任务队列
    updated：this.ulcolor = "blue"
    触发DOM更新异步子任务
    -------------第二次DOM 更新循环结束-------------


-------------第三次DOM 更新循环(tick，异步子任务队列)-------------
异步子任务队列，顺序执行子任务

  1. 异步子任务1：上次tick中updated里面ulcolor数据变化:red => blue，DOM更新操作开始
    侦听器（watch）
    第三次重新渲染（beforeUpdate、updated）

updated：this.ulcolor = "blue"响应式属性保持不变，所以不再产生新的异步子任务队列。
-------------第三次DOM 更新循环结束-------------

--------------------------任务和子任务全部执行完毕，UI渲染后此事件循环结束 。----------------



异步任务所属事件循环
--------------------------------------------------事件循环开始--------------------------------------------------

-------------异步任务队列------------------

异步任务队列，顺序执行任务

  1. setTimeout里面ulcolor数据变化:ulcolor数据变化:blue => orange
    this.ulcolor = "orange"

nextTick操作

  1. 发生响应式属性更新（setTimeout里面ulcolor数据变化: blue=>orange）=> DOM更新操作作为异步子任务 => 转入nextTick的异步子任务队列
    setTimeout：this.ulcolor = "orange"
    触发DOM更新异步子任务

-------------异步任务队列结束 ------------



-------------第四次DOM 更新循环(tick， 异步子任务队列)-------------
异步子任务队列，顺序执行子任务

  1. setTimeout里面ulcolor数据变化:blue => orange，DOM更新操作开始
    侦听器（watch）
    第四次重新渲染（beforeUpdate、updated）

nextTick操作

  1. 此tick中发生的响应式属性更新（updated里面ulcolor数据变化:ulcolor数据变化:orange => blue）=> DOM更新操作作为异步子任务 => 转入nextTick的异步子任务队列
    updated：this.ulcolor = "blue"
    触发DOM更新异步子任务
    -------------第四次DOM 更新循环结束 -------------


-------------第五次DOM 更新循环(tick， 异步子任务队列)-------------
异步子任务队列，顺序执行子任务

  1. 异步子任务1：上次tick中updated里面ulcolor数据变化:orange => blue，DOM更新操作开始
    侦听器（watch）
    第五次重新渲染（beforeUpdate、updated）

updated：this.ulcolor = "blue"响应式属性保持不变，所以不再产生新的异步子任务队列。
-------------第五次DOM 更新循环结束 -------------

--------------------------任务和子任务全部执行完毕，UI渲染后此事件循环结束 。----------------

本章节教程结束。

全部教程地址：Vue入门实战教程 | 寒于水学习网

vue生命周期实战系列：

vue生命周期实战（一）—— 实例创建

vue生命周期实战（二）——实例挂载

vue生命周期实战（三）—— 实例更新并深刻理解nextTick、watch和生命周期的关系

vue生命周期实战（四）——实例销毁

厚嘴猴
关注
专栏目录
Vue watch() 的用法和 nextTick的用法
exlinker的博客
04-11 1258
Vue watch的深度监听 watch监听有两种方式：普通监听、深度监听。 他们的区别是： 普通监听只能监听变量值的变化（如Boolean、Number、String等），不能监听数组和变量属性的改变。 写法上的区别： watch:{ // 普通的watch监听 a(val, oldVal){ console.log("a: "+val, oldVal); }, // 深度监听，可监听到对象、数组的变化 b:{
Vue生命周期--Vue实例创建过程详解
YY的博客
11-26 1367
Vue生命周期--Vue实例创建过程详解
watch+$nextTick配合使用
weixin_52797317的博客
04-23 1001
vue中用watch来监视data数据的变化，当被监视的数据发生变化watch中定义的相关方法便会被调用，同时watch中可以执行任意的异步操作。
vue3中watch和nextTick的区别和使用
m0_74545388的博客
07-02 465
最近在写项目的时候遇到一个问题在父组件中调API取后端的数据,然后将这些数据父传子放到我封装好的el-pagination中,自定义total等分页属性,如下图项目目录封装好的子组件父组件。
vue--nextTick使用好了,watch就可以少用了
qq_42750608的博客
10-30 1428
现实中,前端前辈们告诉我们少用watch,少用watch,但是我们基于时间紧张的问题,经常不能固守这个规定了,今天的最新发现,nextTick方法,致力于更新了某一个特定的属性值,完成DOM更新后,触发事件,也就是触发dom更新后会回调一个回调函数,有了它,可以替代watch的实时监控功能,减少程序的损耗 例如我们要删除数组的某个元素: methods:{ del(e) { this....
$nextTick+watch和swiper的配合使用(vue2)
前端如逆水行舟...
07-26 841
用this.$nextTick(()=>{swiper的js代码})，将其放入到监听事件中，数据一发生变化就等v-for遍历（即“下次dom更新后”）之后，再执行swiper的js代码。
【Vue3 从入门到实战 进阶式掌握完整知识体系】002-Vue语法基础：Vue中的应用和组件的基本部分解析、生命周期
訾博（ZiBo）的博客
06-17 514
文章目录二、Vue语法基础1、Vue中的应用和组件的基本部分代码运行结果2、理解Vue的生命周期函数*生命周期图代码运行结果关于模板Vue3的生命周期函数图Vue3全部的生命周期钩子与Vue2比较 二、Vue语法基础 1、Vue中的应用和组件的基本部分 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
Vue生命周期
05-18
### Vue生命周期详解 #### 一、生命周期概述 Vue.js 是一款流行的前端框架，它通过声明式的编程模型简化了用户界面的构建过程。Vue 的核心特性之一是它的生命周期机制，这为开发者提供了对组件不同阶段的控制能力...
09-Vue生命周期.md
03-31
此外，对于大厂面试而言，深入的了解Vue生命周期有助于展示候选人的技术深度，这对于确定应聘者的能力水平和职位级别有重要影响。因此，对于希望在前端领域求职的开发者来说，全面掌握Vue生命周期的相关知识是必须的...
Vue 生命周期选项：2.x 与 3.x 的全面解析及案例分享二
最新发布
前端基地
08-02 1118
这篇文章全方位地阐述了 Vue 生命周期选项的相关案例，涵盖了 2.x 和 3.x 两个版本。文章对各案例中的每一行代码都进行了详尽的解读，旨在引领读者能够更迅速地熟悉并理解相关代码。此外，文章还对 2.x 与 3.x 版本中销毁组件的方法进行了对比分析。通过这样的方式，让读者能够清晰地认识到什么是生命周期钩子，进而加深对 Vue 生命周期的理解和掌握。
vue中在哪个生命周期中dom被渲染_Vue生命周期说明
weixin_26884391的博客
01-12 3049
人是生而自由的，但却无往不在枷锁之中。自以为是其他一切人的主人，反比其他一切人更是奴隶。——卢梭复制代码生命周期图生命周期钩子说明beforeCreate(初始化界面前)在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。data 和 $el 都没有初始化，全部为 undefinedcreated(初始化界面后)实例已经创建完成之后被调用。...
vue watch+$nextTick界面更新渲染数据
weixin_43294560的博客
05-26 2947
$nextTick,在数据修改后,界面更新时立即调用回调的内容 watch,监测数据改变,数据改变后此时数据更新,但界面未更新 wathc+$nextTick,实现数据更新后,界面更新时重新渲染数据 watch:{ xx(value){ this.$nextTick(()=>{ 进行诸如拿到数据再创建实例等操作 }) } } ...
vue3生命周期
weixin_48456565的博客
03-02 118
vue3导入生命周期钩子的方式 import { onMounted, onUpdated, onUnmounted } from 'vue' import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue' export default { setup() {
框架技术Vue ---- watch监听、组件生命周期和数据共享、全局注册属性
a23452的博客
03-15 3463
Vue框架 内容管理watch侦听器基本使用 watch结点使用watch检测用户名是否可用immedidate选项---- watch的数据项变为对象deep配置项监控单个属性的变化；直接'obj.pro'计算属性和watch侦听器组件生命周期监听组件的不同时刻created mounted unmounted监听组件的更新updated组件主要生命周期函数 应用组件中所有的生命周期函数组件间数据共享父子组件之间的数据共享兄弟组件之间的数据共享 EventBus后代关系组件之间的数据共享父结点使用prov
Vue：生命周期函数的作用
yivisir的博客
08-09 2160
Vue：生命周期函数的作用 前言 Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 各函数的作用 beforeCreated(): 表示在实例被完全初始化之前调用该函数； created(): 此时Vue的数据和方法（data，methods）都已经初始化好了； 如果要操作data和methods，最早需要在这个函数中操作； created完成后就开
vue生命周期学习（watch跟computed）
qq_45217544的博客
07-16 1048
1、watch钩子函数监听数据的变化 watch 的一个特点是，最初绑定的时候是不会执行的（firstName的值在data定义时赋予的值），要等到 firstName 改变时才执行监听计算。 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el:
vue 生命周期钩子的理解 watch computed
weixin_30603633的博客
01-25 185
一 理解vue的生命周期，首先需要注意几个关键字 　　1. el :选择器 　　2. $el：对应选择器的template模板（html代码） 　　3. render：也是vue实例中的一项，其参数更接近vue解析器，按优先级，render参数 > vue实例对象中有template > 外部的HTML模板 后面两个也是将其编译成render函数 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值