父子组件的生命周期
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
兄弟组件的生命周期
beforeCreate 创建前状态--->>> 父组件
created 创建完毕状态--->>父组件
beforeMount 挂载前状态--->>>父组件
beforeCreate 创建前状态--->>> 兄弟组件A
created 创建完毕状态--->>兄弟组件A
beforeMount 挂载前状态--->>>兄弟组件A
beforeCreate 创建前状态--->>> 兄弟组件B
created 创建完毕状态--->>兄弟组件B
beforeMount 挂载前状态--->>>兄弟组件B
mounted 挂载完毕状态--->>> 兄弟组件A
mounted 挂载完毕状态--->>> 兄弟组件B
mounted 挂载完毕状态--->>> 父组件
beforeDestroy 组件销毁前状态--->>> 父组件
beforeDestroy 组件销毁前状态--->>> 兄弟组件A
destroyed 组件销毁后状态--->>> 兄弟组件A
beforeDestroy 组件销毁前状态--->>> 兄弟组件B
destroyed 组件销毁后状态--->>> 兄弟组件B
destroyed 组件销毁后状态--->>> 父组件
$nextTick
是Vue提供的一个全局API,是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM;
2. Vue在更新DOM时是异步执行的。只要侦听到数据变化,Vue将开启1个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列中-次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。nextTick方法会在队列中加入一个回调函数,确保该函数在前面的dom操作完成后才调用;
3. 比如,我在干什么的时候就会使用nextTick,传一个回调函数进去,在里面执行dom操作即可;
4. 我也有简单了解nextTick实现,它会在callbacks里面加入我们传入的函数,然后用timerFunc异步方式调用它们,首选的异步方式会是Promise。这让我明白了为什么可以在nextTick中看到dom操作结果。
在下次DOM更新循环结束之后执行延迟回调,再修改数据之后立即调用nextTick来获取更新后的Dom,netxTIck主要是使用了宏任务和微任务,根据执行环境分别采用Promise,mustationObserver,setImmediate,如果以上都不行,会采用setTImeout定义一个异步方法,多次调用nextTick会将方法存入队列中,通过这个异步方法来清空当前队列。
$set
给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到.
官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,
因为 Vue 无法探测普通的新增属性
(比如 this.myObject.newProperty = ‘hi’)
这个好懂
数据双向绑定原理
https://v2.cn.vuejs.org/v2/guide/reactivity.html
官网好理解
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。1、需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上setter 和getter,这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化
2、compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做的事情是: 3.1)在自身实例化时往属性订阅器(dep)里面添加自己 3.2)自身必须有一个 update()方法 3.3)待属性变动 dep.notice()通知时,能调用自身的 update()方法,并触发Compile 中绑定的回调,则功成身退。 4、MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通Observer 来监听自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用Watcher 搭起Observer 和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) ->数据model 变更的双向绑定效果
v2和v3区别
vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI 对数据代理。
相比于vue2.x,使用proxy的优势如下:
defineProperty只能监听某个属性,不能对全对象监听
可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
Vue3支持碎片(Fragments)
就是说在组件可以拥有多个根节点。
vue2采用选项类型API,而vue3采用 合成型API。
代码更加的简便整洁
生命周期
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
路由相关
传参方式
https://blog.csdn.net/qq_42696432/article/details/125400186
一、router-link路由导航方式传参
父组件:<router-link to="/跳转到的路径/传入的参数"></router-link>
子组件:this.$route.params.content接受父组件传递过来的参数
二、调用$router.push实现路由传参
三、通过路由属性name匹配路由,再根据params传递参数
四、通过query来传递参数
编程式导航的使用方法以及常用的方法
1、路由跳转:this.$router.push()
2、路由替换:this.$router.replace()
3、后退:this.$router.back()
4、前进:this.$router.forward()