Vue3支持大多数的Vue2的特性 3Vue中设计了一套强大的组合API代替了Vue2中的option API , 复用性更强了 4更好的支持TS 5Vue3中使用了Proxy配合Reflect代替了Vue2中objectdefineProperty方法实现数据的。
1vue2是一个构造函数,通过该构造函数创建一个Vue实例 2Vue3是一个对象并通过该对象的createApp方法,创建一个vue实例1Vue2可以通过el选项和$mount方法来挂载容器2Vue3只能。
1速度更快 2体积更小 相比Vue2,Vue3整体体积变小了,除了移出一些不常用的API,再重要的是Tree shanking 任何一个函数,如refreavtivedcomputed等,仅仅在用到的时候才打包,没用到的模块都被摇掉,打包的整。
1vue2相较vue3代码可读性比较差vue2中选项API格式的代码的可读性较差,当需要实现的某一个功能涉及到多个属性的时候,就会出现在 props中接收参数 在data中定义变量 在watch中监听变化 在computed中定义需要使用到的计算。
1创建实例方式不同20 使用构造函数new Vue的方式,将选项对象通过参数传入30 使用VuecreateApp静态方法创建参数依然是选项多先发20 使用 符2定义指令组件等方法的不同 20 定义指令和组件。
Vue30不论是原生的html标签还是vue组件,他们都会通过h函数来判断,如果是原生html标签,在运行时直接通过Virtual Dom来直接渲染,同样如果是组件会直接生成组件代码数据监听,Vue2x大家都知道使用的是es5的。
1Vue3的Template支持多个根标签,Vue2不支持2Vue3有createApp,而Vue2的是newVuecreateApp组件,newVuetemplate,render3vmodel代替以前的vmodel和syncvue3中vmodel的用法要求props属性名任意。
相比 vue2x ,使用 proxy 的优势如下在 vue2 中定义数据变量是 data ,创建的方法要在 methods 中而在 vue3 中直接在 setup 中,在这里面定义的变量和方法因为最终要在模板中使用,所以最后都得。
vue2 是一个构造函数,通过new创建一个Vue实例 vue3是一个对象通过对象Vue的createApp方法创建一个vue实例 vue2 vue3 vue2 可以是一个对象或者由方法返回一个对象 vue3只能由方法返回一个对象 vue2的属性不具备相应。
vue3使用vmodel组件通信 相当于子组件中的pVisible与父组件中的isVisible双向绑定了,比vue2传统方法简化很多Teleport 有两个div分别是box1和box2,据经验所知,即使box1的孩子el1的zindex为10,el1的层级也没有。
但是在 Vue3 生周期钩子不是全局可调用的了,需要另外从vue中引入和刚刚引入reactive一样,生命周期的挂载钩子叫onMounted引入后我们就可以在setup方法里面使用onMounted挂载的钩子了在 Vue2 中实现,我们只需要在组件。
vue2选项api和vue3组合式api的区别的如下就是API的使用方式,在Vue2中使用的是选项APIOptions,API在Vue3中使用的组合APIComposition,API一什么是选项API写法如下1代码风格data选项写数据,methods选项写函数一个。
可读性不好,可维护性也不好,对比Vue3语法,更加的逻辑分明,可维护性也高vue3跟vue2在使用时语法的不同,vue3开发的项目要用vue3的语法,虽然vue3的语法可以兼容vu2的语法,但还是不要混用。
大vue2的双向数据绑定Q是利用ES5的一个AP1,ObiectdefineProperty0对数据进行劫持结合发布订阅模式的方式来实现的vue3中使用了ES6的ProxvA1对数据代理,通过reactive函数给每个对象都包一层Proxy,过Proxy监听属性的变化。
1将lteltablecolumn标签的属性定义为一个数组columns,循环渲染数据 2由于vfor和vif不能作用在同一标签上,所以要用lttemplate包裹所有的lteltablecolumn 3循环渲染ltlteltablecolumn标签。
在vue 2x中,使用scss时,深度选择器是 vdeep ,在vue30中,由于 vdeep 已被弃用,采用一种新的语法如果在vue30中使用 vdeep ,没有任何效果,也不会报错,就是在编译的时候会有一个警告。