VUE3学习第一章认识VUE3 新特性、配置环境

最新推荐文章于 2025-04-10 23:11:31 发布

原创

最新推荐文章于 2025-04-10 23:11:31 发布

· 355 阅读

1 ·

版权

文章标签：

#学习 #javascript #前端

本文介绍了Vue3的框架特性，包括重写双向绑定、优化的Vdom（patch flag）、Fragment支持、Suspense teleport、多v-model、Tree shaking以及Composition Api。详细讲解了如何配置开发环境，涉及Node.js安装、Vite项目搭建与Vue CLI的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 介绍VUE

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

MVVM（Model-View-ViewModel）架构

『View』：视图层（UI 用户界面）
『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）
『Model』：数据层（存储数据及对数据的处理如增删改查）

二. vue3 新特性

重写双向绑定


vue2
基于Object.defineProperty()实现
 
vue3 基于Proxy
proxy与Object.defineProperty(obj, prop, desc)方式相比有以下优势：
 
// 丢掉麻烦的备份数据
// 省去for in 循环
// 可以监听数组变化
// 代码更简化
// 可以监听动态新增的属性；
// 可以监听删除的属性 ；
// 可以监听数组的索引和 length 属性；
 
    let proxyObj = new Proxy(obj,{
   
        get : function (target,prop) {
   
            return prop in target