Vue-生命周期&数据共享-总结

最新推荐文章于 2024-10-18 17:49:11 发布

程序猿向前跑

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量2.1k

点赞数 2

分类专栏： Vue 文章标签： Vue生命周期组件通信 EventBus 数据共享数组方法

本文链接：https://blog.csdn.net/qq_46199553/article/details/120004513

版权

Vue 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

1. 生命周期 & 生命周期函数

生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

3. 组件生命周期函数的分类

在这里插入图片描述
4. 生命周期图示
可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：
https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

在这里插入图片描述

<template>
	<div class="test-container">
		<h3 id="myh3">Test.vue组件---{{books.length}}本图书</h3>
		<p id="pppp">message的值是：{{message}}</p>
		<button @click="message+='~'">修改message的值</button>
	</div>

</template>

<script>
	export default {
		props: ['info'],
		data() {
			return {
				message: 'hello vue.js',
				//定义的books数组，存储的图书的列表数据，默认为空数组
				books: []
			}
		},
		methods: {
			show() {
				console.log('调用了Test组件的show方法')
			},
			//使用ajax请求图书的数据
			initBookList() {
				const xhr = new XMLHttpRequest()
				xhr.addEventListener('load', () => {
					console.log(xhr.responseText)
					const result = JSON.parse(xhr.responseText)
					console.log(result)
					this.books = result.data
				})
				xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
				xhr.send()
			}

		},
		beforeCreate() {
			// console.log(this.info)
			// console.log(this.message)
			// console.log(this.show())
		},
		//发起ajax请求，实际开发经常使用
		created() {
			// console.log(this.info)
			// console.log(this.message)
			// this.show()
			this.initBookList()
			
		},
		beforeMount(){
			
		},
		//如果操作dom,在此执行
		mounted(){
			// console.log(this.$el)
			// const dom = document.querySelector('#myh3')
			// console.log(dom)
		},
		beforeUpdate(){
			
		},
		updated() {
			console.log(this.message)
			const dom=document.querySelector('#pppp')
			console.log(dom.innerHTML)
		},
		beforeDestroy() {
			console.log(this.message)
		}
	}
</script>

<style>
	.test-container {
		background-color: pink;
		height: 200px;
	}
</style>

在这里插入图片描述

1. 组件之间的关系

在项目开发中，组件之间的最常见的关系分为如下两种： ① 父子关系
② 兄弟关系
在这里插入图片描述

2. 父子组件之间的数据共享

父子组件之间的数据共享又分为：
① 父 -> 子共享数据
② 子 -> 父共享数据
父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。

2.1 父组件向子组件共享数据

在这里插入图片描述

2.2 子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。示例代码如下：
在这里插入图片描述

3. 兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。
在这里插入图片描述

EventBus 的使用步骤

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象
② 在数据发送方，调用 bus. $e m i t (^{'} 事件名称^{'}, 要发送的数据) 方法触发自定义事件 ③ 在数据接收方，调用 b u s .$ on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件

总结（直接点击图片）

请添加图片描述

数组some方法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    const arr = ['小红', '你大红', '苏大强', '宝']

    // forEach 循环一旦开始，无法在中间被停止
    /* arr.forEach((item, index) => {
      console.log('object')
      if (item === '苏大强') {
        console.log(index)
      }
    }) */

    /* arr.some((item, index) => {
      console.log('ok')
      if (item === '苏大强') {
        console.log(index)
        // 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环
        return true
      }
    }) */
  </script>
</body>

</html>

数组every方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [
      { id: 1, name: '西瓜', state: true },
      { id: 2, name: '榴莲', state: false },
      { id: 3, name: '草莓', state: true },
    ]

    // 需求：判断数组中，水果是否被全选了！
    const result = arr.every(item => item.state)
    console.log(result)
  </script>
</body>

</html>

数组reduce方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [
      { id: 1, name: '西瓜', state: true, price: 10, count: 1 },
      { id: 2, name: '榴莲', state: false, price: 80, count: 2 },
      { id: 3, name: '草莓', state: true, price: 20, count: 3 },
    ]

    // 需求：把购物车数组中，已勾选的水果，总价累加起来！
    /* let amt = 0 // 总价
        arr.filter(item => item.state).forEach(item => {
          amt += item.price * item.count
        })
    
        console.log(amt) */

    // arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)
    const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)

    console.log(result)
  </script>
</body>

</html>