vue3
文章平均质量分 87
尤雨东
了解真相,你才能获得真正的自由!
展开
-
玩转vue面试题系列3 结合源码分析面试题
文章目录7. `Vue.mixin`的使用场景和原理8. `Vue`组件data为什么必须是个函数?9. `nextTick`在哪里使用?使用原理?10. `computed`和`watch`的区别11. `Vue.set`方法是如何实现的12. `Vue`为什么需要虚拟dom13. `Vue`中`diff`算法原理14. 既然`Vue`通过数据劫持可以精准探测数据变化,为什么还需要虚拟dom进行`diff`检测差异15. 请说明`Vue`中key的作用和其原理,谈谈你对它的理解上文: 玩转Vue面试题系原创 2022-04-22 19:32:21 · 1771 阅读 · 0 评论 -
玩转Vue面试题系列结合源码分析(2)
文章目录`Vue`中如何检测数组变化?`Vue`中如何进行依赖收集?如何理解`vue`中模板编译原理`Vue`生命周期钩子是如何实现的生命周期的价值`Vue`的生命周期方法有哪些?一般在哪一步发送请求及其原因上文:vue面试题及其结合源码分析Vue中如何检测数组变化?vue中检测数组的变化并没有使用defineProperty,因为修改索引的情况不多(且直接使用defineProperty会浪费大量性能,如果数组一万项,我们需要拦截一万次?)所以在vue中是重写数组的变异方法来实现的响应式(函数劫持)原创 2022-04-20 23:09:18 · 968 阅读 · 0 评论 -
vue面试题及其结合源码分析之请说一下 vue响应式数据的理解
Vue面试题结合源码请说一下 vue响应式数据的理解Vue中如何检测数组变化?Vue中如何进行依赖收集?如何理解Vue中的模板编译原理Vue生命周期钩子是如何实现的Vue的生命周期方法有哪些?一般在哪一步发送请求及其原因Vue.mixin的使用场景和原理Vue组件data为什么必须是个函数?nextTick在哪里使用?使用原理?computed和watch的区别Vue.set方法是如何实现的Vue为什么需要虚拟domVue中diff算法原理既然Vue通过数据劫持可以精准探测数原创 2022-04-19 23:48:39 · 695 阅读 · 0 评论 -
搭建vue源码的阅读环境
源码阅读安装源码依赖 npm installnpm run dev是否可以打包成功代码结构:bechmarks:该目录是做性能测试的dist:最终打包的结果都放到了该目录examples:官方案例flow:类型检测(vue2使用,类似于ts,但是没有ts好用)packages:放的都是一些源代码包,模块。(vue源码中包含了weex)scripts:所有打包的脚本都放在这里scr:源代码目录scr目录:compiler:模板编译core:vue2核心代码包platfor原创 2022-04-18 16:59:08 · 626 阅读 · 0 评论 -
mini-vue之组件的实现和渲染流程 以及局部和全局组件建立的联系
实现组件Vue中,一般一个项目只有一个根组件,也就是 new Vue产生的app。但是一个页面不可能只由一个组件构成,很明显我们需要实现自定义组件。vue中提供了两种自定义组件的方式:全局组件局部组件组件的使用流程:在任意一个组件中,都可以使用其他组件。当我们在一个组件中使用其他组件的时候,会先去组件内部的局部组件中找是否定义过该组件,如果定义了,则直接使用该局部组件;如果没有定义局部组件,则去全局组件中寻找(和js中的原型,原型链很像了)。所以vue内部很可能也是利用类似于继承的这种模型原创 2022-04-18 14:16:32 · 618 阅读 · 0 评论 -
vue的diff算法是如何实现的
diff算法diff算法:在之前的更新中,每次数据更新,在更新视图时,都是完全产生新的虚拟节点,通过新的虚拟节点生成真实节点,用新生成的真实节点替换所有的老节点。这种方法在页面元素很少的情况下性能销毁倒是无所谓,但是在页面元素特别多情况下,很明显是消耗很大性能的。哪怕我只是修改了一个dom的文本内容,也都需要重新生成一遍所有节点。(因为现在只有一个组件)第一次渲染的时候,我们会产生虚拟节点,第二次更新我们也会调用render方法产生新的虚拟节点,我们需要对比两次的vnode,找到需要更新的部分进行更原创 2022-04-17 17:31:55 · 1019 阅读 · 0 评论 -
实现mini-vue之 computed,watch ,数组响应式的实现
computed续上文—:有关vue源码的简单实现 实现一个属于自己的min-vue本文实现:computedwatcharray的响应式劫持计算属性:计算属性:依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性。而且在默认情况下,计算属性不会立刻执行,而是在用户取值的时候才会执行。计算属性使用的两种方式:computed: { /** * 计算属性:依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性原创 2022-04-16 20:39:53 · 969 阅读 · 0 评论 -
有关vue源码的简单实现 实现一个属于自己的min-vue
vue-study自己实现的mini-vue仓库建议克隆代码观看,效果更佳。实现了Vue实现了响应式数据实现了模板编译实现了ast转renderrender执行生成虚拟dom虚拟dom转真实dom渲染页面响应式数据和页面渲染结合 数据改变可自动更新视图实现同步更新数据,异步更新视图优雅降级实现了mixin,目前只支持生命周期的合并代码中注释很多,觉得不习惯的可以一边看一边删除多余的注释。vue的常见源码实现rollup环境搭建安装rollup及其插件npm i原创 2022-04-15 22:20:32 · 1047 阅读 · 0 评论 -
webpack5的新特性 模块资源asset 打包图片资源的坑
webpack在webpack5出来了资源模块以后,可以替代以前的 file-loader,url-loader,raw-loader等。当我们在使用file-loader等处理图片等资源的时候,导入资源时:如果采用的是cmd规范,也就是require(‘资源’)的时候,发现是需要取出default属性的值,才是真正的资源内容。(es module没有这问题)。而使用webpack5的资源模块新特性处理图片等资源的时候,如果采用cmd规范,导入的文件资源是不需要获取default的内容,直接requi原创 2022-03-22 17:37:13 · 1510 阅读 · 0 评论 -
vue3.x路由跳转useRouter执行后undefined问题 setup
useRouter执行一定要放在setup方法内的顶部或者其他位置,不能放在下面setup的函数里面执行(方法内定义的其他函数),否则作用域改变useRouter执行是undefined。import { useRouter } from 'vue-router'; // 1. 获取 router const router = useRouter(); // 2. 调用router 的方法 function toPage(){ router.push("/about"原创 2022-02-12 13:33:34 · 3601 阅读 · 0 评论 -
vue2~3项目中,一次性导入ant-design-vue组件库和element(plus)UI组件库所有的icon图标的方法
导入方式在官网提供的方式中,都是用一个导入一个,这里提供一个一次性导入所有图标的方式,注册为全局组件。这样就不需要慢慢导入了。//导入所有图标库import * as Icons from "@ant-design/icons-vue";const app = createApp(App);// 全局使用图标const icons = Icons;for(const i in icons){ app.component(i,icons[i]);}...原创 2021-09-04 15:06:54 · 2934 阅读 · 1 评论 -
Vue3进阶--Vuex4.x的状态管理篇
文章目录笔记Vuex的状态管理什么是状态管理复杂的状态管理Vuex的状态管理Vuex的安装Store创建Store组件中使用store简单的使用store文件store的注册简单计数器的实现单一状态树组件获取状态在setup中使用mapStateuseState自封装函数gettersgetters的基本使用getters第二个参数getters的返回函数mapGetters的辅助函数MutationMutation基本使用Mutation携带数据Mutation常量类型mapMutations辅助函数mu原创 2021-09-04 10:11:37 · 1097 阅读 · 1 评论 -
Vue-Router4.x必知必会--万字肝文
文章目录Vue-router什么是路由认识前端路由后端路由阶段前后端分离阶段URL的hashHTML5的HistoryHTML5的History测试pushStatevue-router认识vue-router路由的使用步骤路由的基本使用流程路由的默认路径history模式router-linkreplaceactive-class、exact-active-class路由懒加载打包效果分析路由的其他属性动态路由动态路由基本匹配获取动态路由的值templatecreatedsetup匹配多个参数NotFou原创 2021-08-31 19:39:22 · 2054 阅读 · 0 评论 -
vue3源码学习(2)--手写vue2/vue3响应式系统的简单实现-以及二者数据劫持的区别
文章目录依赖收集系统数据劫持响应式系统Vue2实现响应式系统Vue3实现响应式数据的测试为什么Vue3选择Proxy呢?框架外层API设计测试续上文:Vue3源码学习之旅(1)–自己实现一个简单的渲染系统-render/h/patch函数依赖收集系统// 收集依赖/** * 收集依赖的类 */class Dep { constructor() { // 发布订阅模式 // 订阅者 将其都加入进来 this.subscribers = new Set(); }原创 2021-08-26 11:46:07 · 273 阅读 · 2 评论 -
Vue3源码学习之旅(1)--自己实现一个简单的渲染系统-render/h/patch函数
文章目录Vue3源码学习真实的DOM渲染虚拟DOM的优势虚拟DOM的渲染过程三大核心系统三大系统协同工作实现Mini-Vue渲染系统实现h函数 – 生成VNodeMount函数 – 挂载VNodePatch函数 – 对比两个VNode测试效果Vue3源码学习真实的DOM渲染我们传统的前端开发中,我们是编写自己的HTML,最终被渲染到浏览器上的,那么它是什么样的过程呢?虚拟DOM的优势目前框架都会引入虚拟DOM来对真实的DOM进行抽象,这样做有很多的好处:首先是可以对真实的元素节点进行抽象,抽象原创 2021-08-25 22:24:36 · 508 阅读 · 0 评论 -
Vue3学习之旅--Vue3高级语法补充-自定义指令,vue插件,Teleport......
文章目录Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令认识Teleport(vue3)和组件结合使用多个teleport认识Vue插件插件的编写方式对象类型函数类型vue3笔记vue3学习之旅–邂逅vue3-了解认识Vue3vue3学习之旅–邂逅vue3-了解认识Vue3(二)Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段原创 2021-08-22 23:33:36 · 822 阅读 · 0 评论 -
Vue3学习之旅--Composition API--高级篇--render和h函数以及jsx的使用
文章目录Composition API(三) 及高级语法补充生命周期钩子Provide函数Inject函数数据的响应式修改响应式Propertyscript setup实验性特性setup顶层写法认识h函数h()函数 如何使用呢?h函数的基本使用h函数计数器案例1. render函数实现2. setup函数实现函数组件和插槽的使用jsx的babel配置jsx的基本使用和计数器案例vue3笔记vue3学习之旅–邂逅vue3-了解认识Vue3vue3学习之旅–邂逅vue3-了解认识Vue3(二)Vue3原创 2021-08-21 22:54:29 · 4127 阅读 · 3 评论 -
Vue3学习之旅--Composition-API-进阶篇
文章目录Vue3-Composition-API(二)Reactive-APIReactive判断的APItoRefstoRefref其他的APIcustomRefcomputed侦听数据的变化watchEffectwatchEffect的停止侦听watchEffect清除副作用setup中使用refwatchEffect的执行时机调整watchEffect的执行时机Watch的使用侦听单个数据源侦听多个数据源侦听响应式对象watch的选项vue3笔记vue3学习之旅–邂逅vue3-了解认识Vue3v原创 2021-08-19 22:12:17 · 551 阅读 · 2 评论 -
Vue3学习之旅--Composition-API-入门篇
文章目录Vue3-Composition-API(一)前置补充认识MixinMixin的基本使用Mixin的合并规则全局混入MixinextendsOptions API的弊端认识Composition APIsetup函数的参数setup函数的返回值setup不可以使用thisReactive APIRef API(尤大大推荐使用)Ref自动解包认识readonlyreadonly的使用readonly的应用vue3笔记vue3学习之旅–邂逅vue3-了解认识Vue3vue3学习之旅–邂逅vue3-原创 2021-08-17 18:13:09 · 685 阅读 · 3 评论 -
Vue3学习之旅-Vue3过渡&动画实现
Vue3过渡&动画实现动画认识动画在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验:React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group;Vue中为我们提供一些内置组件和对应的API来完成动画,利用它们我们可以方便的实现过渡动画效果;我们来看一个案例:Hello World的显示和隐藏;通过下面的代码实现,是不会有任何动画效果的;没有动画的情况下原创 2021-08-14 11:56:48 · 2445 阅读 · 6 评论 -
Vue3学习之旅-Vue3组件化开发(三)-动态/异步组件-vue3生命周期-组件的v-model
文章目录Vue3组件化开发(三)-动态/异步组件-vue3生命周期切换组件案例v-if实现动态组件实现动态组件动态组件的传值Keep-alive认识keep-alivekeep-alive属性缓存组件的生命周期Webpack5打包Webpack的代码分包异步组件Vue中实现异步组件工厂函数类型一的写法异步组件对象类型写法异步组件和SuspenseSuspense$引用元素和组件$refs的使用parent和parent和parent和root$el生命周期认识生命周期生命周期的流程组件的v-model组件v原创 2021-08-12 15:37:01 · 807 阅读 · 0 评论 -
Vue3学习之旅--Vue3组件化开发(二)-非父子组件通信及组件插槽--细节太多建议反复观看
文章目录Vue3组件化开发(二)-非父子组件通信及插槽的使用非父子组件的通信Provide和Inject概述Provide和Inject基本使用Provide和Inject函数的写法对象类型的写法处理响应式数据全局事件总线mitt库使用事件总线工具Mitt的事件取消组件插槽Slot认识插槽Slot如何使用插槽slot?插槽的基本使用基本使用插槽的默认内容多个插槽的效果具名插槽的使用动态插槽名具名插槽使用的时候缩写渲染作用域认识作用域插槽独占默认插槽的缩写默认插槽和具名插槽混合vue3笔记vue3学习之旅原创 2021-08-10 14:01:12 · 494 阅读 · 0 评论 -
Vue3学习之旅-之vue3组件化(一)--->父子组件通信
文章目录Vue3组件化(一)-父子组件通信组件的嵌套认识组件的嵌套组件的拆分组件的通信组件的通信父子组件之间通信的方式父组件传递给子组件Props的数组用法Props的对象用法细节一:type类型细节二:对象类型的其他写法细节三:Prop 的大小写命名非Prop的Attribute禁用Attribute继承和多根节点子组件传递给父组件子组件传递给父组件自定义事件的流程自定义事件的参数和验证vue3笔记vue3学习之旅–邂逅vue3-了解认识Vue3vue3学习之旅–邂逅vue3-了解认识Vue3(二)原创 2021-08-08 09:58:20 · 1672 阅读 · 3 评论 -
vue3学习之旅-Vue-CLI及其原理&尤大大新宠Vite-下一代前端开发构建工具Vite:拿来吧你!
文章目录Vue-CLI和ViteVue-CLIVue CLI脚手架Vue CLI 安装和使用安装Vue CLI(4.x)升级Vue CLI脚手架的使用vue create 项目的过程项目的目录结构配置详解适配浏览器的配置git忽略文件babel配置文件vue-cli源码Vite认识Vite什么是viteVite的构造vite前景浏览器原生支持模块化lodash-es的使用弊端Vite的安装和使用vite对第三方的支持1. Vite对css的支持2. Vite对TypeScript的支持3. Vite对vue原创 2021-08-04 16:50:14 · 1377 阅读 · 8 评论 -
使用vite报错vite events.js:352 throw er; // Unhandled ‘error‘ event
> vite events.js:352 throw er; // Unhandled ‘error’ eventes\esbuild\esbuild.exe ENOENT at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19) at onErrorNT (internal/child_process.js:467:16) at processTicksAndRejections (i原创 2021-08-04 16:35:12 · 864 阅读 · 0 评论 -
Vue3学习之旅-webpack终章--热部署(更新)--跨域代理?拿来吧你!
文章目录webpack-devServer和Vue-CLIdevServer(热部署)Webpack watch**如何开启watch呢?两种方式:**webpack-dev-server认识模块热替换开启HMR框架的HMRHMR的原理HMR的原理图hotOnly、host配置**host设置主机地址:****localhost 和 0.0.0.0 的区别**:port、open、compressprotopencompressProxychangeOrigin的解析resolve模块解析确实文件还是文件夹原创 2021-08-02 17:58:48 · 2563 阅读 · 0 评论 -
vue3学习之旅--webpack5-babel整合sfc单文件vue组件
文章目录Babel和Vue的sfcBabel为什么需要babel?Babel命令行使用插件的使用Babel的预设presetBabel的底层原理Babel编译器执行原理Babel的执行阶段babel-loader指定使用的插件babel-presetBabel的配置文件VueVue源码的打包Vue打包后不同版本解析**vue(.runtime).global(.prod).js:**vue(.runtime).esm-browser(.prod).js:vue(.runtime).esm-bundler.j原创 2021-07-31 11:13:25 · 1350 阅读 · 0 评论 -
Vue3学习之旅--之webpack基础-进阶--webpack5?拿来吧你!
文章目录Webpack打包其他资源file-loader文件的命名规则设置文件的名称设置文件的存放路径url-loaderurl-loader的limitasset module type认识asset module typeasset module type的使用url-loader的limit效果加载字体文件字体的打包webpack的plugin认识pluginCleanWebpackPluginHtmlWebpackPlugin生成index.html分析自定义HTML模板自定义模板数据填充Defin原创 2021-07-28 22:47:04 · 1599 阅读 · 2 评论 -
Vue3学习之旅--初识webpack--webpack打包js,css,less等文件以及兼容性处理
文章目录webpack学习之旅webpack基础打包认识webpack脚手架依赖webpackwebpack是什么Vue项目加载的文件有哪些webpack使用前提webpack的安装webpack的打包方式1. 默认打包2. 创建局部的webpack3. Webpack配置文件4. 指定配置文件5. Webpack的依赖图webpack打包其他文件1. css-loader的使用css-loader的使用方案内联方式CLI方式loader配置方式(重点)2. style-loader配置style-load原创 2021-07-26 14:24:10 · 1591 阅读 · 0 评论 -
vue3学习之旅--vue的表单和开发模式--组件化开发初识
文章目录Vue3的表单和开发模式侦听器的深度侦听问题深拷贝和浅拷贝(补充知识)v-model双向绑定v-model的基本使用v-model的原理v-model绑定其他表单v-model的值绑定v-model修饰符 - lazyv-model修饰符 - numberv-model修饰符 - trimv-mode组件上使用人处理问题的方式认识组件化开发组件化开发Vue的组件化注册组件的方式注册全局组件全局组件的逻辑组件的名称注册局部组件Vue的开发模式Vue3的表单和开发模式vue3一路的笔记vue3学习原创 2021-07-24 14:24:46 · 913 阅读 · 0 评论 -
Vue3学习之旅--爱上Vue3--Vue3的Options-API--侦听器--计算属性--以及综合案例
Vue3的Options-API续上文:vue3学习之旅–邂逅vue3-了解认识Vue3vue3学习之旅–邂逅vue3-了解认识Vue3(二)Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段Vue3学习之旅–爱上Vue3–Vue3基础语法(二)–模板语法–条件渲染–列表渲染–为什么Vue的v-for需要绑定key属性复杂data的处理方式我们知道,在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况,我们可能需要对数据进行一些转原创 2021-07-22 15:57:19 · 1160 阅读 · 1 评论 -
Vue3学习之旅--爱上Vue3--Vue3基础语法(二)--模板语法--条件渲染--列表渲染--为什么Vue的v-for需要绑定key属性
Vue3学习之旅–爱上Vue3–Vue3基础语法(二)–模板语法续上文:vue3学习之旅–邂逅vue3-了解认识Vue3vue3学习之旅–邂逅vue3-了解认识Vue3(二)Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段条件渲染在某些情况下,我们需要根据当前的条件决定某些元素或组件是否渲染,这个时候我们就需要进行条件判断了。Vue提供了下面的指令来进行条件判断:v-ifv-elsev-else-ifv-show下面我们开始逐个的原创 2021-07-20 09:20:36 · 495 阅读 · 0 评论 -
Vue3学习之旅–爱上Vue3–Vue3基础语法(一)--以及vscode基本使用和快速生成代码片段
Vue3学习之旅–爱上Vue3–Vue3基础语法(一)续上文:vue3学习之旅–邂逅vue3-了解认识Vue3vue3学习之旅–邂逅vue3-了解认识Vue3(二)methods方法绑定this问题回顾:问题一:为什么不能使用箭头函数(官方文档有给出解释)?问题二:不使用箭头函数的情况下,this到底指向的是什么?(可以作为一道面试题)不能使用箭头函数的原因?我们在methods中要使用data返回对象中的数据:那么这个this是必须有值的,并且应该可以通过this获取到data返原创 2021-07-15 12:17:10 · 1581 阅读 · 2 评论 -
vue3学习之旅--邂逅vue3-了解认识Vue3(二)
续上文:vue3学习之旅–邂逅vue3-了解认识Vue3计数器案例(体验Vue)<div id="app"></div> <script src="../vue3/vue3.js"></script> <script> Vue.createApp({ template: ` <div> <h2>{{message}}</h2> <原创 2021-07-13 09:59:12 · 731 阅读 · 0 评论