从Vue2到Vue3，那些可能让你眼前一亮的小细节

相信很多兄弟都知道Vue3的新特性，比如基于Proxy的响应式系统、编译器优化、Composition-API等等，但是你知道吗Vue3有没有和Vue2不一样的小细节？今天给大家分享一些在Vue3实战中可能会引起你注意的小细节。如果用得好，不仅可以提高工作效率，还可以提高程序的性能。话不多说，干就干！作用域样式样式全局选择器在Vue2组件中，要设置一个全局样式，我们通常会新建一个在Vue3中，可以在作用域中使用:global伪类style:/*.red选择器将作用于全局*/:global(.red){color:red;}slotselector默认情况下，作用域样式不会影响渲染的内容，因为它们被认为是被父组件持有并传入的。使用:slotted伪类可以打破这种情况。/*.red选择器将作用于*/:slotted(.red)的渲染内容{color:red;}深度选择器Vue2风格穿透，一般使用::v-deep或/deep/，在Vue3中我们可以使用:deep伪类：/*.red选择器会作用于组件*/.parent:deep(.red){color:red;}}/style>注意兄弟们会发现上面的选择器的样式是统一的，都是使用伪类实现的。这使得写作更优雅，更容易记住。style中v-bind组件的由于可以绑定动态组件状态，切换主题会改变它的非常简单：。内容{颜色：v-bind('theme.fontColor');背景色：v-bind('theme.backgroundColor');}虽然强烈推荐使用。这时候，我们可以将它们混合起来，在以下场景中使用：语句不能在中使用，比如inheritAttrs或者插件的自定义选项。声明模块的命名导出。如果要修改组件的名称并使其在devtools中生效，则需要使用namedexport。的作用如下：这个函数很少用到，但是在封装组件的时候非常有用，可以让你少写很多代码。运行只需要在模块范围内执行一次的副作用，或创建单例对象。v-modelVue2中组件的绑定使用了v-model或者.snyc修饰符，两种写法有些重复。Vue3中统一使用v-model进行处理，可以绑定多个数据，比如v-model:foo,v-model:bar。v-model相当于:model-value="someValue"和@update:model-value="someValue=$event"。v-model:foo等同于:foo="someValue"和@update:foo="someValue=$event"。下面是父子组件双向绑定的例子：子组件可以和输入结合使用：如果觉得上面的模板比较繁琐，也可以结合使用它computed:v-memov-memo用于缓存模板的子树，可以在元素和组件上使用。为了实现缓存，这条指令需要传入一个定长的依赖值数组进行比较。如果数组中的每个值都与上次渲染相同，则将跳过整个子树的更新。例如：...