1.ref作用:
放到 dom 节点上 >> 获取原生 dom
组件身上 >> 获取组件实例 >> 可以获取组件内部所有的方法和数据
2. vue组件通信?
父传子
在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值。
⼦传父
首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了
⾮⽗⼦组件通信
通过中央事件总线,我们也称之为eventBus,在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫b u s 传 数 据 的 时 候 用 t h i s . bus 传数据的时候用this.bus传数据的时候用this.bus.e m i t 传 在 要 接 受 数 据 的 子 组 件 在 c r e a t e d 钩 子 函 数 中 用 emit传 在要接受数据的子组件 在 created钩子函数中 用emit传在要接受数据的子组件在created钩子函数中用on 方法接收
3.生命周期:
vue:从创建vue对象到销毁vue对象的过程
钩子函数:
vue框架中内置函数,在vue生命周期的不同阶段自动执行
初始化
beforeCreate
created
挂载
beforeMount
mounted
更新
beforeUpdate
updated
销毁
beforeDestroy
destroyed
统称:生命周期回调函数、生命周期函数、生命周期钩子
new Vue({
beforeCreate,
data,methods
created
el
模板虚拟dom渲染真实dom
beforeMount 执行对应的真实dom
el
模板中数据从虚拟dom渲染为真实dom
mounted 挂载完成
})
4.声明周期划分四个
1- 初始化
beforeCreate
created
过程:
1- new Vue()
2- 初始化事件与生命周期函数
3- beforeCreate:立即执行函数,不能操作data 与 methods
4- vue内部添加data 或者 methods
5- created 立即执行函数, 可以访问 data,methods
6- 开始编译,是否有el选项 el选项挂载到哪里
6.1- 没有调用$mount
6.2- 有 是否有模板
2- 挂载
beforeMount
mounted
过程:
1- 有 模板 编译模板template 返回render渲染函数
2- 没有 编译el选项对应的模板
3- 虚拟dom渲染为真实dom -- 准备工作 html结构
4- beforeMount 立即执行
5- 将虚拟dom挂载到真实dom -- 数据
6- 挂载完毕 Mounted 立即执行
3- 更新
beforeUpdate
updated
1- 当data数据被更新、修改时 触发钩子函数 beforeUpdate 此阶段获取不到更新的真实dom
2- 虚拟dom 重新渲染到真实dom
3- 触发钩子函数 updated
4- 当data数据再次发生改变时 ,重复执行此操作
4- 销毁
beforeDestroy
destroyed
1- 当$destroy 触发时 (比如组件的dom被移除)
2- beforeDestroy 被触发
3- 拆卸数据监视器 、 子组件 和事件侦听器
4- 当实例销毁后 触发destroyed
面试题:
页面第一次加载时会触发几个钩子
beforeCreate created beforeMount mounted
dom渲染在哪个周期完成?
mounted中完成
5.五.vuex的五个核心
1. state:存放状态(全局状态数据) 必填项
2. mutations:对于 state 成员进行同步修改操作(也可以支持异步操作)
3.getters:获取 state 中的数据,类似于组件中的计算属性
4. actions:进行异步操作,异步得到结果后通知 mutation 修改 state 成员
5. modules:模块化状态管理,多状态文件管理时使用,开发项目时多为多模块项目
在多模块 vuex 中会有配置namespaced:true开启命名空间
6.vuex优点
1. 能够在 vuex 中集中管理共享的数据,便于开发和后期进行维护
2. 能够高效的实现组件之间的数据共享,提高开发效率
3. 存储在 vuex 中的数据是响应式的,当数据发生改变时,页面中的视图也会同步更新
4.vuex中的数据操作可以在开发阶段通过开发调试工具来进行追踪,便于开发
简单来说,vuex 就是为了实现组件间通信的。使用 vuex 的好处:可以跨层级进行通信;vuex 中的所有操作都有记录;vuex 独立于组件系统,是专门用来管理数据的框架。