day4 vue 学习笔记组件生命周期数据共享数组常用方法

严不纯

已于 2022-10-04 21:29:11 修改

阅读量1.1k

点赞数 1

文章标签： vue.js 前端

于 2022-09-27 21:40:37 首次发布

本文链接：https://blog.csdn.net/weixin_51715424/article/details/127079299

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

系列文章目录

day1学习vue2笔记 vue指令

day2 学习vue2 笔记过滤器侦听器计算属性 axios

day3 vue2 学习笔记 vue组件

day4 vue 学习笔记组件生命周期数据共享数组常用方法

day5 vue 笔记 axios 动态组件插槽自定义指令 ESLints

day6 vue 学习笔记 vue-router路由

文章目录

6、 this.$nextTick(cb)方法

前言

vue2 学习笔记

生命周期

数据共享

一、组件的生命周期

1、生命周期与什么周期函数

生命周期（Life Cycle）是指一个组件从创建-->运行-->销毁的整个阶段，强调的是一个时间段。

生命周期函数：是由 vue 框架提供的内置函数，会伴随这组件的生命周期，自动按次序执行。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

2、组件什么周期函数的分类

八个生命周期函数：

beforeCreate :组件创建之前；
created : 组件在内存中创建完成；
beforeMount : 组件将要渲染前；
mounted : 组件成功渲染完成；
beforeUpdate : 更新之前
update：更新
deforeDestroy : 生命周期结束前
destroyed:生命周期结束

当代码执行到 mounted 时deforeCreate 、created、beforeMout、mounted 也会执行。

3、生命周期图示

参考vue官网

Vue 实例 — Vue.js

在使用使用一个实例的时候就会 new Vue() 一个实例；

1、组件创建阶段常用的生命周期函数有：

created 函数：经常在其中调用 methods 中的函数来请求服务器的数据，并且请求到的数据保存到data中供 template 模板渲染使用；（操作 data,props,methods ）

mounted 函数：该函数是最早的的渲染好页面，需要操作DOM 中的元素最早只能在 mounted 中进行操作。（操作 DOM 元素）

在创建阶段所有创建阶段的生命周期函数只运行一遍

2、组件运行阶段

如果需要出发该阶段，只有 data 改变时才会出发；

1、deforeUpdate:将要根据变化后，最新的数据，重新渲染组件的模块结构

2、updata: 已经根据最新的数据，完成了组件的DOM 结构的重新渲染；

在该阶段时，最多执行 n 次，最少 0 次；

3、组件销毁阶段

当调用 vm.$destroy 方法时才会被调用；

1、deforeDestroy：将要销毁此组件，此时尚未销毁，组件还处于正常工作状态；

2、destroyed：组件已经被销毁，此组件在浏览器中对应的 DOM 结构已被完全移除。

只能执行一次；

二、组件之间的数据共享

1、组件之间的关系

在项目开发中，组件之间的最常见的关系分为两种：

父子关系
兄弟关系

如A B 则是父子关系； B C 则是兄弟关系。

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

父子组件之间的数据共享分为：

2.1 父 --》子共享数据

父组件向子组件共享数据需要使用自定义属性

子组件 Son.vue

<template>
    <div>
        <span>Son 组件</span>
        <span>父组件传值 msg  {{msg}} </span>
        <span>父组件传值 user  {{user}} </span>
    </div>

</template>

<script>
    export default {
        name: "Son",
        props:['msg','user'],
        data(){
            return{
                msg:this.msg,
                user:this.user,
            }
        },
    }
</script>

<style scoped>

</style>

父组件 Parent.vue

<template>
    <div>
        <span>Parent 组件</span>
        <hr>
        <Son :user="user_info" :msg="msg"></Son>
    </div>

</template>

<script>
    import Son from "./Son";
    export default {
        name: "Parent",
        components: {
            Son,
        },
        data(){
            return{
                msg:'获取成功',
                user_info:{
                    sex:'男',
                    user_name:"张三",
                }
            }
        },
    }
</script>

<style scoped>

</style>

msg 是传的是简单类型的值；将值复制一份进行传值；（当修改时，子父组件中的值不会被修改）

user_info 是对象，是复杂类型；在传值时传过去的是对象的引用；指向的是一个相同的内存地址；（当修改对象等复杂类型时则父子组件中的内容都会被更改）

2.2 子 --》父共享数据

子组件想父组件共享数据使用自定义事件。

<template>
    <div>
        <span>Son 组件</span>
        <span>父组件传值 msg  {{message}} </span>
        <br>
        <span>父组件传值 user  {{user}} </span>
        <br>
        <span>------------传递给父组件的内容-------------</span>
        <br>

        <span>{{role_info}}</span>
        <span>cont_Son ---- {{cont_Son}}</span>
        <button @click="add()">+1</button>
    </div>

</template>
<script>
    export default {
        name: "Son",
        props:['msg','user_info'],
        data(){
            return{
                message:this.msg,
                user:this.user_info,
                //将数据传递给 父组件
                role_info:{
                    role_name:"管理员",
                    role_state:'可用',
                },
                cont_Son:1,
            }
        },
        methods:{
            add(){
                //    自定义事件  role_info==》自定义事件名称
                this.$emit('numchang',this.cont_Son);
                this.$emit('role_info',this.role_info);
                this.cont_Son+=1;
            },
        },
    }
</script>

<style scoped>

</style>

<template>
    <div>
        <span>Parent 组件</span>

        <span>原始的msg  {{msg}}</span>
        <span>原始的 user  {{user_info}}</span>
        <hr>
        <Son :user_info="user_info" :msg="msg"
             @numchang="getNewCount"
             @role_info="getNewRoleInfo"></Son>
        <br>
        <span>-------------------------子组件向父组件---------------------</span>
        <br>
        <span>子组件想父组件传过来的值---》 {{parent_count}}</span>
        <span>子组件想父组件传过来的值---》 {{role_info}}</span>

    </div>

</template>

<script>
    import Son from "./Son";
    export default {
        name: "Parent",
        components: {
            Son,
        },
        data(){
            return{
                msg:'获取成功',
                user_info:{
                    sex:'男',
                    user_name:"张三",
                },
                //定义变量来接受子组件传过来的数据

                parent_count:1,
                role_info:{},
            }
        },
        methods:{ 
            // 通过  getNewCount 触发事件
            getNewCount(val){
                this.parent_count=val;
            },
            getNewRoleInfo(val){
                this.role_info=val;
            },

        },
    }
</script>

<style scoped>

</style>

2.3兄弟之间的数据的共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。

步骤：

1、创建 EventBus.js 模块，并向外共享一个 Vue 的实例对象；

2、在数据发送方，调用 bus.$emit('事件名称'，发送的数据) 方法触发自定义事件

3、在数据接收方，调用 bus.$on("事件名称",事件处理函数) 方法注册一个自定义事件

<!-- Left.vue -->
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <span>将 Left 中的数据 共享给  Right 中</span>
    <br>
    <span>传递的数据：{{msg}}</span>
    <button @click="semd">发送到 Right 组件</button>

  </div>
</template>
<script>
  import bus from "./EventBus.js"
  export default {
    data(){
      return{
        msg:'谁怕，一蓑烟雨任平生',
      }
    },
    methods:{
      semd(){
      //  通过  eventBus 实现发送数据
        bus.$emit('share',this.msg)
      },

    }
  }
</script>
<style lang="less" scoped>
</style>

// EventBus.js
import Vue from 'vue'
//共享数据
export default new Vue()

<!-- Right.vue  -->
<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <br>
    <span>-------接收Left 共享的数据-------------</span>
    <br>
    <span>{{msg}}</span>
  </div>
<!--  -->
</template>
<script>
  import bus from "./EventBus.js"

  export default {
    data(){
      return{
        msg: '',
      }
    },
    created() {
    //  2.为bus 绑定 自定义事件
      bus.$on('share',(res) =>{
        console.log("Right 触发了share",res);
        this.msg=res;
      })
    },
    methods:{
    },
  }
</script>
<style lang="less">
</style>

三、ref 引用

1、什么是 ref 引用

ref 用来辅助开发者在不依赖 jQuery 的情况下，获取 DOM 园所或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

步骤：

在需要操作的 DOM 元素起一个 ref 名称；
在需要使用的地方进行使用： this.$refs.ref名称即可获取

 <h1 ref="myRef"> ref 的简单使用</h1>
<button @click="print_this">打印 this</button>


 print_this(){
        this.$refs.myRef.style.color='red';
        console.log(this.$refs.myRef);
},

2、ref 引用页面上的组件实例

如果想要使用 ref 引用页面上的组件实例。

通过 ref 实现父组件修改子组件中的值：

<!-- Test.vue  -->
<template>
    <div class="test-container">
        <h3>Test.vue 组件</h3>
        <span>{{count}}</span>
        <button @click="add">test 中count +1</button>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data(){
            return{
                count:1,
            }
        },
        methods:{
            add(){
              this.count+=1;
            },
        },
    }
</script>

<style lang="less" scoped>
</style>

<!- 父组件中的 ref 使用-->

  <button  @click="testRef">重置 Test 中count 的值</button>

  <Test ref="myTest"></Test>

testRef(){
        console.log(this.$refs.myTest)
        this.$refs.myTest.count=0;
      },

3、使用ref 引用组件的实例

如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：

4、控制文本输入框和按钮的按需切换

通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下

5、让文本框自动获得焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的
.focus() 方法即可。示例代码如下

如果出现类似问题：

原因：由于页面来不及渲染出现的，使其代码往后延迟即可以执行 this.$nextTick(cd).

6、 this.$nextTick(cb)方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的
DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。不能用 updata 进行使用，请查看什么周期。

7、数组中的 some 方法

获取返回满足条件的内容；

终止 some 循环就 return true

this.arr.some((item,index)=>{
          if (item=="李四"){
            //终止  some  循环
            return true
       }
})

<!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>
		<script src="../../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<button @click="fun01">fun01</button>
			<button @click="fun02">fun02</button>
			
		</div>

	</body>
	
	<script>
		const cm = new Vue({
			el: '#app',
			data: {
				arr : ['小红', '你大红', '苏大强', '宝',"苏大强"],
			},
			methods: {
				fun01() {
						// forEach 循环一旦开始，无法在中间被停止
						var arrs = new Array()
						 this.arr.forEach((item, index) => {
							console.log('object')
							if (item === '苏大强') {
								console.log(index)
								arrs.push(item)
							}
							console.log("执行次数",index)
						})
						console.log(arrs)
					},
					fun02() {
						// 通过 some 实现
						var arrs = new Array()
						this.arr.some((item, index) => {
							console.log("执行次数",index)
							if (item === '苏大强') {
								console.log(index)
								arrs.push(item)
								// 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环
								return true
							}
						})
						console.log(arrs)
					},
	
			},
		})
	</script>

</html>

8、数组的 every 方法

判断数组中的每一项是否满足需求；

var result = arr.every(item => item.属性)

item => item.属性  表示判断条件

返回值是  true false

<!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>
		<script src="../../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<button @click="fun01">fun01</button>
		</div>
	</body>
	<script>
		const cm = new Vue({
			el: '#app',
			data: {
				arr: [{
						id: 1,
						name: '西瓜',
						state: true,
						num: 3,
					},
					{
						id: 2,
						name: '榴莲',
						state: true,
						num: 1,
					},
					{
						id: 3,
						name: '草莓',
						state: true,
						num: 2,
					},
				],
			},
			methods: {
				fun01() {
					// 需求：判断数组中，水果是否被全选了！
					var result = this.arr.every((item,index) => {
						console.log(index)
						if (item.num >= 1) {
							return true;
						}
					})
					// 返回 false true
					console.log(result)
				},
			},
		})
	</script>

</html>

9、数组的 reduce 方法

累加器

arr.reduce((累加的结果, 当前循环项) => { }, 初始值)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="fun01">fun01</button>
			<button @click="fun02">fun02</button>
		</div>

	</body>
	<script>
		const cm = new Vue({
			el: '#app',
			data: {
				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
					},
				],
			},
			methods: {
				fun01() {
					// 需求：把购物车数组中，已勾选的水果，总价累加起来！
					let amt = 0 // 总价
					this.arr.filter(item => item.state).forEach(item => {
						amt += item.price * item.count
					})

					console.log(amt)
				},
				fun02() {
// arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)
					const result = this.arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)
					console.log(result)
					// 获取 选中的
					var arrs =  this.arr.filter(item => item.state);
					var results = arrs.reduce((amt, item) => amt += item.price * item.count, 0);
					console.log(results)
					
					
				},
			},
		})
	</script>
</html>

10、数组的 forEach 方法

// 循环更改  list  中goods_state 的值 
this.list.forEach(item  => item.goods_state=v);

11、数组的 filter方法

filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

array.filter(function(currentValue,index,arr), thisValue);

filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。

1、filter() 不会对空数组进行检测；

2、filter() 不会改变原始数组。

四、自定义事件

this.$emit("自定义事件名称",传值内容)

使用

在其引用的自定义事件

<组件标签 @自定义事件名称="触发方法"></组件标签>

总结

1、生命周期

八个生命周期函数：

beforeCreate :组件创建之前；
created : 组件在内存中创建完成；
beforeMount : 组件将要渲染前；
mounted : 组件成功渲染完成；
beforeUpdate : 更新之前
update：更新
deforeDestroy : 生命周期结束前
destroyed:生命周期结束

2、数据共享

1、父 -------》子：自定义属性 props

2、子 -------》父：自定义事件： this.$emit('事件名称',需要传输的值)，@事件名称="函数名称"；通过函数名称 ( 获取到的值 ){}

3、兄弟组件之间共享数据： EventBus:

严不纯

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法

系列文章目录

文章目录

前言

一、组件的生命周期

1、生命周期与什么周期函数

2、组件什么周期函数的分类

3、生命周期图示

1、组件创建阶段 常用的生命周期函数有：

2、组件运行阶段

3、组件销毁阶段

二、组件之间的数据共享

1、组件之间的关系

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

2.1 父 --》 子 共享数据

2.2 子 --》 父 共享数据

2.3兄弟之间的数据的共享

三、ref 引用

1、什么是 ref 引用

2、ref 引用页面上的组件实例

3、使用ref 引用组件的实例

4、控制文本输入框和按钮的按需切换

5、让文本框自动获得焦点

6、 this.$nextTick(cb)方法

7、数组中的 some 方法

8、数组的 every 方法

9、数组的 reduce 方法

10、数组的 forEach 方法

11、数组的 filter方法

四、自定义事件

总结

1、生命周期

2、数据共享

day4 vue 学习笔记组件生命周期数据共享数组常用方法

1、组件创建阶段常用的生命周期函数有：

2.1 父 --》子共享数据

2.2 子 --》父共享数据