vue3相关文档
文章平均质量分 61
vue3相关文档
亮学长
自律人生
展开
-
keep-alive包裹vue-router动态路由的问题
当组件被激活(即从缓存中取出并渲染)时触发 activated 钩子函数,当组件失活(即从 中移除时)时触发 deactivated 钩子函数。使用 keep-alive 包裹动态路由时, 渲染的组件会被缓存,并不会重复创建实例,因此其生命周期钩子只会在第一次渲染时触发一次。使用 key 属性为每个缓存的组件添加一个唯一的标识符。当 key 值改变时,缓存的组件会被销毁并重新创建实例,进而触发生命周期钩子。使用 key 值来强制重渲染缓存的组件时要注意,如果 key 值过于频繁地变化,可能会降低性能。原创 2023-04-20 16:51:11 · 381 阅读 · 0 评论 -
vue3如何处理标签嵌套的
源码中自带的todomvc.html代码 执行一下,代码很长就不贴了runtime-dom\src\nodeOps.ts 在setElementText函数内部第一行打上断点处理一个标签时,先处理内部孩子节点,等孩子节点处理完了,该标签也就处理完了,这里的孩子节点,也有孩子节点,存在嵌套,同样遵循一样的逻辑,深度优先,逐层处理...原创 2022-07-01 15:42:49 · 360 阅读 · 0 评论 -
探究vue3的setup和其他options
2、打断点在首次挂载组件时,执行setupComponent内的setupStatefulComponent执行了setup,且setup执行优先于beforeCreate,这就说明了,在setup内是不存在created和beforeCreate的钩子的执行callWithErrorHandling调用setup,给它的参数是[instance.props, setupContext],在createSetupContext函数内可以看到返回的参数对象是什么,这就解释了,setup(props,{slo原创 2022-07-01 15:27:13 · 646 阅读 · 0 评论 -
vue3的钩子函数分析
2、调用栈分析依次跳出断点可以发现出钩子函数的执行顺序 如下beforeCreate-> created->onMounted ->mounted->onBeforeUpdate ->beforeUpdate->onUpdated ->updated->onbeforeUnmount ->beforeUnmount->onUnmounted ->onMounted先来看看beforeCreate是在什么时候执行的,且beforeCreate 和 created之间都做了那些事情?如下图所知,before原创 2022-07-01 15:22:38 · 1323 阅读 · 0 评论 -
vue3中app.use(plugin)的原理
packages\runtime-core\src\apiCreateApp.ts文件内有下面代码vue-router插件,就是这样写的我们在main.js内去use触发源码中的use函数原创 2022-06-29 16:20:20 · 2297 阅读 · 0 评论 -
vue3的reactive原理
1、执行下面代码<script src="../../dist/vue.global.js"></script><div id="demo"> <h1> <header>{{a}}</header> </h1></div><script> const { createApp, toRefs, reactive} = Vue var app = createApp({原创 2022-04-25 08:43:33 · 1190 阅读 · 0 评论 -
vue3面试题
1、组件通信常用方式有一下8中原创 2022-06-27 09:11:39 · 11503 阅读 · 1 评论 -
vue3的vue-router原理
vue-router官网链接在main.js文件下,给挂载到实例上动态路由,在组件内部如何去监测路由变化vue-router基本实现vue-router开发源码mini-vue-router代码简单实现的mini-vue-router代码如下App.vuemain.jsrouter / index.jsrouter / router.jsrouter / RouterLink.jsrouter / RouterView.js...原创 2022-06-29 15:45:45 · 681 阅读 · 0 评论 -
vue3编译器原理
2.vue为什么需要编译器编译器是将一门语言转换另一门语言vue是声明式渲染编译器会将编译为函数( )前端程序员,更加喜欢用描述视图,开发效率高性能优化静态分析3.vue template 和 react jsx异同?异曲同工都是为了生成虚拟domjs、jsx、ts、tsx提高前端程序员视图开发效率jsx:babel转换工具将create函数的调用,最后转换为vdomtemplate:compile编译模板后生成render函数,在未来某个时间执行生成vdom原创 2022-06-22 11:34:19 · 503 阅读 · 0 评论 -
vue3更新流程分析
2.流程图ProcessOn原创 2022-06-22 10:11:26 · 570 阅读 · 0 评论 -
vue3的nextTick原理
2.打断点查找文件输入,在函数内部打上断点3.两个案例调用栈图如下原创 2022-06-21 14:35:31 · 1341 阅读 · 0 评论 -
vue3的ReativeEffect原理
执行`setupRenderEffect`原创 2022-06-20 11:08:47 · 560 阅读 · 0 评论 -
vue3的ref原理
2、打断点在执行setup函数时候,会处理ref函数,将数据处理为类的实例,当访问到了实例的value属性,就会触发相应的函数,trackRefValue和triggerRefValue,其中trackRefValue是收集依赖,并不是所有的触发get函数都会真的去收集依赖,只有在render中读取的才会收集,在setup函数内部访问到的就不会触发依赖,triggerRefValue是触发依赖,等到设置了新的值时,触发该函数,进一步触发副作用的schedule函数,进而触发componentUpdateF原创 2022-06-17 15:24:51 · 645 阅读 · 0 评论 -
vue3实战
vite基于浏览器原生ES imports的开发服务器,利用浏览器去解析imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随其随用同时不仅有vue文件支持,还搞定了热更新,而且热更新的速度不会随着模块增加而变慢使用vite创建vue项目 create-vite-app包npm init @vitejs/app <project-name>//可以选择创建vue项目 也可以创建react项目cd <project-name>npm install原创 2022-01-07 11:40:42 · 1864 阅读 · 0 评论 -
学习npm
$ npm view vue versions //'2.6.11[ '0.0.0', '0.6.0', '0.7.0', '0.7.1', '0.7.3', '0.7.4', '0.7.5', '0.7.6', '0.8.0', '0.8.1', '0.8.2', '0.8.3', '0.8.4', '0.8.6', '0.8.7...原创 2020-04-22 23:46:40 · 4106 阅读 · 2 评论 -
vue3源码分析
项目链接vue-pure-admin项目源码GitHub地址项目源码码云地址项目学习地址vue-pure-admin (opens new window)是一个免费开源的中后台模版。使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。安装的vscode插件定义组件import { h, defineComponent } from "vue";var IconifyIconOffline =原创 2023-11-23 13:33:19 · 2239 阅读 · 0 评论 -
Vue3编译器原理
Vue3编译器是什么将用户编写的 模板template 转换为 渲染函数render。为什么需要编译器前端程序员更加喜欢使用html格式去描述试图声明式渲染有利于性能优化下面就是直接编写渲染的过程,很显然不方便用户编写代码<script> const {createApp, h} = Vue createApp({ render() { return h(Vue.Fragment, [ h('h1', 'vue 编译器'),原创 2022-04-19 16:40:57 · 317 阅读 · 0 评论