vue3学习系列
文章平均质量分 71
记录个人学习vue3的笔记
庞囧
主业是一个纯前端打字员,生活与工作的平衡点是我的追求。
展开
-
【vue3学习系列】对比vue2生命周期做了哪些改变,vue3初学者快来看看
看了下官方的生命周期的说明,感觉讲的不算太清晰,所以个人就去百度研究了下,把理解到的记录在这篇博客,方面日后查看。【vue回顾系列】25-一图看懂生命周期,并教你怎么口述出来。原创 2023-04-22 15:52:05 · 650 阅读 · 1 评论 -
【vue3学习系列】请简单总结下vue2与vue3有哪些不同
然后模板发生改变时进行diff算法,不会像vue2一样,新旧节点挨个对比,而是选择非静态的节点进行对比,因为静态节点的内容是固定写死的,没必要浪费资源对比。vite是一个很快的构建工具,webpack在开发环境中,也是要打包一遍,然后把打包好后的代码给dev server运行的,项目复杂依赖多了就会越来越卡。打包的时候就能知道哪些api使用到了,需要打包,没使用到的就不打包删掉。3的diff算法就比2快了很多。在vue2时,我们写的每个vue组件都是单例的,使用的api都是需要通过vue实例去调用,例如。原创 2021-08-01 21:19:34 · 162 阅读 · 0 评论 -
【vue3学习系列】怎么在vue3里写hooks,提供一些写法的例子
文章目录函数式调用的写法判断是否点击指定元素外的区域创建一个全局dom类minxins的写法函数式调用的写法一般都是use的函数式调用的用法,这里记录一下结合TS的案例:判断是否点击指定元素外的区域可用于下拉框点击外部后收起的逻辑判断。/* 功能:传入一个DOM对象,判断是否点击除本身以外的其他dom上 */import { Ref, ref, onMounted, onUnmounted } from "vue";interface Result { isClickOutside: R原创 2022-05-28 17:03:24 · 1147 阅读 · 0 评论 -
【vue3学习系列】数据传输有关api的改动,v-model、$attr、mitt/event-emitter、v-bind
文章目录v-model简单写法结合计算属性$attrs事件监听器mitt安装使用v-model官方文档:v-model改写vue2中和v-model功能类似的.sync已经在vue3中被去掉了。来学下,如何改写v-model。简单写法props: { modelValue: String, // 接收值},setup(props, context) { // 输入框数据 const inputRef = reactive({ val: props.mode原创 2021-12-09 11:20:41 · 979 阅读 · 0 评论 -
【vue3学习系列】组合式api中,替代setup()函数的<script setup>特性写法
在使用composition api的时候,setup()函数的写法写多了会感觉有些繁琐,比如每次都需要return出去,不同类型变量要分ref和reactive调用等。这里就记录一下尤大大在vue3正式版发布不到两个月后推出的script setup特性。响应式基础。原创 2021-12-05 22:38:46 · 1626 阅读 · 0 评论 -
【vue3学习系列】个人对reactive源码的初略分析
文章目录前言第一次执行源码分析实践分析createReactiveObject函数的入参mutableHandlersgetsetdeleteProperty前言如果源码解释不对,麻烦过客留下宝贵的留言,感激不尽。源码文件入口vue-next\packages\reactivity\src\reactive.ts文章版本v1.0(后续会文章优化迭代)第一次执行源码分析平时使用reactive时,调用的就是reactive.ts文件里的reactive()函数:setup(props) {原创 2021-11-13 14:13:48 · 1206 阅读 · 2 评论 -
【vue3学习系列】monaco在vue3中tsx文件里的使用
文章目录概念使用安装一个使用了monaco的tsx文件引用组件效果问题概念monaco是一个可提供在线编辑器的库。使用安装cnpm i monaco-editor -D 因为安装这个库后,我们使用它作出的组件需要用js去编写css所以还需要jss库,这里安装使用在vue上的:cnpm i vue-jss -S // 以及vue-jss的依赖包 cnpm i jss jss-preset-default -S一个使用了monaco的tsx文件这里是从github上的开源项目嫖过来的文原创 2021-11-06 21:31:24 · 1389 阅读 · 0 评论 -
【vue3学习系列】json-schema的初识与学习
文章目录概念安装使用format自定义关键字概念json-schema我觉得把它类比成json的增强interface就比较好理解。引用:Json Schema定义了一套词汇和规则,这套词汇和规则用来定义Json元数据,且元数据也是通过Json数据形式表达的。Json元数据定义了Json数据需要满足的规范,规范包括成员、结构、类型、约束等。安装此次我们使用一个比较流行的基于json-schema标准实现的库,AJV。还是在vue3的项目上:cnpm i ajv -S使用可以新建个src原创 2021-11-02 22:51:59 · 1901 阅读 · 0 评论 -
【vue3学习系列】浅谈proxy实现的响应式原理
深度监听需要递归到底,性能层面考虑不太好无法监听对象新增属性和删除属性,需要vue特殊处理无法监听原生数组,需要在数组原型上做拦截所以vue3采用了es6之后的proxy去重构了响应式原理,proxy能够很好的解决Object.defineProperty的缺点。原创 2021-09-20 11:41:49 · 5602 阅读 · 4 评论 -
【vue3学习系列】配置的改动以及全局配置的写法
文章目录前言vue2全局配置vue3全局配置其他改动前言vue3的全局配置写法发生了修改知识点来源:慕课网。用途:个人学习记录vue2全局配置import Vue from 'vue'import App from './App.vue'Vue.config.ignoredElements = [/^app-/]Vue.use(/* ... */)Vue.mixin(/* ... */)Vue.component(/* ... */)Vue.directive(/* ... *原创 2021-09-12 11:50:26 · 1228 阅读 · 0 评论 -
【vue3学习系列】Router路由和Vuex状态管理的使用
文章目录前言初始化使用配置前言vue3和vue2的路由使用方式基本一致,只是初始化的方式改变了一下。初始化index.ts的配置import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' // 如果是hash模式就把createWebHistory改为createWebHashHistoryimport Home from '../views/Home.vue'const routes: Array&原创 2021-06-12 11:17:25 · 460 阅读 · 0 评论 -
【vue3学习系列】集成TypeScript的vue3一些写法上的记录
文章目录导入集成TS初体验例子导入集成TS在创建好vue3的工程后,可以通过指令导入TS(注意:导入后之前写的代码会被还原) vue add typescript初体验例子<template> <div> {{reverseStr}} </div></template><script lang="ts">import { defineComponent } from 'vue'; // 默认导入的// 用接口定原创 2021-06-07 21:42:14 · 440 阅读 · 0 评论 -
【vue3学习系列】Composition API,组合式setup()方法的学习
这样写的好处我想是能够很快的理清大的逻辑关系,细节部分再去对应的函数中看。可能在写组件的时候,会觉得使用什么就要亲手从vue引入的写法很繁琐,但这样子设计就是为了能在打包的时候,不会去打包多余的东西(tree shaking)。shallow是浅的意思,所以就能知道shallowReactive是用于浅响应式处理,相比较于Reactive,传入一个对象,只会对第一层进行响应式处理,嵌套第二层开始都不具备响应式了。第一个参数时监听的对象,第二个参数是监听需要做的逻辑,第三个参数是监听的配置。原创 2021-06-06 17:26:31 · 2007 阅读 · 5 评论