vue3和vue2区别记录

​​​​​​​

目录

​​​​​​​​​​​​​​

Vue2和vue3的区别

Uniapp中Vue3和vue2在uniapp挂载全局变量和方法的区别

 Vue3挂载方法和变量

一些uniui的组件不能在uniapp中的vue3使用

uniniapp中vue2和vue3的双向绑定数据区别

---

1. Vue2和vue3的区别

① vue2使用的是webpack形式去构建项目 webpack是一开始是入口文件，然后分析路由，然后模块，最后进行打包，然后告诉你，服务器准备好了可以开始干了 ②vue3使用vite构建项目 先告诉你服务器准备完成，然后等你发送HTTP请求，然后是入口文件，Dynamic import（动态导入）code split point（代码分割） 最大的好处和区别就是为了让项目中一些代码文件多了以后去保存更新数据时更快能够看到实际效果，也就是所谓的（热更新）

1. Uniapp中Vue3和vue2在uniapp挂载全局变量和方法的区别

   1. Vue2挂载方法和变量

import Vue from "vue"; import Echarts from "echarts"; Vue.prototype.$echarts = Echarts; new Vue({   router,   store,   render: (h) => h(App), }).$mount("#app");

图 1‑1  vue2代码

在页面使用的时候：

this.$echarts.xxx()

图 1‑2 vue2在页面使用

1.  Vue3挂载方法和变量

图 1‑3  vue3代码

在页面中的使用和vue2相同

this.$echarts.xxx()

图 1‑4  vue3代码

1. 一些uniui的组件不能在uniapp中的vue3使用

组件名	替代组件（uview）
uni-file-picker(上传文件)	u-upload
uni-rate（评分）	u-rate
uni-popup（弹窗）	u-popup（与uni-popup的使用方式不相同）
uni-list-item（vue3可以不用添加link,点击事件可以跳转，添加会报错。vue2必须添加link属性，不然点击事件不能跳转）

uniniapp中vue2和vue3的双向绑定数据区别

在vue3中任何输入框组件中v-model都不能实现数据双向绑定，得使用@input属性才能实时获取当前输入数据。

例如：

@input=”value = $event

1. Uniapp中vue3 v-for和v-if一起用的变化
   1. 作用：

v-if指令 作为一个条件渲染，当他为true的时候才会渲染出当前的节点

v-for指令 是基于一个数组来渲染列表 ，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在v-for的时候都会被要求设置Key值，而且每一个Key值都是独一无二的

1. 优先级

Vue2中v-for和v-if是可以一起用的 因为v-for的优先级比v-if的高

Vue3中不能这样使用 但是有不想在加一个结构使自己的代码更复杂，可以在外面套一层template

图 1‑5  图

1. 2 注意事项
2. 永远不要把 v-if 和 v-for 同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
3. 如果避免出现这种情况，则在外层嵌套 template （页面渲染不生成dom节点），再这一层进行 v-if 判断，然后再内部进行 v-for 循环
4. 最好这样写：

图 1‑6  图