首页 > 其他分享> > vue3学习-第一章认识Vue3

vue3学习-第一章认识Vue3

2022-06-24 12:04:15 作者：互联网

vue简介

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

MVVM架构：

View：视图层（UI用户界面）；
ViewModel：业务逻辑层（一切的JS/TS可视为业务逻辑）；
Model：数据层（存储数据以及对数据的增删查改）；

Vue2对比Vue3

Vue3最有特点的是引进了组合式API（Composition API），此前的2版本，采用的Options API，写业务代码时，实现同一个业务，可能需要写在不同的周期函数中，会导致一个逻辑的代码很分散，可维护性比较差；

Vue3的Composition API可以让用户自由组合，采用hook的方式，把同一个逻辑代码写在一起，增加了可读性；

如图，同一份逻辑代码展示同一背景色，2和3写法的最终效果：

Vue3的新特性介绍

重写了双向绑定
VDOM性能瓶颈
Fragments
Tree-Shaking的支持
Composition API

一、重写了双向绑定

Vue2 基于 Object.defineProperty()实现，Vue3则基于Proxy；

let proxyObj = new Proxy(obj, {
    get: function(target, prop) {
        return prop in target ? target[prop] : 0;
    },
    set: function(target, prop, value) {
        target[prop] = value;
    },
})

相较之下，有如下优势：

丢掉了麻烦的备份数据；
省去for in循环；
可以监听数组变化；
代码更简洁；
可以监听动态新增的属性；
可以监听删除的属性；
可以监听数组的索引和length属性；

二、Vue3优化Vdom

Vue2中，每次更新进行Diff，都是全量比对，Vue3则只对比有标记的，这样大大减少了非动态内容的对比消耗；

Vue Template Explorer 我们可以通过这个网站看到静态标记

patch flag优化静态树

<span>{{msg}}</span>
<span>Hello world!</span>
<div :id="id">
  <span :class="b">Hello world!</span>
</div>

Vue3编译后的Vodm：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),
    _createElementVNode("span", null, "Hello world!"),
    _createElementVNode("div", { id: _ctx.id }, [
      _createElementVNode("span", {
        class: _normalizeClass(_ctx.b)
      }, "Hello world!", 2 /* CLASS */)
    ], 8 /* PROPS */, ["id"])
  ], 64 /* STABLE_FRAGMENT */))
}

新增了patch flag标记：

TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
BALL = -2

Vu3在创建Vdom，除了模拟出dom本身的基本信息外，还给它加了一个标记：1 /*TEXT*/;

这个标记就叫做patch flag(补丁标记)；

当Vue的Diff算法走到_createBlock函数时，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效；

三、Vue3优化Vdom

vue3 允许我们支持多个根节点

<template>
    <div>12</div>
    <div>23</div>
</template>

同时支持render JSX 写法

render() {
        return (
            <>
                {this.visable ? (
                    <div>{this.obj.name}</div>
                ) : (
                    <div>{this.obj.price}</div>
                )}
                <input v-model={this.val}></input>
                {[1, 2, 3].map((v) => {
                   return <div>{v}-----</div>;
                })}
            </>
        );
    },

同时新增了 Suspense 和多 v-model 用法;

四、Vue3 Tree shaking

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码

在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到

而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中

就是比如你要用watch 就是import { watch } from 'vue'其他的computed 没用到就不会给你打包减少体积

五、Vue 3 Composition Api

Setup 函数式编程也叫vue Hook

例如 ref reactive watch computed toRefs toRaws，后面学了再转载；

原文链接：https://blog.csdn.net/qq1195566313/article/details/122768533

标签：Vue,target,代码,Vue3,第一章,API,vue3,prop
来源： https://www.cnblogs.com/yuanlit/p/16408272.html

vue3学习-第一章 认识Vue3