vue3知识点总结（一）

小徐今天学习了吗
183 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章node知识点总结（十二）中，我们学习了web开发模式，包括基于服务端渲染的传统 Web 开发模式、基于前后端分离的新型 Web 开发模式等相关知识点。今天，在这篇文章中，我们来学习vue3，包括vue3新特性、vue2响应式原理、vue3响应式原理、vite基本使用、选项API和组合API等相关知识点。

vue3

vue-next2020年09月18日，正式发布vue3.0版本。现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。

vue3新特性

  • 数据响应式数据重新实现（ES6的proxy替代ES5的Object.defineProperty）

  • 源码使用typescript进行重新编写（更好的类型推导)

  • 虚拟DOM新算法（更快，更小）

  • 提供了composition api，为了更好的逻辑复用与代码组织

  • 自定义渲染器（可以根据需求自定义各种各样的渲染器）

  • 6.Fragment，模板可以有多个根元素

  • 7.…

vue响应式数据原理

vue2响应式原理

  • Vue2.0中使用ES5中的Object.defineProperty方法实现响应式数据

  • 缺点

    • 无法监测到对象属性的动态添加和删除
    • 无法监测到数组的下标和length属性的变更

  • 解决方案

    • Vue2.0提供Vue.set方法用于动态给对象添加属性
    • Vue2.0提供Vue.delete方法用于动态删除对象的属性
    • 重写vue中数组的方法，用于监测数组的变更

vue3响应式原理

  • Vue3.0中使用ES6中的proxy语法实现响应式数据

  • 优点

    • 可以检测到代理对象属性的动态添加和删除
    • 可以监测到数组的下标和length属性的变更

  • 缺点

    • ES6的proxy语法对于低版本浏览器不支持，IE11
    • Vue3.0会针对于IE11出一个特殊的版本用于支持ie11

vite基本使用

vite是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。相对于vue-cli它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置。

vite基本使用：

  • 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称
  • 安装依赖 npm i 或者 yarn
  • 启动项目 npm run dev 或者 yarn dev 需要注意的是， Vite目前仅支持vue3.x,不兼容vue2.x项目。

选项API和组合API

Options ApI

在vue2.x项目中使用的就是项API。它的代码风格是data选项写数据，methods选项写函数...，一个功能逻辑的代码分散。它的优点是易于学习和使用，写代码的位置已经约定好。缺点是代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。

Compositon API

在vue3.0项目中将会使用组合API。它的代码风格是一个功能逻辑的代码组织在一起（包含数据，函数...）。优点在于功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护。它的缺点是需要有良好的代码组织能力和拆分逻辑能力。为了能让大家较好的过渡到vue3.0的版本来，也支持vue2.x选项API写法。

avatar
文章
阅读
粉丝