vue3_02
vue3 watch和 watchEffec和 computed 对比
watch和 watchEffectwatchwatch显式指定依赖数据，依赖数据更新时执行回调函数具有一定的惰性(lazy) , 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行）监视ref定义的响应式数据时可以获取到原值既要指明监视的属性，也要指明监视的回调watchEffectwatchEffect自动收集依赖
日期 2023-06-12 10:48:40
Vue3, setup语法糖、Composition API全方位解读
起初 Vue3.0 暴露变量必须 return 出来，template 中才能使用；Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。本文章以Vue2的角度学习Vue3的语法，让你快速理解Vue3的Composition Api本文章第十四节为状态库 Pinia
日期 2023-06-12 10:48:40
Vue3源码03: Vue3响应式核心原理
Vue3源码01 : 代码管理策略-monorepoVue3源码02: 项目构建流程和源码调试方法 “本文会先对子项目reactivity进行一个基本的介绍，随后会介绍Vue3中的响应式原理，最后会编写一个极简版的响应式系统。在下一篇文章中，将会详细讲解reactivity项目中具体源码的实现细节，敬请朋友们期待。 ”前言有可能朋友们会疑惑，源码分析为什么要从reactivity讲起，而不是从其他
日期 2023-06-12 10:48:40
Vue3.0实现todolist- ref定义单个数据和reactive定义对象类型的数据
参考文档参考文档：https://blog.csdn.net/ll666888999/article/details/123789098 参考视频：https://www.imooc.com/learn/1300 官方文档查看文档：https://v3.cn.vuejs.org/1：ref定义单个数据在vue3.0中，用谁就要引用谁import { defineComponent,ref} f
日期 2023-06-12 10:48:40
Vue3.0实现todolist-Vue3.0定义状态管理
定义状态管理定义状态管理在src-store-index.js文件中 把创建状态管理createStore从vuex中解构出来，把createStore导出来，createStore是一个方法，里面传递了对象state：定义所需要的状态的，在这里定义的数据每个组件都可以使用，达到了数据共享 mutations：同步修改state 都是方法 actions：异步提交mutation modules
日期 2023-06-12 10:48:40Vue3.0实现todolist-使用状态管理的api
1:states里面初始化任务列表 //定义所需要的状态的 state: { list:[ { title: "吃饭", complete: false, }, { title:
日期 2023-06-12 10:48:40Vue3.0实现todolist-计算属性
computed代表计算属性，本质上是通过计算之后得到的一个变量 引进来import { defineComponent,ref, computed} from "vue";<template> <div> <nav-header></nav-header> <nav-main></nav-
日期 2023-06-12 10:48:40Cloud Studio尝鲜，在线构建vue3应用【玩转 Cloud Studio】
Cloud Studio是一款在线版的VsCode,无需本地安装vscode，浏览器上直接在线code,对于不想安装本地vsCode，如果你远程办公，如果你不想背着电脑回家，家里有一台能联网的机器，那么你不用远程控制公司电脑，你只需要登录cloud studio就可以在线编码，并实时保存代码，这是一种趋势，也是一种非常不错的体验，本文是一篇笔者关于Cloud Studio在线编程的入门使用体验。正
日期 2023-06-12 10:48:40Vue3模板语法--属性与表达式
Vue3的属性与表达式，主要作用是用通过Vue对象中数据池中的属性与html标签进行绑定，从而实现对属性的值的操作。tips:里面如果给予元素设定属性使用v-bind，属性名='data内的变量名'Vue3如果元素设定属性v-bind,属性名后面没有赋值，那么最后显示只有属性名Vue3语法后面如果要放入字符串，需要进行引号切换放入字符串Vue3语法最后输出结果可以放入JavaS
日期 2023-06-12 10:48:40在 Vue3 中使用 IPFS 分布式存储和共享文件
前言目前的互联网 HTTP协议 中心化严重，各种问题日益突出，http网络在下载文件和浏览网页时，只能一次从一个数据中心获取信息，当数据中心有问题、出现故障时，就会出现数据信息丢失或者网页无法找回。最初的 IPFS协议 只是为了解决中心化问题，ipfs基于网络数据分布式储存的网络基础，为了维护ipfs系统的稳定和长久发展，于是出现了filecoin，filecoin作为ipfs项目的奖励机制，fi
日期 2023-06-12 10:48:40Vue3—父子组件传值(子组件使用 emit 传值到父组件)
大家好，又见面了，我是你们的朋友全栈君。 Vue3中，子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值 context（组件上下文）中的emit。官网APIhttps://v3.cn.vuejs.org/guide/migration/emits-option.html 例1：Tab菜单子组件创建子
日期 2023-06-12 10:48:40vue3.0基础教程（一）
前言近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。安装nodejs和npm官网下载：https://nodejs.org/zh-cn/download/ 新版的NodeJS已经集成了npm,所以不需要再次安装npm，win安装都是傻瓜式的，一直点下一步，建议安装在其他盘，如D:/nodejs 使用
日期 2023-06-12 10:48:40Electron+Vue3.2+TypeScript+Vite开发桌面端
Electron可以让程序员重用Web的代码，使用HTML、CSS、JavaScript来构建桌面应用，并在不同平台上使用。Electron官网上说：“比你想象的更简单”————“如果你可以建一个网站，你就可以建一个桌面应用程序。Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可
日期 2023-06-12 10:48:40element-plus 一个vue3.xUI框架 （element-ui的3.x 版初体验）
大家好，又见面了，我是你们的朋友全栈君。 官方文档已更新: 点击跳转突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚，但是告知了基于vue3.x版本的 element-plus 已经出来了。 先来上手体验一下 首先安装一个最新的@vue-cli，搭建一个vue3.x的项目，脚手架创建流程已经很简洁了，这里就不多说了。建好之后，直接开始安装吧npm i ele
日期 2023-06-12 10:48:40万字长文带你全面掌握Vue3
在2020年9月19日，vue更新了3.0的正式版，不知不觉，已经过去了好几个月了，作为一位前端切图仔，是时候开始学习了，每次抱着准备学、再等等、明天说的想法，成功在发布了两个多月的时候来认真学习了一波，这里来总结一下vue3到底有哪些更新，来帮各位没有时间去了解vue3的朋友来一次快速入门。如何看待vue3？ vue2.x是一个比较稳定的版本，也是很长一段时间我们在使用的版本，社区生态已经十分完
日期 2023-06-12 10:48:40vue3项目debugger调试看不到源码-jeecgboot
问题描述： 采用setup标签写的代码，debuger的时候看不到源码，导致无法调试。setup写法示例： <script lang="ts" name="order-apply-list" setup>debugger看到是下面的效果： 如何解决这个问题呢？一、添加jeecgboot-vue3项目的 src 源码路径二、点击允许源码进来了三、
日期 2023-06-12 10:48:40vue3.0中关闭eslint(全部不检测)[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。前言： 在项目中eslint检查是一个很棒的工具，但是在非正式场合，或者某些情况下，他会给我们带来很多不方便，这里分享下如何在新建项目后把他的eslint检查先关掉（正式项目不推荐关闭，因为良好的习惯是从每一行代码的规范开始）方法： 打开我们的 .eslintrc.js 文件，把 ‘@vue/standard’ 注释，然后把服务
日期 2023-06-12 10:48:40Vue3中的列表渲染v-for基本用法
tips:Vue3中，v-for可以用来循环渲染数据内容v-for指令的基本写法 v-for="变量名 in data数据"对json格式的数据进行循环时，可以用{value，key}方式遍历出所有数据v-for循环如果要获取index值，在非json格式，是第二个参数，json格式中为第三个参数 example:<!DOCTYPE html> <html l
日期 2023-06-12 10:48:40Vue3中v-for状态维护
tips:v-for循环出来的元素尽量有key属性在Vue3中，key属性尽量放入数据的唯一标识idkey属性如果没有唯一标识id,也可以放入index值在Vue3中，key属性只允许放入Number或String数据类型example:<!DOCTYPE html> <html lang="en"> <head> <meta
日期 2023-06-12 10:48:40Vue3中的计算属性
tips：在Vue3中，我们可以用computed来输出计算属性如果computed和data属性同时使用，data属性优先级更高，会有警告提示在Vue3中，data,methods,computed中的属性名称不要重复example:<!DOCTYPE html> <html lang="en"> <head> <meta c
日期 2023-06-12 10:48:40Vue3事件处理
tips：Vue3中事件可以用括号，也可以不用括号，不加括号表示单个事件如果要用多时间，就要用逗号隔开，并且要加括号事件带括号可以传参，参数可以包含Vue对象里面的属性 example:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
日期 2023-06-12 10:48:40Vue3表单输入绑定
tips：在Vue3中，可以使用v-model来绑定表单元素输入内容v-model也叫双向绑定，期间数据和表单元素的输出是同步的v-model在单选上，会输出input的value，并且不使用name就可以进行分组v-model在复选上，代表的是true和falsev-model在文本域上，代表的是文本内容v-model在下拉框上，代表的是option的内容v-model的值会覆盖掉原生属性的值e
日期 2023-06-12 10:48:40Vue3中的事件修饰符
tips:. prevent：阻止默认事件的发生 默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。可以对照原生js中的preventDefault()的作用来理解example:<!DOCTYPE html> <html lang
日期 2023-06-12 10:48:40Vue3中的按键别名
tips：在Vue3中，按键事件可以使用按键别名方式指定某一种按键生效按键别名的使用方式和修饰符一样，放到按键事件后面常用的按键别名有8种，enter,tab,esc,delete,space,up,down,left,right按键别名可以多个同时使用，在后面继续追加即可example：<!DOCTYPE html> <html lang="en">
日期 2023-06-12 10:48:40
Vue3组件Props
Props的用法比较灵活，其中简单的用法就是父子组件间的通信tips：Props涉及Vue父子组件通信，父组件提供数据通过属性props传给子组件在createApp中，component里的数据与data()中的数据一般是不能互通的example：<!DOCTYPE html> <html lang="en"> <head> <
日期 2023-06-12 10:48:40Vue3源码解读之patch
例子代码本篇将要讲解dom diff，那么咱们结合下面的例子来进行讲解，这个例子是在上一篇文章的基础上，加了一个数据变更，也就是list的值发生了改变。html中增加了一个按钮change，通过点击change按钮来调用change函数，来改变list的值。例子位于源代码/packages/vue/examples/classic/目录下，下面是例子的代码：const app = Vue.crea
日期 2023-06-12 10:48:40兼容vue2和vue3版本的插件实现过程
需求说明 vue2升级vue3中很多插件是单独进行使用的，但是项目进行升级的时候如果直接进行项目的全部重构工作量是很大的，当然这篇文章解决不了这个终极问题，这里只是分享创建一个可以支持vue2和vue3插件的实现过程。 引入vue-demiyarn add vue-demi or npm install vue-demi复制vue-demi 官网[vue-demi])(https://www.n
日期 2023-06-12 10:48:40能否手写vue3响应式原理-面试进阶
（二）响应式原理利用ES6中Proxy作为拦截器，在get时收集依赖，在set时触发依赖，来实现响应式。（三）手写实现1、实现Reactive基于原理，我们可以先写一下测试用例 //reactive.spec.ts describe("effect", () => { it("happy path", () => { const
日期 2023-06-12 10:48:40使用Vue3实现【羊了个羊】的算法方面全面解析！
前言这两天社区很多羊了个羊的web实现，虽然各种实现花里花哨，然而，并没有一个一个jy能给他说清楚到底怎么实现的，由于可怕的求知欲，自己来吧！大纲羊了个羊这个现象级游戏之所以能成功，不是因为他像原神一样，靠着质量、体验、剧情你爱不释手他靠的是烂，让你爱不释手，人家玩的是营销，玩的是人性，也许你压根就过不了关！他的技术实现，其实相当简单，在技术上从来没有什么高深的东西，果然，高深的技术总是显得这么朴
日期 2023-06-12 10:48:40Vue3移动端组件库Varlet源码主题阅读之一：本地启动服务时都做了什么
本文为Varlet组件库源码主题阅读系列第一篇Vue开源的组件库有很多，基本各个大厂都会做一个，所以作为个人再重复造轮子其实意义也不是很大，但是笔者对于如何设计一个Vue组件库还是挺感兴趣的。不同的组件库架构肯定有所不同，不过大体思路应该都差不多，笔者在众多组件库中挑选了Varlet 来进行剖析，Varlet是一个基于 Vue3 开发的 Material 风格的移动端组件库，本系列的文章会全面解析
日期 2023-06-12 10:48:40vue3-Composition-API实操
没有this了，我要怎么获取组件实例？没有this了，怎么派发自定义事件？我该如何在reactive和ref之间做选择？setup函数太长了怎么办？我的属性怎么就不响应了 watchEffect和watch有啥不同？生命周期钩子能不能写多个？顺序是怎样的？我要怎么获取组件实例？我们都知道composition api是可以和options api一起使用、友好相处的，比如下面的示例：const {
日期 2023-06-12 10:48:40