首页 > 其他分享 >Vue3

Vue3

时间:2024-05-25 09:01:13浏览次数:19  
标签:方式 渲染 作用域 插槽 vue2 Vue3 组件

vur3 相对于vue2 究竟更新了什么?

 1 监听机制的改变:

       vue2 是全局的响应式数据 vue是可以选择的响应式

2只监测属性,不能监测对象

      检测属性的添加和删除

      检测数组长度和索引的变化

     支持MapSet、WeakMap和weakSet

3模板

  • 作用域插槽,2.x 的机制导致作用域插槽变了,父组件会重新渲染,而 3.0 把作用域插槽改成了函数的方式,这样只会影响子组件的重新渲染,提升了渲染的性能。
  • 同时,对于 render 函数的方面,vue3.0 也会进行一系列更改来方便习惯直接使用 api 来生成 vdom 。

 4对象式的组件声明方式

  • vue2.x 中的组件是通过声明的方式传入一系列 option,和 TypeScript 的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。
  • 3.0 修改了组件的声明方式,改成了类式的写法,这样使得和 TypeScript 的结合变得很容易

 5其它方面的更改

  • 支持自定义渲染器,从而使得 weex 可以通过自定义渲染器的方式来扩展,而不是直接 fork 源码来改的方式。
  • 支持 Fragment(多个根节点)和 Protal(在 dom 其他部分渲染组建内容)组件,针对一些特殊的场景做了处理。
  • 基于 tree shaking 优化,提供了更多的内置功能。

标签:方式,渲染,作用域,插槽,vue2,Vue3,组件
From: https://blog.csdn.net/2301_80044589/article/details/139176286

相关文章

  • vue3 的基本语法
    先来一段简单的代码 <template><div><h2>{{this.name}}</h2><button@click="ChangeName">changename</button></div></template><script>exportdefault{data(){return{......
  • vue3+ts购物车demo
    <template><div><h1>ShoppingCart</h1><button@click="addItem">AddItem</button><button@click="deleteSelectedItems">DeleteSelectedItems</button><button@c......
  • vue3 设置 表单或者页面 懒加载 (或者组件的异步加载)
    用到的工具库  vueUse和useIntersectionObserver1.UseIntersectionObserver函数参数:observerList:由被观察目标所组成的数组,数组项是由React.createRef构建出来的对象callback:当目标元素被曝光所需要触发的函数,该函数接受一个参数indexList,由被曝光元素在observerList......
  • VUE3.0的安装教程
    一、下载nodejs    访问nodejs官网或者中文网:nodejs中文网  二、点击下载得到的.msi文件   (1) 点击next (2)接收协议,下一步        三、配置npm相关文件  (1)打开刚才安装node.js的文件夹,在里面新建两个文件夹,分别为node_......
  • Electron-Vue3-Vadmin后台系统|vite2+electron桌面端权限管理系统
    Electron-Vue3-Vadmin后台系统|vite2electron桌面上端管理权限智能管理系统根据vite2.xelectron12桌面上端后台管理智能管理系统Vite2ElectronVAdmin。继上一次共享vite2融合electron构建后台框架,此次产生的是全新开发设计的跨桌面上中后台管理管理权限智能管理系统。应用全新......
  • vue3 Cesium添加地形的办法
    Cesium自带有地形,awaitCesium.createWorldTerrainAsync({    requestVertexNormals:true,    requestWaterMask:true    });async需要自己添加在方法前面然后在newCesium.Viewer("map",{terrainProvider:provider})provide中,第一个......
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
    原创vue3+uniapp+uni-ui跨端仿ios桌面后台OA管理模板Uni-Vue3-WeOS。uniapp-vue3-os一款基于uni-app+vite5.x+pinia等技术开发的仿ios手机桌面OA管理系统。实现了自定义桌面栅格磁贴布局、多分屏滑动管理、自定义桌面小部件、辅助触控悬浮球等功能。支持编译到H5+小程序端+App端......
  • vue3插件(unplugin-auto-import自动引入的使用)
    1. vite.config文件里面1importAutoImportfrom'unplugin-auto-import/vite'23plugins:[4.......,5AutoImport({6include:[7/\.[tj]sx?$/,//.ts,.tsx,.js,.jsx8/\.vue$/,9/\.vue\?......
  • vue3+ts 指令拖拽div案例
    <template><divclass="box"v-move><divclass="header"></div><div>内容</div></div></template><scriptsetuplang="ts">import{ref,Directive,DirectiveBinding}......
  • fullcalendar-vue3插件实现时间资源图
    用的vue3+最新版本:官网链接:https://fullcalendar.io/demos效果如图:x轴为人员,y轴为当日的时间段:  1.安装引入npminstall--save@fullcalendar/core@fullcalendar/resource@fullcalendar/resource-timegrid package.json 2.附上代码<script>import{defin......