文章主题: 掌握 Vue 框架基本概念与基础应用

一、理论基础

语义化模板(HTML模板) → MVC (Model、View、Controller) → MVVM (Model View ModelView)

什么是 MVVM?

视图发生变化 => ViewModel => 更新数据

数据发生变化 => ViewModel => 更新视图

MVVM 是 Model-View-ViewModel 的缩写，是一种软件架构模式，旨在简化用户界面的开发和测试。它通常用于构建基于用户界面的应用程序，特别是在 Web 和移动应用开发中。

MVVM 包含以下三个主要组件：

Model（模型） ：负责表示应用程序的数据和业务逻辑。Model 通常是一个简单的 JavaScript 对象，它包含应用程序的数据结构和操作方法。
View（视图） ：负责将数据模型转换为用户界面的可视化展示。View 是用户界面的呈现层，通常由 HTML、CSS 和其他 UI 组件组成。
ViewModel（视图模型） ：是连接 View 和 Model 的中间层，负责管理视图的状态和行为，并将视图中的操作映射到数据模型上。ViewModel 提供了一种抽象的方式来表示视图的状态和行为，并通过数据绑定机制实现视图和模型之间的同步更新。

MVVM 的核心特性是数据绑定，它通过建立视图和数据模型之间的双向绑定关系，使得视图的状态能够自动同步到数据模型，而数据模型的变化也能够自动反映到视图上。这种双向绑定可以大大简化开发人员的工作，减少了手动操作 DOM 的复杂性，提高了代码的可维护性和可测试性。MVVM 模式广泛应用于诸如 Vue.js、AngularJS 等现代 JavaScript 框架中。

二、写法统一

如何利用 MVVM 进行写法统一和前端开发?

Vue.js利用MVVM架构实现了前端开发的写法统一和简化。通过数据驱动视图、声明式编程、组件化开发、双向数据绑定和生命周期钩子等特性，Vue.js使得开发者能够更专注于业务逻辑的实现，而不必过多关注底层的DOM操作和数据更新机制，从而提高了开发效率、降低了出错的可能性，并使得代码更加清晰和可维护。

数据双向绑定 => buildTemplate => compiler => defineReactive => tick

compiler | defineReactive | tick

利用花括号(mustache, {{}}) 构筑了数据与VM的绑定关系
通过视图绑定事件来处理数据 → v-model → :value @input

vue2 & vue3 数据双向绑定写法

<!--app.vue-->
<template>
    <div @click="()=> message++">{{message}}</div>
    <a-component v-model="data1"/>
</template>
<!--选项式写法-->
<script>
export default{
    data(){
        return{
            msg: "hello",
            state:{text:"Hello Options"}
        }
    },
    methods(){}
}
</script>

<!--组合式 api-->
<script setup>
        import {ref, reactive} from "vue"
        const message = ref("Hello Vue3")
        const state = reactive({
            text:"Hello Vue3 Reactive"
        })
</script>

buildTemplate

构建模板有两种方式

template 写法
render 写法 JSX 写法

template 方式会触发 domdiff 算法进行性能优化, 而 render 函数会整体更新。

大数据长列表, 可以改变顺序的列表尽量不要使用 render

$set

对象新增的属性(动态实时更新), 需要补充响应式监听, 增加 getter 和 setter。调用 defineReactive。

tick 的概念

render => vnode => 更新 dom

将一组数据更新之后再进行DOM更新, 比如一个函数中会触发多个数据更新, 此时所有数据更新完成之后触发 render 然后生成 Vnode 然后全量的进行 dom 更新操作, 即一个 tick 完成。

三、生命周期

面试官: vue 的生命周期是什么?

实例、数据操作、 VDom、真实 DOM

Vue2.x

创建阶段: setup 阶段(beforeCreate & created) => beforeMount => mounted
更新阶段: beforeUpdate => updated
销毁阶段: beforeDestory => destoryed

Vue3.x

setup (beforeCreate / created / beforeMount)

onMounted()

onBeforeUpdate() onUpdated()

onBeforeUnmount()

onUnmounted()

哪个阶段可以赋值? 什么时候数据绑定可以实现?

beforeCreate 和 created 对比 beforeCreate: 实例创建阶段, 创建 vue 实例, 任何操作 vue 实例的都要在该钩子之后 created: 才能对 data | props | methods | computed - 数据操作 vue3 进行了setup归一化
beforeMount 和 mounted 的区别 beforeMount:Vdom, 数据操作可以进行, 此时有虚拟节点 VNode, 但是不能操作DOM mounted: Dom, 任何操作
beforeUpdate & updated 的区别 beforeUpdate: Vdom 完成更新 updated: dom 完成更新
beforeDestory & destoryed 的区别 beforeDestory: 实例销毁之前, 全局定时器销毁, dom 绑定的事件进行销毁 destoryed: 完全被销毁

父子组件生命周期的区别

父组件 setup + beforeMount => 子组件全周期 (setup + beforeMounted + mounted) => 父组件 mounted

四、vue3 simple coding

<template>
{{ state.number }}
{{ msg }}
<div @click="handleAdd">加油</div>
</template>
<script setup>
  import {ref, reactive, computed} from "vue"
// 响应式hook reactive / ref
const state = reactive({
        number: 0
})
const number = ref(0)


// 函数
const handleAdd = () => state.number++
// 计算类型
const msg = "hello"
const addMsg = () => msg + number.value

</script>

Vue 技术探索: Vue 基础