Vue3-笔记001-概述

最新推荐文章于 2024-06-23 12:22:42 发布

·焱·

最新推荐文章于 2024-06-23 12:22:42 发布

阅读量1.5k

点赞数 25

分类专栏： vue3学习笔记文章标签： vue

本文链接：https://blog.csdn.net/sawyer_Yan/article/details/138472984

版权

vue3学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

001-概述-目录

什么是Vue
- MVVM
Vue2与Vue3
SFC介绍
vue常见指令

什么是Vue

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

MVVM

MVVM即为（Model-View-ViewModel）架构。

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

Vue2与Vue3

vue2：Options API
vue3：Composition API

vue2具体表现如下：

<script>
export default{
    data(){
        return{

        }
    },
    methods:{

    },
    watch:{

    },
    components:{

    },
    filters:{

    },
    provide:{
        
    }
}
</script>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
const name = ref<string>('study001')
watch(name, () => {
    name + 'watch'
})
computed(() => {
    return name + 'computed'
})
onMounted(() => {
    name.value = 'onMounted'
})
</script>

vue2与vue3之间的主要区别

1.vue2和vue3双向数据绑定原理不同。
vue2的双向数据绑定是利用ES5的 Object.definePropert() 对数据进行劫持结合发布订阅模式的方式来实现的。
vue3中使用了ES6的 ProxyAPI 对数据代理。可以监听全对象和数组。

2.vue3支持多个根节点。

3.vue2使用选项式API（Options API）,vue3使用组合式API（Composition API）。

4.vue2使用data属性存放数据。vue3使用reactive和setup等来使用响应式数据。

5.vue3的setup代替了vue2的beforeCreate和created，创建的是data和methods。

6.vue3加入了Teleport独立组件，可以创建全局弹窗等。

7.vue3对TypeScript的支持更加友好，提供了完整的类型定义。

8.vue3支持 render JSX 写法。

9.vue3支持 多v-model 写法。

10.vue3支持 Tree-Shaking ，即无用代码是不会进行打包的，从而减少生产体积。

vue2与vue3的双向数据绑定

vue2基于Object.defineProperty()实现。
缺点：
对数组不太友好，需要对数组方法进行一个重写，再去劫持；
如果直接修改数组的length，是监听不到的。
vue3基于Proxy实现。
优点：
丢掉麻烦的备份数据；
省去for in 循环；
可以监听数组变化；
代码更简化；
可以监听动态新增的属性；
可以监听删除的属性；
可以监听数组的索引和 length 属性。

vue的dom性能瓶颈

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

Vue3在组件中新增了 patch flag 标记
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

SFC介绍

*.vue 文件 都由三种类型的顶层语法块所组成：<template>、<script>、<style>

<template>
每个 *.vue 文件 最多可同时包含一个顶层 <template> 块。
其中的内容会被提取出来并传递给 @vue/compiler-dom，预编译为 JavaScript 的渲染函数，并附属到导出的组件上作为其 render 选项。

<script>
每一个 *.vue 文件 可以有多个 <script> 块 (不包括<script setup>)。
该脚本将作为 ES Module 来执行。
其默认导出的内容应该是 Vue 组件选项对象，要么是一个普通的对象，要么是 defineComponent 的返回值。

<script setup>
每个 *.vue 文件 最多只能有一个 <script setup> 块 (不包括常规的 <script>)
该脚本会被预处理并作为组件的 setup() 函数 使用，也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。

<style>
一个 *.vue 文件 可以包含多个 <style> 标签。
<style> 标签可以通过 scoped 或 module attribute 将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混入。