关于vue3:基于Vue3ViteTS二次封装elementplus业务组件吾爱fen享

download：基于 Vue3+Vite+TS，二次封装 element-plus 业务组件

复制下载课程：https://www.97yrbl.com/t-979.html

MVVM，一种更好的 UI 模式 解决方案

从 Script 到 Code Blocks、Code Behind 到 MVC、MVP、MVVM - 科普
MVC
M: Model 数据模型（专门用来操作数据，数据的 CRUD）V：View 视图（对于前端来说，就是页面）C：Controller 控制器（是视图和数据模型沟通的桥梁，用于解决业务逻辑）MVVM 组成
MVVM ===> M / V / VM
M：model 数据模型
V：view 视图
VM：ViewModel 视图模型

MVC 模式 ，将应用程序划分为三大部分，实现了职责拆散
在前端中常常要通过 JS 代码来进行一些逻辑操作，最终还要把这些逻辑操作的后果当初页面中。也就是须要频繁的操作 DOM
MVVM 通过数据双向绑定让数据主动地双向同步

`V（批改数据）-> M
M（批改数据）-> V`
数据是外围
Vue 这种 MVVM 模式的框 架，不举荐开发人员手 动操作 DOM
Vue 中的 MVVM
尽管没有齐全遵循 MVVM 模型，Vue 的设计无疑受到了它 的启发。因而在文档中常常会应用 vm (ViewModel 的简称) 这个变量名示意 Vue 实例
学习 Vue 要转化思维
不要 在想着怎么操作 D OM，而是想着如何操作数据！！！
起步 – Hello Vue
装置：npm i -S vue
<!– 指定 vue 治理内容区域，须要通过 vue 展现的内容都要放到找个元素中通常咱们也把它叫做边界数据只在边界外部解析 –>

<div id="app">{{msg}}</div>

<!-- 引入 vue.js -->
<script src="vue.js"></script>

<!-- 应用 vue -->
<script>
  var vm = new Vue({
    // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载指标
    el: '#app',
    // Vue 实例的数据对象，用于给 View 提供数据
    data: {msg: 'Hello Vue'}
  })
</script>

Vue 实例
留神 1：先在 data 中申明数据，再应用数据
留神 2：能够通过 vm.$data 拜访到 data 中的所有属性，或者 vm.msg

var vm = new Vue({
  data: {msg: '大家好，...'}
})

vm.$data.msg === vm.msg // true

最罕用的形式：Mustache(插值语法)，也就是 {{}} 语法
解释：{{}}从数据对象 data 中获取数据
阐明：数据对象的属性值产生了扭转，插值处的内容都会更新
阐明：{{}}中只能呈现 JavaScript 表达式而不能解析 js 语句
留神：Mustache 语法不能作用在 HTML 元素的属性上

<h1>Hello, {{msg}}.</h1>
<p>{{1 + 2}}</p>
<p>{{isOk ? 'yes': 'no'}}</p>

<!--！！！谬误示范！！！-->
<h1 title="{{err}}"></h1>

双向数据绑定 Vue two way data binding
双向数据绑定：将 DOM 与 Vue 实例的 data 数据绑定到一起，彼此之间相互影响

数据的扭转会引起 DOM 的扭转
DOM 的扭转也会引起数据的变动
原理：Object.defineProperty 中的 get 和 set 办法

getter 和 setter：拜访器
作用：指定读取或设置对象属性值的时候，执行的操作

Vue - 深刻响应式原理
MDN - Object.defineProperty()
/*  defineProperty 语法 介绍 */
var obj = {}
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg = "1" 时 set 办法会被零碎调用 参数别离是设置后和设置前的值
  set: function (newVal, oldVal) { },
  // 读取 obj.msg 时 get 办法会被零碎调用
  get: function (newVal, oldVal) {}})

Vue 双向绑定的极简实现
分析 Vue 原理 & 实现双向绑定 MVVM

<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>

<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'),
    obj = {}

// 给对象 obj 增加 msg 属性，并设置 setter 拜访器
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg  当 obj.msg 反生扭转时 set 办法将会被调用  
  set: function (newVal) {
    // 当 obj.msg 被赋值时 同时设置给 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})

// 监听文本框的扭转 当文本框输出内容时 扭转 obj.msg
txt.addEventListener('keyup', function (event) {obj.msg = event.target.value})
</script>

关于vue3:基于Vue3ViteTS二次封装elementplus业务组件吾爱fen享

前言：

MVVM 的介绍

劣势比照

数据绑定