首页 > 其他分享 >vue3相较于vue2的改动

vue3相较于vue2的改动

时间:2022-11-28 22:13:21浏览次数:46  
标签:改动 Vue vue2 app vue key vue3

v-if和v-for的优先级

在vue2中:当v-if和v-for同时使用时,v-for的优先级高于v-if(因此我们通常需要计算属性先对数据进行加工处理,以达到性能优化的目的)

在vue3中:当v-if和v-for同时使用时,v-if的优先级高于v-for

.sync修饰符

vue2中:由于vue中是单向数据流,父子组件在传值时想要实现v-model的效果就要用到.sync修饰符来实现“双向绑定”

vue3中:对v-model进行了改造,不再需要 .sync 修饰符即可达到数据双向绑定的效果。在vue3中支持多个 v-model属性,默认使用 modelValue 作为 prop,update:modelValue作为事件,当多个v-model绑定时,书写为例:v-model:title="title",此时 title 作为prop,update:title 作为事件

全局API

vue2中:有许多的全局API,如:Vue.directive、Vue.component、Vue.config、Vue.mixin等

vue3中:提供的是实例API,通过createApp创建vue实例,原来在Vue原型上的API都被挂载到了vue实例上,如:app.directive、app.component、app.config、app.mixin等

Vue.prototype 替换为 config.globalProperties

vue2中:绑定全局的变量、方法等:Vue.prototype.$ajax = xxxx

vue3中:const app = createApp({}); app.config.globalProperties.$ajax = xxxx

key在template和v-if上的使用

vue2中:在使用v-if、vi-else、v-else-if时,为了保证dom节点渲染的正确性,通常需要在对应的节点添加不同的key,以确保vue在进行虚拟dom对比时是准确的;vue2中template在v-for循环时是不能设置key的,否则会产生警告(需要给子节点设置key)。

vue3中:在使用v-if、vi-else、v-else-if时,不用提供唯一的key对dom节点进行区分,因为vue内部会自动生成唯一的key,如果你提供了key,那你就要保证它的唯一性;vue3中template在v-for循环时,key应该设置在template标签上

$listeners被移除

vue2中:使用$attrs访问传递给组件的属性,使用$listeners访问传递给组件的事件(需要结合inheritAttrs:false)。

vue3中:虚拟dom中,事件监听器仅仅是以on为前缀的属性

标签:改动,Vue,vue2,app,vue,key,vue3
From: https://www.cnblogs.com/hdxg/p/16933778.html

相关文章

  • Vue2(笔记01) - 基础 - Vue简介
    笔记来自尚硅谷课程:1Vue是什么?一套用于构建用户界面的渐进式Javascript框架;它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效......
  • vue2 组件共享数据 父子组件 兄弟组件
    父子组件:父只管定义数据和传数据子只管接收数据和声明数据父:<hello:msg="message":user="username"></hello>importhellofrom'@/components/HelloWorld......
  • vue3 第二天vue响应式原理以及ref和reactive区别
    前言:前天我们学了ref和reactive,提到了响应式数据和Proxy,那我们今天就来了解一下,vue3的响应式在了解之前,先复习一下之前vue2的响应式原理vue2的响应式:原理:对......
  • vue2源码学习2vuex&vue-router
    1.vue插件编写插件可以实现对象vue的拓展,比如新增全局属性/方法,添加实例方法,使用mixin混入其他配置项等等。编写插件必须要实现install方法,当调用Vue.use()使用插件时,......
  • 进度条 vue3 vite
    NProgress.js官网 https://ricostacruz.com/nprogress/安装:npminstallnprogress使用://引入NProgress进度条importNProgressfrom'nprogress'import'nprogres......
  • Vue3+Vite项目中 使用WindiCSS.
    之前工作有了解过根据类名来写元素的样式,一听就发出疑问:这样写项目可读性恐怕不是很好吧。。。  之后来到杭州工作后,开始使用WindiCSS后发现真香!!! 由于近期所写的项......
  • Vue3快速上手
    Vue3快速上手<imgsrc="https://user-images.githubusercontent.com/499550/93624428-53932780-f9ae-11ea-8d16-af949e16a09f.png"style="width:200px"/>1.Vue3简介......
  • 基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一
    在工作流页面中,除了特定的业务表单信息外,往往也需要同时展示通用申请单的相关信息,因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理,本篇随笔介绍Vue3......
  • 【Amadeus原创】零基础使用vue3和elements创建应用
    一.创建环境1.创建D:\code\vue文件夹2.vscode打开文件夹3.打开终端,输入​​npminstall-g@vue/cli​​4.配置环境变量终端输入:​​npmconfiglist​​找到路径将路......
  • vue3通过ref获取元素及注意事项
    常规用法<template><divclass="search-input"><inputtype="text"ref="searchInputElem"v-model="searchValue"@keyup.enter="onSearch"placeholder="......