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

最新推荐文章于 2024-03-29 04:52:25 发布

厚嘴猴

最新推荐文章于 2024-03-29 04:52:25 发布

阅读量512

点赞数

分类专栏： vue学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/jcyka/article/details/106328222

版权

vue学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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

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

生命周期图示 — Vue.js

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

本章节介绍实例创建阶段的生命周期钩子：beforeMount和mounted

beforeMount、mounted和beforeCreate、created的区别

beforeMount、mounted和beforeCreate、created主要区别在于是否能访问编译好的render函数。

生命周期钩子	区别
beforeCreate、created	不能访问this.$options.render(编译好的render函数)
beforeMount、mounted	能访问this.$options.render(编译好的render函数)

beforeMount和mounted的区别

mounted和它之前的生命周期钩子主要区别在于虚拟dom以及非异步子组件是否渲染并挂载。

生命周期钩子	区别
beforeCreate、created、beforeMount	虚拟dom以及非异步子组件都未初次渲染，也未挂载正因为根本就未渲染，所以在这些钩子中非异步更改响应式属性会影响初次渲染结果，注意，是初次渲染，并不是重新渲染，所以是不会触发beforeUpdate和updated钩子的
mounted	虚拟dom以及非异步子组件都已经初次渲染并挂载因为已初次渲染，所以在这个钩子中更改响应式属性，将重新渲染，会触发beforeUpdate和updated钩子

beforeMount和mounted的具体区别如下：

生命周期钩子	可获取的对象	常见应用场景
beforeMount	this.$root、this.$parent、this.$options data、computed、watch、methods中的数据和方法新增： this.$options.render(编译好的render函数)、this.$el（未渲染的dom元素）	在渲染前对编译好的render函数进行更改，以改变渲染结果
mounted	this.$root、this.$parent、this.$options data、computed、watch、methods中的数据和方法 this.$options.render(编译好的render函数)、this.$el（已渲染的dom元素）、新增： this.$refs(DOM 元素或子组件实例的引用对象）、this.$childrens(非异步子组件数组）	对渲染后的DOM进行操作

beforeMount应用

假设有个权限判断，针对页面上的test组件，如果有权限就显示，没权限则显示noRight组件，用于提示没有权限。

即若没有权限，将以下html

	  <test></test>
      <test></test>
      <test></test>

转换为

	  <noRight></noRight>
      <noRight></noRight>
      <noRight></noRight>

页面上test组件很多，如果要实现上述请求，只能用v-if组件不断地做判断：

	  <template v-if="hasRight"><test><test></template>
      <template v-if="!hasRight"><noRight></noRight></template>
      
      <template v-if="hasRight"><test><test></template>
      <template v-if="!hasRight"><noRight></noRight></template>
      
      <template v-if="hasRight"><test><test></template>
      <template v-if="!hasRight"><noRight></noRight></template>

每个test组件出现的地方都必须做判断。这种实现并不优雅，而且如果页面上test组件很多则很可能漏掉其中一两个。怎么解决呢？幸好在渲染前，还可以在beforeAmount钩子中做些处理：

<!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></title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
      <test></test>
      <test></test>
      <test></test>
  </div>


<script>
Vue.component('test', {
  template: '\
     <div>我是测试的子组件</div>\
  '
})
Vue.component('noRight', {
  template: '\
     <div>您无权限查看</div>\
  '
})

var vm = new Vue({
	el: '#app',
	data: {
	   hasRight: false
	},
	beforeMount: function() {
		if(!this.hasRight){
			var html = this.$el.outerHTML;
			var html2 = html.replace(new RegExp("<test></test>","gm"),"<noRight></noRight>");
			//将html字符串编译成render函数
			_render = Vue.compile(html2).render;
			//将render选项重新设置为重新编译好的render函数，从而改变渲染结果
			this.$options.render = _render;
		}
    }
})
</script>
</body>
</html>

mounted应用

以上面的例子为基础，将test组件的文字颜色改变下。代码：

<!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></title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
      <test ref="test1"></test>
      <test ref="test2"></test>
      <test ref="test3"></test>
  </div>


<script>
Vue.component('test', {
  template: '\
     <div>我是测试的子组件</div>\
  '
})

var vm = new Vue({
	el: '#app',
	mounted: function() {
		this.$refs.test1.$el.style.color = "red"
		this.$refs.test2.$el.style.color = 'yellow'
		this.$refs.test3.$el.style.color = 'green'
    }
})
</script>
</body>
</html>