前端
Vue执行流程及渲染解析(二)
紧接上回分解,咱继续分析vue是如何进行渲染的!
创建DOM节点
image.png
有了vnode后,vue还需要根据vnode来创建DOM节点。如果是首次渲染,那么vue会走创建的逻辑。如果是数据的更新导致的重新渲染,那么vue会走更新的逻辑。
首次渲染
因为是首次渲染,所以不存在先前老的vnode,因此无需进行比较。vue直接调用 createElm 方法创建DOM元
vue组件传值的12种方式
vue组件间的12种传值方式
Vue最常见的12种组件间的通讯方式
props
$emit
.sync
v-model
ref
$children / $parent
$attrs / $listeners
provide / inject
EventBus
Vuex
$root
slot
适合父子间通信:props、$emit、$ref、slot、$parent、$childre
React-Hooks之useImperativeHandler
1.什么是useImperativeHandle Hook?
useImperativeHandle可以让你在使用ref 时自定义暴露给父组件的实例值,我的理解就是不让外界随便对通过ref拿到的元素进行操作,maybe我们可以称之为“权限配置"
这里出现了ref,小单简单地回顾一下前几天学习的useRef,可以知道ref就是帮助我们获取某个元素而设定的。
But!!!!!我记得当时说过useRef
vuex和localstorage . cookie的区别
vuex是为了解决多组件之间的共享状态的一种状态管理模式, 强调集中式管理, 将所有的共享状态放在内存中, 读取速度快, 但是页面一刷新就恢复默认值了,
vuex的五大核心: state(存放数据的地方) , actions(发送异步请求), getters(类似于computed计算属性), mutations(更改状态的地方), modules(组件模块化) 。其中, 更改状态只能在mutat
第四节:React组件状态的State属性
1. State状态理解
关于state的理解
state 是组件对象中最重要的属性,值是对象(可以包含多个数据)
组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
state是组件实例的属性,函数组件没有实例,因为函数组件没有状态
state可以理解是组件自己的数据, props数据是外部传入,state数据就是组件自己的
2. State状态的使用
2.1
vue - 组件通信
1. props/$emit
适用范围: 适合父子组件之间, 组件层级嵌套太深, 使用该方法较为繁琐,不建议使用;
代码示例:
image.png
总结:
props中接收到的值可以直接展示,但不建议直接对齐修改;
如果父组件向子组件传递的值是通过接口获取的, 可能会存在延迟的情况;
2. provide/inject
适用范围: 适用于多层次组件嵌套,通过provi