最近尝试上手Vue3+TS+Vite，对比起Vue2有些不适应，但还是真香~上手前先说下Vue3的一些变化吧~Vue3的变化Vue3带来的变化主要有以下几个方面：使用层面对比起Vue2启动速度快很多，新项目从1s升级到不到500msvite.config.ts配置文件修改后无需重启服务就能更新代码层面函数式编程，方便组合逻辑，如mixin容易命名冲突，数据来源不清晰新增ref，reativeAPI定义变量更好的ts支持组件文件中template模板内无需用根节点标签包着组件元素底层设计双向数据绑定从definePropertyforin循环变量改成proxy。defineProperty是改变
最近尝试上手Vue3+TS+Vite，对比起Vue2有些不适应，但还是真香~上手前先说下Vue3的一些变化吧~Vue3的变化Vue3带来的变化主要有以下几个方面：使用层面对比起Vue2启动速度快很多，新项目从1s升级到不到500msvite.config.ts配置文件修改后无需重启服务就能更新代码层面函数式编程，方便组合逻辑，如mixin容易命名冲突，数据来源不清晰新增ref，reativeAPI定义变量更好的ts支持组件文件中template模板内无需用根节点标签包着组件元素底层设计双向数据绑定从definePropertyforin循环变量改成proxy。defineProperty是改变
警告信息：浏览器控制台警告：Writeoperationfailed:computedvalueisreadonly使用环境：Vue3.2.41Chromex64v103.0.5060.66报错情景：利用Vue的响应式修改某个值时出现该警告。template>{{msg}}br>button@click="add">+button>template>scriptsetuplang="ts">import{computed,ref}from'vue'constx=ref('-')//计算属性constmsg:any=computed(()=>{returnx.value+'-'})//修改计算属
警告信息：浏览器控制台警告：Writeoperationfailed:computedvalueisreadonly使用环境：Vue3.2.41Chromex64v103.0.5060.66报错情景：利用Vue的响应式修改某个值时出现该警告。template>{{msg}}br>button@click="add">+button>template>scriptsetuplang="ts">import{computed,ref}from'vue'constx=ref('-')//计算属性constmsg:any=computed(()=>{returnx.value+'-'})//修改计算属
Pinia简介学vue2的都知道vuex状态管理，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。而pinia同理也是起到状态管理的作用，但是它又不完全同于vuex，相比有如下优点：Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。pinia中action支持同步和异步良好的Typescript支
Pinia简介学vue2的都知道vuex状态管理，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。而pinia同理也是起到状态管理的作用，但是它又不完全同于vuex，相比有如下优点：Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。pinia中action支持同步和异步良好的Typescript支
介绍Jest是目前前端工程化下单元测试火热的技术栈，而Enzyme的支持提供了Jest测试React业务、组件的能力，下面来介绍一下React组件测试的一些实际场景。1.测试依赖包 "enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","enzyme-to-json":"^3.3.5","jest":"^28.1.1","jest-less-loader":"^0.1.2","jsdom":"^19.0.0", //解决mount渲染组件失败的BUG，具体见上文"ts-jest":"^28.0.5",2.测试环境搭建由于enzyme的
介绍Jest是目前前端工程化下单元测试火热的技术栈，而Enzyme的支持提供了Jest测试React业务、组件的能力，下面来介绍一下React组件测试的一些实际场景。1.测试依赖包 "enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","enzyme-to-json":"^3.3.5","jest":"^28.1.1","jest-less-loader":"^0.1.2","jsdom":"^19.0.0", //解决mount渲染组件失败的BUG，具体见上文"ts-jest":"^28.0.5",2.测试环境搭建由于enzyme的
最近在学习vue3+vite的时候学习到的一些小技巧，现在记录一下文章目录前言一、setupname增强1、第一个方法就是使用两个标签具体看以下代码2、借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，可以直接在script标签上定义name。安装配置使用二、告别.value三、忽略.vue后缀前言学习vue3+vite中看到了一些小技巧，这个小技巧可以在写代码时更加的顺畅，更加的丝滑。一、setupname增强在写vue3中，有一个语法糖大家一定很清楚，那就是setup，但使用setup语法带来的一个问题就是无法自己设置name，而当我们使用ke
最近在学习vue3+vite的时候学习到的一些小技巧，现在记录一下文章目录前言一、setupname增强1、第一个方法就是使用两个标签具体看以下代码2、借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，可以直接在script标签上定义name。安装配置使用二、告别.value三、忽略.vue后缀前言学习vue3+vite中看到了一些小技巧，这个小技巧可以在写代码时更加的顺畅，更加的丝滑。一、setupname增强在写vue3中，有一个语法糖大家一定很清楚，那就是setup，但使用setup语法带来的一个问题就是无法自己设置name，而当我们使用ke
