分类：Vue3

2020
10-10

Vue3不支持Filters过滤器的问题

filters过滤器已从Vue3.0中删除，不再支持。2.x语法在2.x中，开发人员可以使用过滤器来处理常见的文本格式。<template><h1>BankAccountBalance</h1><p>{{accountBalance|currencyUSD}}</p></template><script>exportdefault{props:{accountBalance:{type:Number,required:true}},filters:{currencyUSD(value){return'$'+value}}}</script>虽然这看起来很方便，但它需要一... 继续阅读 >

2020
10-10

Vue3为什么这么快

总所周知，程序员追求的就是一个字：快！（当然不是什么都追求快的，有些事情快起来是不行滴）昨天Vue3.0正式发布了，激动的心，颤抖的手，摸了摸我的头发，嗯~还好。据说Vue3.0相比Vue2.x在性能上提升了1.2~2倍，为啥他就这么快呢？vue3.0做了以下事情diff算法优化静态提升（hoistStatic）事件侦听器缓存（cacheHandlers）SSR优化（看心情更新）diff算法优化Vue2.x的diff算法vue2.x的diff算法叫做全量比较，顾名思义，就... 继续阅读 >

2020
10-08

使用Webpack 搭建 Vue3 开发环境过程详解

从零开始使用Webpack搭建Vue3开发环境创建项目首先需要创建一个空目录，在该目录打开命令行，执行npminit命令创建一个项目，这个过程会提示输入一些内容，完成后会自动生成一个package.json文件Webpack的配置文件projectproject-name+|-index.html|-package.json+|-webpack.config.js+|-/src+|-index.jswebpack.config.js'usestrict'constpath=require('path')constHtmlWebpackPlugin=require('html-w... 继续阅读 >

2020
10-08

何时/使用 Vue3 render 函数的教程详解

什么是DOM？如果我们把这个HTML加载到浏览器中，浏览器创建这些节点，用来显示网页。所以这个HTML映射到一系列DOM节点，然后我们可以使用JavaScript进行操作。例如：letitem=document.getElementByTagName('h1')[0]item.textContent="NewHeading"VDOM网页可以有很多DOM节点，这意味着DOM树可以有数千个节点。这就是为什么我们有像Vue这样的框架，帮我们干这些重活儿，并进行大量的JavaScript调用。然而，搜索和更新数千个... 继续阅读 >

2020
10-08

Vue3新特性之在Composition API中使用CSS Modules

在Vue3CompositionAPI最近的一次beta升级中，无论是Vue3本3库vue-next，还是面向Vue2过渡用的@vue/composition-api库中，都同步更新了一个useCSSModule函数--用来在使用了CompositionAPI的Vue实例中，支持CSSModules语法。首先来看看什么是CSSModules：CSSModulesCSSModules是一种CSS的模块化和组合系统。vue-loader集成CSSModules，可以作为模拟scopedCSS的替代方案。启用CSSModule... 继续阅读 >

2020
09-29

40行代码把Vue3的响应式集成进React做状态管理

前言vue-next是Vue3的源码仓库，Vue3采用lerna做package的划分，而响应式能力@vue/reactivity被划分到了单独的一个package中。如果我们想把它集成到React中，可行吗？来试一试吧。使用示例话不多说，先看看怎么用的解解馋吧。//store.tsimport{reactive,computed,effect}from'@vue/reactivity';exportconststate=reactive({count:0,});constplusOne=computed(()=>state.count+1);effect(()=>{console.log(... 继续阅读 >

2020
09-29

Vue3 的响应式和以前有什么区别，Proxy 无敌？

前言大家都知道，Vue2里的响应式其实有点像是一个半完全体，对于对象上新增的属性无能为力，对于数组则需要拦截它的原型方法来实现响应式。举个例子：letvm=newVue({data(){return{a:1}}})//❌oops，没反应！vm.b=2letvm=newVue({data(){return{a:1}},watch:{b(){console.log('change!!')}}})//❌oops，没反应！vm.b=2这种时候，Vue提供了一个api：this.$set，来使得新增... 继续阅读 >

2020
09-29

关于vue3默认把所有onSomething当作v-on事件绑定的思考

最近在重新看vue3的rfcs，发现一个细节，原话如下：propsthatstartwithonarehandledasv-onbindings,witheverythingafteronbeingconvertedtoall-lowercaseastheeventname(moreonthisbelow)也就是说，以后如果你在传递props的时候，以on开头的props，如果在组件上没有做props的声明，那么会被当作事件绑定到组件的根节点上。究其原因，我大致概括了两点：兼容vue2中的v-on.nativevue3的vnode声明把pr... 继续阅读 >

2020
09-28

详解Vue3 Composition API中的提取和重用逻辑

Vue3CompositionAPI可以在大型项目中更好地组织代码。然儿，随着使用几种不同的选项属性切换到单一的setup方法，许多开发人员面临的问题是……这会不会更混乱，因为一切都在一个方法中乍一看可能很容易，但是实际上只需要花一点点时间来编写可重用的模块化代码。让我们来看看如何做到这一点。问题Vue.js2.x的OptionsAPI是一种非常直观的分隔代码的方法exportdefault{data(){return{articles:[],searchParam... 继续阅读 >

2020
09-28

浅谈Vue3 Composition API如何替换Vue Mixins

想在你的Vue组件之间共享代码？如果你熟悉Vue2则可能知道使用mixin，但是新的CompositionAPI提供了更好的解决方案。在本文中，我们将研究mixins的缺点，并了解CompositionAPI如何克服它们，并使Vue应用程序具有更大的可伸缩性。回顾Mixins功能让我们快速回顾一下mixins模式，因为对于下一部分我们将要讲到的内容，请务必将其放在首位。通常，Vue组件是由一个JavaScript对象定义的，它具有表示我们所需功能的各种属性——诸如... 继续阅读 >

2020
09-27

详解Vue3中对VDOM的改进

前言vue-next对virtualdom的patch更新做了一系列的优化，从编译时加入了block以减少vdom之间的对比次数，另外还有hoisted的操作减少了内存的开销。本文写给自己看，做个知识点记录，如有错误，还请不吝赐教。VDOMVDOM的概念简单来说就是用js对象来模拟真实DOM树。由于MV**的架构，真实DOM树应该随着数据（Vue2.x中的data）的改变而发生改变，这些改变可能是以下几个方面：v-ifv-for动态的props（如:class，@click）... 继续阅读 >