vue的生命周期和组件传值

生命周期的意义

  • 允许使用者在程序的不同阶段,做不同的业务
  • vue是采用组件开发模式来进行项目开发–在vue开发中,所有的功能等都是组件化(每一个组件可以想象成一个积木的模块),然后通过组件来进行业务拼凑(使用积木的模块来构建一个好看的实体)
  • 可以更大化的实现代码的复用–提高项目开发效率,提升项目的可维护性
  • 组件是一个功能高内聚(组件的特性都应该有,比如按钮,可以有点击效果,用户可点击,也可以不让用户点击的功能),业务低耦合(用户点击了按钮要做什么事情)的一个模块
    • 那么每一个组件都有被展示出来,然后可能又被销毁–如果把组件设计为一个实例,那么组件就有从创建到销毁的一个过程,那么这个过程就是生命周期

生命周期的阶段划分:

  • 划分为四个阶段:创建,挂载,更新,卸载/销毁
  • 每一个阶段都分为之前之后,共8个生命周期
    • beforeCreate(){} 创建前-----几乎不用,没有具体业务执行,所以vue3取消了这个生命周期;
    • created(){} 创建后 ----表示vue组件实例对象构造完成,也就是数据已经绑定到vm层上;一个重要的生命周期,数据已经完成初始化,但是没有完成实例挂载
    • beforeMount(){} 挂载之前 ----无用的生命周期
    • mounted(){} 挂载后—已经完成挂载,那么页面渲染已经完成,所以赋值会导致二次渲染
    • beforeUpdate(){} 更新前—更新是指页面更新,不是数据更新,但是数据更新会触发页面更新
      • 问:那么数据更新也就是会触发更新生命周期,对不对?
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的常用方法总结 第一章 Vue核心知识讲解 5 第二节 引包、留坑、实例化 、插表达式{{}} 5 1. 引包 5 2. 留坑 5 3. 实例化 5 4. 插表达式{{ }} 5 第三节 熟悉及使用常用指令 5 1. 什么是指令 5 2. 常用的指令有哪些,及怎么使用这些指令 6 第四节 阐述vue单双向数据流及事件绑定 6 1. vue单向数据流绑定属性 v-bind: (属性) 简写 :(属性) 6 2. vue双向数据流 v-model 只作用于有value属性的元素 7 3. 事件绑定v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名" 8 4. 总结 8 第五节 过滤器 8 1、过滤器有全局过滤器和组件内的过滤器 应用 {{ msg | 过滤器名}} 8 2、 vue中的this是vue封装好给我们使用的,跟平常方法里面的this是不同的 9 第六节 数据监听watch(深度监听)计算属性computed 9 watch监听单个,computed监听多个 9 总结: 10 第二章 组件化开发知识介绍 11 第一节 组件化开发 11 1、 创建组件的两种方式 11 局部声明 11 2、组件类型(组件开发三步曲:声明、注册、使用 ) 11 第二节 slot插槽和ref、$parent (重点) 11 1、slot插槽 11 2、ref获取子组件实例 12 第三节 父子组件的通信 (核心) 13 1、父子 14 2、子父 14 第四节 非父子组件之间的通信 14 简介:建立Bus总线机制实施非父子组件通讯 14 3、回调函数写法 16 第五节 vue生命周期 17 1、需要频繁的创建和销毁组件 17 2、组件缓存 17 3、成对比较 17 第三章 Vue核心插件之路由模块 18 第一节 路由的跳转原理(哈希模式) 18 1、单页应用的路由模式有两种(哈希模式、history模式) 19 2、 哈希模式原理 19 3、建议的选择:(小D课堂课程) 19 第二节 安装和使用路由 19 第三节 路由的跳转 20 1、路由的跳转方式2种: 20 2、区别: 20 3、vue-router中的对象:$route $router 21 第四节 路由的参和取参 21 1. 查询参 21 2. 路由参数 21 3、js跳转路由参和标签参,路由相同而参数不同时页面不做刷新的问题 22 总结: 22 第五节 嵌套路由(Children) 23 第六节 路由守卫 23 第五章 Vue全家桶各部分核⼼知识详解 24 第1节 构建vue项⽬的利器—脚⼿架vue-cli3 24 1、安装vue-cli3 24 2、创建项⽬ 24 3、 vue.config.js ⼿动在根⽬录新建⼀个vue.config.js⽂件 24 第2节 ⽗⼦组件(参考第二章第2、3节) 25 第3节 非⽗⼦组件(参考第二章第4节) 25 1. 事件总线(参考第二章第4节) 25 2. $attrs / $listeners 25 3. Vuex (详见第5节) 25 第4节 玩转单⻚⾯应⽤的控制中⼼—vue-router(与第三章基本差不多) 26 梦学谷第137课ElementUI实现页面横向指示导航,比小D课堂的那种写法要好点 26 1、路由的基本配置 26 2、路由的跳转 26 3、动态路由 27 4、嵌套路由 27 5、导航守卫 27 6、路由懒加载 28 第5节 状态管理中⼼—vuex的基础⽤法(官方文档,非常好用) 28  State 28  Mutations 28  Actions 28  vuex⾥包含的基本参数 28  还有别的mapState这些很好用 29 import { mapState, mapMutations } from "vuex";(导入非默认成员) 29 其实是ES6语法,详见梦学谷89课 29 第6节 状态管理中⼼—vuex的⾼级⽤法 29  vuex中的计算属性—Getters 30  模块化概念—Modules 30
Vue 2和Vue 3中,组件的方式有一些差异。下面我将介绍Vue 2和Vue 3中常用的几种组件方式: Vue 2中的组件方式: 1. Props:通过在父组件中使用属性绑定的方式将数据递给子组件。父组件通过在子组件标签上绑定属性,并在子组件中通过props选项声明接收该属性。父组件可以在模板中直接使用子组件的属性。 2. 自定义事件:父组件可以通过`$emit`方法触发自定义事件,并递数据给子组件。子组件通过`$on`方法监听父组件触发的事件,并在事件处理函数中接收数据。 3. Vuex:Vuex是Vue的状态管理库,可以在全局共享数据。父组件可以将数据存储在Vuex的状态管理中,并在子组件中通过计算属性或直接从Vuex中获取数据。 Vue 3中的组件方式: 1. Props:与Vue 2相同,通过在父组件中使用属性绑定的方式将数据递给子组件。但是在Vue 3中,子组件需要使用`defineProps`来声明接收属性。 2. 自定义事件:与Vue 2相同,父组件可以通过`$emit`方法触发自定义事件,并递数据给子组件。子组件通过`$on`方法监听父组件触发的事件,并在事件处理函数中接收数据。 3. Provide/Inject:父组件通过provide选项提供数据,然后子组件通过inject选项注入数据。这样可以在整个组件树中共享数据,而不需要显式递。 需要注意的是,Vue 3中还引入了Composition API,通过`setup`函数来组织组件的逻辑。在`setup`函数中,可以使用`ref`和`reactive`等函数来创建响应式数据,并通过`props`参数接收父组件递的属性。 以上是Vue 2和Vue 3中常用的组件方式,根据具体需求和场景选择合适的方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值