vue入门之04-生命周期 数据共享
生命周期 & 数据共享
1. 组件的生命周期
1.1 生命周期 & 生命周期函数
生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
1.2 组件生命周期函数的分类
1.3 生命周期
<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: []}},watch: {},methods: {},// 一 创建阶段的第1个生命周期函数 一般无法操作beforeCreate() {},//二、 可以对data methods prop 进行操作created() {// created 生命周期函数，非常常用。// 经常在它里面，调用 methods 中的方法，请求服务器的数据。// 并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！this.initBookList()},// 三、 无实际意义beforeMount() {},// 四 、 如果要操作当前组件的 DOM，最早，只能在 mounted 阶段执行 mounted() {},// 五、beforeUpdate() {},// 六、当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中updated() {},// 七、beforeDestroy() {},//八、destroyed() {}
}
</script>
1.4 组件中主要的生命周期函数
1.5 组件中全部的生命周期函数
2 组件之间的数据共享
2.1 组件之间的关系
父子关系
兄弟关系
2.2 使用组件的三个步骤
通过 components 注册的是私有子组件
2.3 父子组件之间的数据共享
父子组件之间的数据共享又分为：
① 父 -> 子共享数据
② 子 -> 父共享数据
2.3.1 父组件向子组件共享数据
父组件向子组件共享数据需要使用自定义属性。示例代码如下：
自定义属性 : 即父组件可以通过
v-bind传递数值在子组件中用props接收数值
2.3.2 子组件向父组件共享数据
子组件向父组件共享数据使用自定义事件。示例代码如下：
自定义事件 : 子组件用$emit触发自定义事件 父组件用自定义事件来接收
numchange 是父组件中的触发事件
2.4 兄弟组件之间的数据共享
在vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。
EventBus 的使用步骤
① 创建 eventBus.js 模块，并向外共享一个Vue 的实例对象
② 在数据发送方，调用 bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件
③ 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件
注意
在新版本的3.0中可以使用vuex进行兄弟之间传值 vuex更好用 我的博客中也有关于vuex的介绍与使用
2.4 兄弟组件之间的数据共享(vue3)
（1）安装 mitt 依赖包
在项目中运行如下的命令，安装 mitt 依赖包：
npm install mitt@2.1.0
(2) 创建公共的 EventBus 模块
在项目中创建公共的 eventBus 模块如下：
(3) 在数据接收方自定义事件
在数据接收方，调用bus.on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件。示例代码如下：
(4) 在数据接发送方触发事件
在数据发送方，调用 bus.emit(‘事件名称’, 要发送的数据) 方法触发自定义事件。示例代码如下：
2.5 后代关系组件之间的数据共享
后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。
2.5.1 父节点通过 provide 共享数据
父节点的组件可以通过 provide 方法，对其子孙组件共享数据
2.5.2 子孙节点通过 inject 接收数据
子孙节点可以使用 inject 数组，接收父级节点向下共享的数据。示例代码如下：
2.5.3 父节点对外共享响应式的数据
父节点使用 provide 向下共享数据时，可以结合 computed 函数向下共享响应式的数据。示例代码如下：
2.5.4 子孙节点使用响应式的数据
如果父级节点共享的是响应式的数据，则子孙节点必须以 .value 的形式进行使用。示例代码如下：
3 ref引用
3.1 什么是 ref 引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。
3.2 使用 ref 引用 DOM 元素
如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：
3.3 使用 ref 引用组件实例
如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：
3.4 控制文本框和按钮的按需切换
通过布尔值inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下：
3.5 让文本框自动获得焦点
当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的
.focus() 方法即可。示例代码如下：
但是这么调用你会发现无法成功 原因是虽然设置了inputVisible是true ，但是还未渲染成功页面，文本框还未出现 所以会出错
使用3.6的方法可以解决
3.6 this.$nextTick(cb) 方法
组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
4 数组的几个方法
4.1 some
用这个可以停止 不会白白浪费性能
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}})
4.2 every
判断数组中全部元素的状态
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)
4.3 reduce
累加数组
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)
vue入门之04-生命周期 数据共享相关推荐
- day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...
- vue手机端回退_从外链回退到vue应用不触发生命周期、beforeRouterEnter等钩子函数的问题...
在iphoneX及以上版本从外链回退不触发事件,7P,7没发现这个bug 安卓上自测没有发现这个问题 最近做项目中发现了一个问题,iphoneX及以上版本从当前vue应用中跳转到外部链接然后在回退到v ...
- Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
- Vue 进阶系列丨生命周期
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
- Vue 进阶语法和生命周期
文章目录 Vue 进阶语法和生命周期 16.Vue:生命周期[了解] 17.Vue:computed计算属性 18.Vue:watch监控属性 Vue 进阶语法和生命周期 a. 每个 Vue 应用都是 ...
- vue函数如何调用其他函数?_从源码中学Vue（一）生命周期中的钩子函数的那点事儿...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) Vue作为当下前端最流行的框架之一,在国内占绝对的优势.所以接下来我们一起来学习它吧! 我不会像其它人 ...
- vue2.0生命周期数据共享
3.1 组件的生命周期 1.概念 (1)生命周期:是指一个组件从创建.运行.销毁的整个阶段,强调的是一个时间段 (2)生命周期函数:是由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序执行 ...
- 生命周期数据共享[父子-子父-兄弟]ref引用数组复习
目录 一.组件的生命周期& 生命周期函数 1. 生命周期 & 生命周期函数 2.组件生命周期函数的分类 3.生命周期图示[重要] 二.组件之间的数据共享 1. 组件之间的关系 2. 父 ...
- Vue（十）生命周期
Vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段 <script> window.οnlοad=function(){let vm = new Vue({el:'# ...
最新文章
- Docker环境配置指南！
- 沉痛哀悼！现代无线网络之父 Norman Abramson 辞世，享年 88 岁
- Go 采用 time.After 实现超时控制
- POJ 1469 匈牙利算法
- 一阶网络相应特性的研究_36、 用一阶系统描述的传感器,其动态响应特征的优劣也主要取决于时间常数τ,τ越大越好。( )...
- 计算机对油画的影响,现代电脑美术影响下的油画艺术创作
- java异步io_Java中的异步IO与异步请求处理
- mysql数据库连接不稳定_连接 MySQL 数据库失败频繁的原因探秘
- 使用U盘安装Fedora14 32bit操作系统(参考自www.osyunwei.com)
- java继承原理内存角度_Java编程的逻辑 (17) - 继承实现的基本原理
- 数据科学 IPython 笔记本 8.12 文本和注解
- Ubuntu-18.04.1安装QQ
- 学习指南：零基础java入门教程（入门篇）
- mysql五日均线代码_通达信均线源码,5日通达信均线公式源码
- html制作清明上河图
- Android App设计规范
- mikrotikROS路由配置L2TP
- MSN机器人 博客助手 for I-Favourite
- 细雨闲花-2007经典高考作文（绝对经典）
- FAI自动部署debian