vue2 和 vue3 区别理解

2023-11-15 21:14:16

一、vue3 的理解和区别

1、性能优化

双向响应原理由Object.defineProperty改为基于ES6的Proxy，使其颗粒度更大，速度更快，且消除了之前存在的警告、重写了 Vdom ，使其突破了 Vdom 的性能瓶颈、进行了模板编译的优化、进行了更加高效的组件初始化

Tree-Shaking 的支持

支持了tree-shaking（剪枝）：像修剪树叶一样把不需要的东西给修剪掉，使 Vue3 的体积更小。

需要的模块才会打入到包里，优化后的 Vue3.0 的打包体积只有原来的一半（13kb）。哪怕把所有的功能都引入进来也只有23kb，依然比 Vue2.x 更小。像keep-alive、transition甚至v-for等功能都可以按需引入。

Composition API

composition-api是一个 Vue3 中新增的功能，它的灵感来自于React Hooks，是比mixin更强大的存在。

composition-api可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时使代码的可压缩性更强。另外，把Reactivity模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。composition-api把复杂组件的逻辑抽地更紧凑，而且可以将公共逻辑进行抽取。

Fragments

不再限制template只有一个根节点。

render函数也可以返回数组了，有点像React.Fragments

Better TypeScript Support

更好的类型推导，使得 Vue3 把TypeScript支持得非常好

Custom Renderer API

实现用DOM的方式进行WebGL编程

二、vue2 和3 的区别

1、默认进行懒观察（lazy observation）

在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

2、更精准的变更通知。

举例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。3.、新加入了 TypeScript 以及 PWA 的支持

3、vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

4、LifeCycle(Hooks) 3.0当中的生命周期与2.0的生命周期出现了很大的不同：

　　beforeCreate -> 请使用 setup()

　　created -> 请使用 setup()

　　beforeMount -> onBeforeMount

　　mounted -> onMounted

　　beforeUpdate -> onBeforeUpdate

　　updated -> onUpdated

　　beforeDestroy -> onBeforeUnmount

　　destroyed -> onUnmounted

　　errorCaptured -> one rrorCaptured

5、Composition API

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

vue2


export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登陆方法
    }
  },
  components:{
            "buttonComponent":btnComponent
        },
  computed:{
	  fullName(){
	    return this.firstName+" "+this.lastName;     
	  }
}
 
}

vue3

export default {
  props: {
    title: String
  },
  
  setup () {
    const state = reactive({ //数据
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
     //方法
    const login = () => {
      // 登陆方法
    }
    return { 
      login,
      state
    }
  }
}

6、vue3 cli的变化

vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构，3的设计更加抽象和简洁
vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
总结由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

Vue-cli3 创建的项目的目录结构

vue_project
    -- node_modules  # 安装的库依赖
    -- public  # 相当于vue-cli2中的static，打包后原封不动的放在dist中
    -- src  # 源代码
    -- .browserslistrc  # 配置浏览器相关的东西
    -- .gitignore  # 配置git相关的东西，可以配置忽略一些文件
    -- .babel.config.js  # 配置 babel
    -- package.json
    -- package-lock.json  # 显示的真实的安装版本(package.json中可能有~或者 ^ 后面加版本号，因此可能会安装不同版本的依赖)
    -- readme.md  # markdown 文档

详情查看vue3目录简介链接

码农公寓

Vue-cli3 创建的项目的目录结构

相关文章