シリーズ記事ディレクトリ
| コンテンツ | 参考リンク |
|---|---|
| Vueの基本的な使い方 | Vue の基本的な使い方 (Vue の最も基本的な知識ポイントをマスターするための 1 つの記事) |
| Vue通信と高度な機能 | Vue コンポーネントと高度な機能間の通信 (さまざまなコンポーネント、カスタム v-model、nextTick、スロット間の通信) |
| Vue の高度な機能 | Vue の高度な機能 (動的コンポーネント、非同期ロード、キープアライブ、ミックスイン、Vuex、Vue-Router) |
| ビューの原則 1 | Vue の原理 (MVVM モデルの理解、データ変更の詳細/監視、配列変更の監視、仮想 DOM の詳細な理解) |
| ビューの原則 2 | Vue の原則 (diff アルゴリズム、テンプレートのコンパイル、コンポーネントのレンダリングと更新、JS 実装のルーティング) |
| Vue インタビューの質問 | Web フロントエンド面接高頻度テストサイト - Vue 面接の質問 |
記事ディレクトリ
1.ビューの原則
1. MVVM モデルを理解する
コンポーネント化された
- コンポーネント化とは、ページを小さな機能モジュールに分割することです
- 各機能モジュールは、独立した機能の独自の部分に属します
- ページ全体の管理と保守が非常に簡単になります。
- asp jsp php はすでにコンポーネント化されています
- nodejsにも同様のコンポーネント化があります
データドリブン ビュー
- 従来のコンポーネントは静的にレンダリングされるだけで、更新も DOM の操作に依存します。
- データ駆動型ビュー - Vue MVVM
- データ ドリブン ビュー - React setState
MVVM モデル
2. データ変更を監視するためのコア API
- コンポーネントデータのデータが変更されると、ビューの更新がすぐにトリガーされます
- データ駆動型ビューを実装するための最初のステップ
- コア API - Object.defineProperty
- Object.defineProperty のいくつかの欠点により、Vue3.0 は Proxy を使用します。
- ただし、プロキシは互換性がなく、ポリフィルできません
Object.defineProperty() 基本的な使い方
例: 基本的な使い方
const data = {
}
const name = 'zhangsan'
Object.defineProperty(data, "name", {
get: function () {
console.log('get')
},
set: function (newVal) {
console.log('set')
name = newVal
}
})
console.log(data.name) // get zhangsan
data.name = 'lisi' // set
3. vue はどのようにデータの変更を詳細に監視しますか
Object.defineProperty の短所
- 深い監視には最後までの再帰が必要で、一度に大量の計算が必要
- 新規/削除されたプロパティを監視できません (Vue.set、Vue.delete)
例: ビューが 3 回更新され、新規および削除されたプロパティを監視できない
// 触发更新视图
function updateView() {
console.log('视图更新');
}
// 重新定义属性，监听起来
function defineReactive(target, key, value) {
// 深度监听
observer(value)
// 核心 API
Object.defineProperty(target, key, {
get() {
return value
},
set(newValue) {
if(newValue !== value) {
// 深度监听
observer(value)
// 设置新值
// 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
value = newValue
// 触发更新视图
updateView()
}
}
})
}
// 监听对象属性
function observer(target) {
if (typeof target !== 'object' || target === null) {
// 不是对象或数组
return target
}
// 重新定义各个属性（for in 也可以遍历数组）
for (let key in target) {
defineReactive(target, key, target[key])
}
}
// 准备数据
const data = {
name: 'zhangsan',
age: 20,
info: {
address: '北京' // 需要深度监听
}
}
// 监听数据
observer(data)
// 测试
data.name = 'lisi'
data.age = 21
// console.log('age', data.age)
data.x = '100' // 新增属性，监听不到 —— 所以有 Vue.set
delete data.name // 删除属性，监听不到 —— 所以有 Vue.delete
data.info.address = '上海' // 深度监听
// data.nums.push(4) // 监听数组
4. vue モニター配列の変更方法
Object.defineProperty の短所
- 深い監視には最後までの再帰が必要で、一度に大量の計算が必要
- 新規/削除されたプロパティを監視できません (Vue.set、Vue.delete)
- アレイをネイティブに監視できないため、特別な処理が必要です
例：
// 触发更新视图
function updateView() {
console.log('视图更新');
}
// 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象，原型指向 oldArrayProperty，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
arrProto[methodName] = function () {
updateView() // 触发视图更新
oldArrayProperty[methodName].call(this, ...arguments)
// 相当于 Array.prototype.push.call(this, ...arguments)
}
})
// 重新定义属性，监听起来
function defineReactive(target, key, value) {
// 深度监听
observer(value)
// 核心 API
Object.defineProperty(target, key, {
get() {
return value
},
set(newValue) {
if(newValue !== value) {
// 深度监听
observer(value)
// 设置新值
// 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
value = newValue
// 触发更新视图
updateView()
}
}
})
}
// 监听对象属性
function observer(target) {
if (typeof target !== 'object' || target === null) {
// 不是对象或数组
return target
}
// 如果是数组，就把 arrProto 赋值给数组的原型
if (Array.isArray(target)) {
target.__proto__ = arrProto
}
// 重新定义各个属性（for in 也可以遍历数组）
for (let key in target) {
defineReactive(target, key, target[key])
}
}
// 准备数据
const data = {
name: 'zhangsan',
age: 20,
info: {
address: '北京' // 需要深度监听
},
nums: [10, 20, 30]
}
// 监听数据
observer(data)
// 测试 - 监听数组
data.nums.push(4) // 监听数组
5.仮想DOM
- vdom は vue と react を実装するための重要な土台です
- diff アルゴリズムは、vdom のコアであり、最も重要な部分です。
- DOM 操作は非常にパフォーマンス集約的です
- jQueryを使用する前に、DOM操作のタイミングを自分で制御し、手動で調整できます
- Vue と React は、VDOM を使用したデータ駆動型のビューです
(1) 解決策: VDOM
- ある程度の複雑さでは、計算数を減らすことは困難です
- 計算、さらにJS計算に移行できますか? JS は非常に高速に実行されるため、
- vdom - JS で DOM 構造をシミュレートし, 最小限の変更を計算し, DOM を操作します.
(2) JSでDOM構造をシミュレートする
例: JS は DOM 構造をシミュレートします
HTML コード
<div id="div1" class="container">
<p>vdom</p>
<ul style="font-size: 20px">
<li>a</li>
</ul>
</div>
JS コード
{
tag: 'div',
props: {
className: 'container',
id: 'div1'
}
children: [
{
tag: 'p',
children: 'vdom'
},
{
tag: 'ul',
props: {
style: 'font-size: 20px'}
children: [
{
tag: 'li',
children: 'a'
}
]
}
]
}
(3) snabbdom による vdom の学習
- シンプルで強力な vdom ライブラリ、習得と使用が容易
- Vue は vdom と diff の実装を指します
- snabbdom 参照リンク
例：
<div id="container"></div>
<button id="btn-change">change</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
const snabbdom = window.snabbdom
// 定义 patch
const patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
// 定义 h
const h = snabbdom.h
const container = document.getElementById('container')
// 生成 vnode
const vnode = h('ul#list', {
}, [
h('li.item', {
}, 'Item 1'),
h('li.item', {
}, 'Item 2')
])
patch(container, vnode)
document.getElementById('btn-change').addEventListener('click', () => {
// 生成 newVnode
const newVnode = h('ul#list', {
}, [
h('li.item', {
}, 'Item 1'),
h('li.item', {
}, 'Item B'),
h('li.item', {
}, 'Item 3')
])
patch(vnode, newVnode)
// vnode = newVnode // patch 之后，应该用新的覆盖现有的 vnode ，否则每次 change 都是新旧对比
})
変更前:
変更後:
(4)vdomまとめ
- JS (vnode) で DOM 構造をシミュレートする
- 新旧の vnode を比較し、最小の更新範囲を取得し、最後に DOM を更新します
- データ駆動型ビュー モードで DOM 操作を効果的に制御する
不积跬步无以至千里 不积小流无以成江海
クリックしてフォローし、迷子にならないように、更新を続けてください...