Виртуальный DOM и функция рендеринга по принципу Vue

Справочные материалы Virtual dom, связанные с принципами vue:

1. Как реализовать алгоритм Virtual DOM

2. «Виртуальный дом анализа принципов Vue»

3. Официальный Vue «Документация по функциям рендеринга»

4. Анализ исходного кода функции рендеринга Vue

В процессе изучения Vue в последнее время я не очень хорошо понял принцип работы виртуальных Домов и Рендеринга, хотя официальное введение было введено, но я так и не смог его глубоко понять, поэтому нашел некоторую информацию, чтобы дополнить его. из этого, чтобы получить глубокое понимание Vue знаний.

-----------Разделительная линия--------------

Вспомните некоторые основные понятия Vue.

Цель нашего сегодняшнего исследования — понять и изучить возможности Vue.renderфункция. Если вы хотите лучше изучить VuerenderЗнания, связанные с функциями, нам нужно просмотреть некоторые основные концепции Vue. Итак, давайте сначала сделаем снимок, который показывает общий процесс Vue с точки зрения макроса:

Из приведенного выше рисунка нетрудно понять, как работает приложение Vue.Шаблон компилируется для генерации AST, а затем AST генерируетrenderФункция (функция рендеринга), функция рендеринга объединяет данные для создания дерева Virtual DOM и создает новый пользовательский интерфейс после Diff и Patch. На этой диаграмме можно коснуться некоторых основных концепций Vue:

• шаблон: шаблон Vue основан на чистом HTML, и на основе синтаксиса шаблона Vue мы можем легко объявить взаимосвязь между данными и пользовательским интерфейсом.
• AST: АСТ естьAbstract Syntax TreeАббревиатура Vue использует синтаксический анализатор HTML для анализа шаблонов HTML в AST и выполняет некоторую оптимизированную обработку разметки в AST для извлечения самого большого статического дерева, что удобно для пропуска Diff непосредственно в Virtual DOM.
• функция рендеринга: Функция рендеринга используется для создания виртуального DOM. Vue рекомендует использовать шаблоны для создания интерфейса нашего приложения. В базовой реализации Vue будет компилировать шаблоны в функции рендеринга. Конечно, мы также можем писать функции рендеринга напрямую, без написания шаблонов, чтобы получить лучший контроль (эта часть является нашей основной задачей сегодня). часть, чтобы знать и учиться).
• Virtual DOM: Дерево виртуального DOM, алгоритм Vue Virtual DOM Patching основан наSnabbdomреализации, и внес множество корректировок и улучшений в эти основы.
• Watcher: Каждый компонент Vue имеет соответствующийwatcher,этоwatcherбудет в компонентеrenderСоберите данные, от которых зависит компонент, и активируйте повторную визуализацию компонента при обновлении зависимости. вообще не надо писатьshouldComponentUpdate, Vue автоматически оптимизирует и обновит пользовательский интерфейс для обновления.

На картинке вышеrenderФункцию можно использовать как разделительную линию,renderЛевую часть функции можно назватьвремя компиляции, который преобразует шаблон Vue вфункция рендеринга.renderПравая сторона функции — это среда выполнения Vue, которая в основном основана на функции рендеринга для создания дерева Virtual DOM, Diff и Patch.

Основы функций рендеринга

Vue рекомендуется для подавляющего большинства случаевtemplateСоздайте свой HTML. Однако в некоторых сценариях вам необходимо использовать возможности программирования JavaScript и создавать HTML, этоrenderфункция, это больше чемtemplateближе к компилятору.

<h1>
    <a name="hello-world" href="#hello-world">
        Hello world!
    </a>
</h1>

На уровне HTML мы решили определить интерфейс компонента следующим образом:

<anchored-heading :level="1">Hello world!</anchored-heading>

Когда мы начинаем писать черезlevelизpropДинамическая генерацияheadingКомпонент метки, вы можете быстро придумать, как реализовать его следующим образом:

<!-- HTML -->
<script type="text/x-template" id="anchored-heading-template">
    <h1 v-if="level === 1">
        <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
        <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
        <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
        <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
        <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
        <slot></slot>
    </h6>
</script>

<!-- Javascript -->
Vue.component('anchored-heading', {
    template: '#anchored-heading-template',
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})

использовать в этом сценарииtemplateНе лучший вариант: сначала код многословный, чтобы вставлять элементы привязки в разные уровни заголовков, нужно многократно использовать<slot></slot>.

Хотя шаблоны отлично работают в большинстве компонентов, здесь они не очень кратки. Итак, попробуем использоватьrenderФункция переписывает приведенный выше пример:

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement(
            'h' + this.level,   // tag name 标签名称
            this.$slots.default // 子组件中的阵列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})

Намного проще и понятнее! Короче говоря, этот код намного проще, но требует хорошего знакомства со свойствами экземпляра Vue. В этом примере вам нужно знать, когда вы не используетеslotПри передаче содержимого компоненту, напримерanchored-headingсерединаHello world!, эти дочерние элементы хранятся в экземпляре компонента$slots.defaultсередина.

Узлы, деревья и виртуальный DOM

После определенного понимания некоторых концепций Vue и основ функций рендеринга нам необходимо иметь некоторое представление о принципах работы некоторых браузеров, чтобы мы могли изучитьrenderФункции важны. Например, следующий HTML-код:

<div>
    <h1>My title</h1>
    Some text content
    <!-- TODO: Add tagline -->
</div>

Когда браузер читает эти коды, он создаетДерево узлов DOMЧтобы отслеживать, так же, как если бы вы рисовали генеалогическое древо, чтобы отслеживать развитие членов семьи.

Дерево узлов HTML DOM показано на следующем рисунке:

Каждый элемент является узлом. Каждый фрагмент текста также является узлом. Даже комментарии являются узлами. Узел является частью страницы. Как и в генеалогическом дереве, у каждого узла могут быть дочерние элементы (то есть каждый раздел может содержать другие разделы).

Эффективное обновление всех этих узлов может быть затруднено, но, к счастью, вам больше не нужно делать это вручную. Вам просто нужно указать Vue, какой HTML вы хотите на странице, это может быть в шаблоне:

<h1>{{ blogTitle }}</h1>

Или в функции рендеринга:

render: function (createElement) {
    return createElement('h1', this.blogTitle)
}

В обоих случаях Vue будет автоматически обновлять страницу, даже еслиblogTitleизменилось.

виртуальный DOM

В Vue 2.0 принципиально изменена реализация уровня рендеринга, то есть введен виртуальный DOM.

После того, как компилятор Vue скомпилирует шаблоны, он компилирует эти шаблоны в функцию рендеринга. И когда функция вызывается, она будет отображать и возвращатьдерево виртуального DOM.

Когда у нас будет это виртуальное дерево, то передаем егоФункция патча, который отвечает за фактическое применение этих виртуальных DOM к реальному DOM. Во время этого процесса у Vue есть собственная реактивная система для обнаружения источников данных, на которые он полагается в процессе рендеринга. В процессе рендеринга изменения источника данных могут быть точно обнаружены после обнаружения источника данных. Затем вы можете повторно выполнить рендеринг по мере необходимости. При повторном рендеринге создается новое дерево, и новое дерево сравнивается со старым деревом, чтобы, наконец, прийти к изменениям, которые должны быть применены к реальному DOM. Наконец, изменения применяются с помощью функции Patch.

Проще говоря, в базовой реализации Vue Vue компилирует шаблоны в виртуальные функции рендеринга DOM. В сочетании с собственной системой ответов Vue Vue может интеллектуально рассчитать минимальную стоимость повторного рендеринга компонентов и применить их к операциям DOM при изменении состояния.

Vue поддерживает нас черезdataПараметр передает объект JavaScript как данные компонента, а затем Vue просматривает свойства объекта, используяObject.definePropertyметодУстановите объект описания, и изменение свойства можно будет отслеживать с помощью функции доступа.Vue создает слойWatcherслой, который записывает свойства как зависимости во время рендеринга компонента, а затем использует их как зависимостиsetterПри вызове он уведомитWatcherПересчитайте так, чтобы связанные с ним компоненты обновились, как показано ниже:

Для адаптивного контента в Vue вы можете прочитать следующие статьи:

• Глубокое понимание принципа адаптивности Vue.js
• Принцип реализации двусторонней привязки VueObject.defineproperty
• Принцип двусторонней привязки Vue и его реализация
• Отзывчивый в Vue
• Разделение реактивных представлений Vue.js на дескрипторы свойств JavaScript

Адаптивная система, которая поставляется с Vue, — это не то, о чем мы будем говорить сегодня. Вернемся к виртуальному DOM Vue. Для виртуального DOM рассмотрим простой пример, показанный на рисунке ниже, где подробно объясняется模板 → 渲染函数 → 虚拟DOM树 → 真实DOMпроцесс

На самом деле, виртуальный DOM во Vue все еще очень сложен, и я мало что о нем знаю. Если вы хотите узнать больше, вы можете прочитать @JoeRay61 "Vue принцип анализа виртуального DOM" статья.

В ходе предыдущего исследования мы изначально узнали, что Vue строитвиртуальный DOMОтслеживайте изменения в реальном DOM. Например, следующая строка кода:

return createElement('h1', this.blogTitle)

createElementЧто именно он вернет? На самом деле это не настоящий элемент DOM. его более точное название может бытьcreateNodeDescription, потому что он содержит информацию, которая сообщает Vue, какой узел нужно отобразить на странице, и его дочерние элементы. Мы описываем такой узел как «Виртуальный узел», и его часто называют «VNode». «Виртуальный DOM» — это то, что мы называем всем деревом VNode, построенным из дерева компонентов Vue.

Все дерево VNode, созданное деревом компонентов Vue, уникально. Это означает, что следующееrenderфункция недействительнаиз:

render: function (createElement) {
    var myParagraphVNode = createElement('p', 'hi')
    return createElement('div', [
        // 错误-重复的 VNodes
        myParagraphVNode, myParagraphVNode
    ])
}

Если вам действительно нужны элементы/компоненты, которые повторяются много раз, вы можете использовать для этого фабричные функции. Например, следующий примерrenderФункция работает идеально и эффективно20повторяющиеся абзацы:

render: function (createElement) {
    return createElement('div',
        Array.apply(null, { length: 20 }).map(function () {
            return createElement('p', 'hi')
        })
    )
}

Механизм рендеринга Vue

На изображении выше показана блок-схема рендеринга для автономной сборки.

Продолжайте использовать шаблон, использованный выше, для диаграммы реального процесса DOM:

Здесь будут задействованы две другие концепции Vue:

• Стройте самостоятельно: содержит компилятор шаблонов, процесс рендерингаHTML字符串 → render函数 → VNode → 真实DOM节点
• Сборка среды выполнения: не включает компилятор шаблонов, процесс рендерингаrender函数 → VNode → 真实DOM节点

Пакеты, созданные во время выполнения, будут иметь на один компилятор шаблонов меньше, чем автономные сборки. существует$mountФункции тоже разные. а также$mountМетод снова является отправной точкой всего процесса рендеринга. Используйте блок-схему, чтобы проиллюстрировать:

Как видно из этого рисунка, в процессе рендеринга предусмотрено три режима рендеринга.renderфункция,template,elОба могут отображать страницу, то есть когда мы используем Vue, есть три способа записи:

пользовательская функция рендеринга

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement (
            'h' + this.level,   // tag name标签名称
            this.$slots.default // 子组件中的阵列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})

написание шаблона

let app = new Vue({
    template: `<div>{{ msg }}</div>`,
    data () {
        return {
            msg: ''
        }
    }
})

эль правописание

let app = new Vue({
    el: '#app',
    data () {
        return {
            msg: 'Hello Vue!'
        }
    }
})

Эти три режима рендеринга в конечном итоге должны получитьrenderфункция. определяемые пользователемrenderФункция сохраняет процесс анализа программы и эквивалентна обработанномуrenderфункцию, в то время как обычныеtemplateилиelЭто просто строка, которую нужно преобразовать в AST, а затем преобразовать в AST.renderфункция.

Помните, что в любом случае получитеrenderфункция.

Какой метод вызова мы хотим использовать в процессе использования, зависит от конкретных потребностей.

Для более простой логики используйтеtemplateа такжеelЛучше, потому что оба они относятся к декларативному рендерингу, который проще для понимания пользователями, но менее гибкий, потому что конечный сгенерированныйrenderФункция оптимизируется программой посредством парсинга AST, при использовании пользовательскихrenderФункции эквивалентны людям, которые перевели логику в программы, они способны к сложной логике и обладают высокой гибкостью, но их понимание пользователей относительно плохо.

Понимание создания элемента

В использованииrenderфункции, и есть еще одна ее часть, которую необходимо освоить, а именноcreateElement. Следующее, что нам нужно знать, это какcreateElementШаблон генерируется в функции. Затем делим на две частиcreateElementпонимать.

параметр createElement

createElementМожет быть несколько параметров:

Первый параметр: {Строка|Объект|Функция}

Первый параметр дляcreateElementобязательный параметр, этот параметр может быть строкойstring, это объектobjectили функцияfunction.

<div id="app">
    <custom-element></custom-element>
</div>

Vue.component('custom-element', {
    render: function (createElement) {
        return createElement('div')
    }
})

let app = new Vue({
    el: '#app'
})

Приведенный выше пример, дающийcreateElementпрошелStringпараметр'div', то есть передается символ тега HTML. Наконец будетdivЭлемент визуализируется:

Затем поместите приведенный выше примерStringзаменить на одинObject,Например:

Vue.component('custom-element', {
    render: function (createElement) {
        return createElement({
            template: `<div>Hello Vue!</div>`
        })
    }
})

В приведенном выше примере загружается{template: '<div>Hello Vue!</div>'}объект. В настоящее времяcustom-elementРезультат рендеринга компонента выглядит следующим образом:

Кроме того, вы также можете пройтиFunction,Например:

Vue.component('custom-element', {
    render: function (createElement) {
        var eleFun = function () {
            return {
                template: `<div>Hello Vue!</div>`
            }
        }
        return createElement(eleFun())
    }
})

Окончательный результат такой же, как указано выше. ВотeleFun()функция даетcreateElement, и эта функция возвращает объект.

Второй параметр: {Объект}

createElementнеобязательный параметр, этот параметр являетсяObject. Давайте посмотрим на небольшой пример:

<div id="app">
    <custom-element></custom-element>
</div>

Vue.component('custom-element', {
    render: function (createElement) {
        var self = this

        // 第一个参数是一个简单的HTML标签字符 “必选”
        // 第二个参数是一个包含模板相关属性的数据对象 “可选”
        return createElement('div', {
            'class': {
                foo: true,
                bar: false
            },
            style: {
                color: 'red',
                fontSize: '14px'
            },
            attrs: {
                id: 'boo'
            },
            domProps: {
                innerHTML: 'Hello Vue!'
            }
        })
    }
})

let app = new Vue({
    el: '#app'
})

Окончательный сгенерированный DOM будет иметь некоторые атрибуты и содержимое.divэлементы, как показано на следующем рисунке:

Третий параметр: {Строка | Массив}

createElementТакже есть третий параметр, этот параметр является необязательным, вы можете передатьStringилиArray. Например, этот небольшой пример:

<div id="app">
    <custom-element></custom-element>
</div>

Vue.component('custom-element', {
    render: function (createElement) {
        var self = this

        return createElement(
            'div', // 第一个参数是一个简单的HTML标签字符 “必选”
            {
                class: {
                    title: true
                },
                style: {
                    border: '1px solid',
                    padding: '10px'
                }
            }, // 第二个参数是一个包含模板相关属性的数据对象 “可选”
            [
                createElement('h1', 'Hello Vue!'),
                createElement('p', '开始学习Vue!')
            ] // 第三个参数是传了多个子元素的一个数组 “可选”
        )
    }
})

let app = new Vue({
    el: '#app'
})

Последний эффект выглядит следующим образом:

На самом деле, из этих нескольких образцов нетрудно понять, что мы используем нас.Vue.component()Способ создания компонентов, вы можете использоватьrenderфункция подходитcreateElementЧто нужно сделать. Вы также обнаружите, что с помощьюVue.component()а такжеrenderУ каждого свои сильные стороны, так же как и пример кода в начале статьи, он не подходит дляVue.component()изtemplate, при использованииrenderболее удобный.

Давайте рассмотрим небольшой пример, см.templateа такжеrenderСпособ создания компонента с таким же эффектом:

<div id="app">
    <custom-element></custom-element>
</div>

Vue.component('custom-element', {
    template: `<div id="box" :class="{show: show}" @click="handleClick">Hello Vue!</div>`,
    data () {
        return {
            show: true
        }
    },
    methods: {
        handleClick: function () {
            console.log('Clicked!')
        }
    }
})

надVue.component()заменить код вrenderПосле функции можно написать:

Vue.component('custom-element', {
    render: function (createElement) {
        return createElement('div', {
            class: {
                show: this.show
            },
            attrs: {
                id: 'box'
            },
            on: {
                click: this.handleClick
            }
        }, 'Hello Vue!')
    },
    data () {
        return {
            show: true
        }
    },
    methods: {
        handleClick: function () {
            console.log('Clicked!')
        }
    }
})

Наконец, объявите экземпляр Vue и смонтируйте его вidдля#appна элементе:

let app = new Vue({
    el: '#app'
})

процесс парсинга createElement

Просто взглянитеcreateElementВ процессе парсинга эта часть требует некоторых знаний JS. В противном случае это выглядит немного болезненно:

const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2

function createElement (context, tag, data, children, normalizationType, alwaysNormalize) {

    // 兼容不传data的情况
    if (Array.isArray(data) || isPrimitive(data)) {
        normalizationType = children
        children = data
        data = undefined
    }

    // 如果alwaysNormalize是true
    // 那么normalizationType应该设置为常量ALWAYS_NORMALIZE的值
    if (alwaysNormalize) normalizationType = ALWAYS_NORMALIZE
        // 调用_createElement创建虚拟节点
        return _createElement(context, tag, data, children, normalizationType)
    }

    function _createElement (context, tag, data, children, normalizationType) {
        /**
        * 如果存在data.__ob__，说明data是被Observer观察的数据
        * 不能用作虚拟节点的data
        * 需要抛出警告，并返回一个空节点
        * 
        * 被监控的data不能被用作vnode渲染的数据的原因是：
        * data在vnode渲染过程中可能会被改变，这样会触发监控，导致不符合预期的操作
        */
        if (data && data.__ob__) {
            process.env.NODE_ENV !== 'production' && warn(
            `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
            'Always create fresh vnode data objects in each render!',
            context
            )
            return createEmptyVNode()
        }

        // 当组件的is属性被设置为一个falsy的值
        // Vue将不会知道要把这个组件渲染成什么
        // 所以渲染一个空节点
        if (!tag) {
            return createEmptyVNode()
        }

        // 作用域插槽
        if (Array.isArray(children) && typeof children[0] === 'function') {
            data = data || {}
            data.scopedSlots = { default: children[0] }
            children.length = 0
        }

        // 根据normalizationType的值，选择不同的处理方法
        if (normalizationType === ALWAYS_NORMALIZE) {
            children = normalizeChildren(children)
        } else if (normalizationType === SIMPLE_NORMALIZE) {
            children = simpleNormalizeChildren(children)
        }
        let vnode, ns

        // 如果标签名是字符串类型
        if (typeof tag === 'string') {
            let Ctor
            // 获取标签名的命名空间
            ns = config.getTagNamespace(tag)

            // 判断是否为保留标签
            if (config.isReservedTag(tag)) {
                // 如果是保留标签,就创建一个这样的vnode
                vnode = new VNode(
                    config.parsePlatformTagName(tag), data, children,
                    undefined, undefined, context
                )

                // 如果不是保留标签，那么我们将尝试从vm的components上查找是否有这个标签的定义
            } else if ((Ctor = resolveAsset(context.$options, 'components', tag))) {
                // 如果找到了这个标签的定义，就以此创建虚拟组件节点
                vnode = createComponent(Ctor, data, context, children, tag)
            } else {
                // 兜底方案，正常创建一个vnode
                vnode = new VNode(
                    tag, data, children,
                    undefined, undefined, context
                )
            }

        // 当tag不是字符串的时候，我们认为tag是组件的构造类
        // 所以直接创建
        } else {
            vnode = createComponent(tag, data, context, children)
        }

        // 如果有vnode
        if (vnode) {
            // 如果有namespace，就应用下namespace，然后返回vnode
            if (ns) applyNS(vnode, ns)
            return vnode
        // 否则，返回一个空节点
        } else {
            return createEmptyVNode()
        }
    }
}

Простая блок-схема разобрана, вы можете обратиться к следующему

Эта часть кода и блок-схема взяты из @JoeRay61's "Vue принцип анализа виртуального DOM" статья.

Используйте JavaScript вместо функции шаблона

При использовании шаблона Vue мы можем гибко использовать его в шаблоне.v-if,v-for,v-modelа также<slot>какой-то тип. но вrenderВ функции нет специального API. если вrenderЧтобы использовать их, вам нужно использовать собственный JavaScript для достижения.

v-если и v-для

существуетrenderможно использовать функциюif/elseа такжеmapреализоватьtemplateсерединаv-ifа такжеv-for.

<ul v-if="items.length">
    <li v-for="item in items">{{ item }}</li>
</ul>
<p v-else>No items found.</p>

заменитьrenderфункция, которую можно записать так:

Vue.component('item-list',{
    props: ['items'],
    render: function (createElement) {
        if (this.items.length) {
            return createElement('ul', this.items.map((item) => {
                return createElement('item')
            }))
        } else {
            return createElement('p', 'No items found.')
        }
    }
})

<div id="app">
    <item-list :items="items"></item-list>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            items: ['大漠', 'W3cplus', 'blog']
        }
    }
})

Полученный эффект выглядит следующим образом:

v-model

renderТакже нетv-modelСоответствующий API, если вы хотите реализоватьv-modelПодобные функции также должны быть реализованы с использованием собственного JavaScript.

<div id="app">
    <el-input :name="name" @input="val => name = val"></el-input>
</div>

Vue.component('el-input', {
    render: function (createElement) {
        var self = this
        return createElement('input', {
            domProps: {
                value: self.name
            },
            on: {
                input: function (event) {
                    self.$emit('input', event.target.value)
                }
            }
        })
    },
    props: {
        name: String
    }
})

let app = new Vue({
    el: '#app',
    data () {
        return {
            name: '大漠'
        }
    }
})

Обновите ваш браузер, вы можете увидеть следующий эффект:

Это то, что нужно, чтобы добраться до сути, хотя и немного более хлопотно, по сравнению сv-modelНапример, вы можете управлять более гибко.

слот

ты можешь начатьthis.$slotsПолучите статическое содержимое в списке VNodes:

render: function (createElement) {
    // 相当于 `<div><slot></slot></div>`
    return createElement('div', this.$slots.default)
}

Также доступно изthis.$scopedSlotsчтобы получить слот с ограниченной областью действия, который можно использовать в качестве функции, возвращающей VNodes:

props: ['message'],
render: function (createElement) {
    // `<div><slot :text="message"></slot></div>`
    return createElement('div', [
        this.$scopedSlots.default({
            text: this.message
        })
    ])
}

Если вы хотите передать слот с заданной областью дочернему компоненту с функцией рендеринга, вы можете использовать данные VNode вscopedSlotsплощадь:

<div id="app">
    <custom-ele></custom-ele>
</div>

Vue.component('custom-ele', {
    render: function (createElement) {
        return createElement('div', [
            createElement('child', {
                scopedSlots: {
                    default: function (props) {
                        return [
                            createElement('span', 'From Parent Component'),
                            createElement('span', props.text)
                        ]
                    }
                }
            })
        ])
    }
})

Vue.component('child', {
    render: function (createElement) {
        return createElement('strong', this.$scopedSlots.default({
            text: 'This is Child Component'
        }))
    }
})

let app = new Vue({
    el: '#app'
})

JSX

Если вы привыкли писатьtemplate, затем используйтеrenderБудет сложно писать функции, особенно при работе со сложными компонентами. Но наше использование JSX во Vue возвращает нас к синтаксису, более похожему на шаблон.

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
    el: '#demo',
    render: function (h) {
        return (
            <AnchoredHeading level={1}>
                <span>Hello</span> world!
            </AnchoredHeading>
        )
    }
})

Будуhтак какcreateElementПсевдонимы являются распространенным соглашением в экосистеме Vue и фактически требуются для JSX, если это необходимо.hЭто не работает, и это вызовет ошибку в приложении.

Суммировать

Оглядываясь назад, можно сказать, что ключевые шаги ядра рендеринга в Vue по-прежнему очень ясны:

• new Vue, выполнить инициализацию
• устанавливать$mountметод, по индивидуальному заказуrenderметод,template,elи т. д. для созданияrenderфункция
• пройти черезWatcherМониторинг изменений данных
• Когда данные меняются,renderВыполнение функции генерирует объект VNode
• пройти черезpatchМетод, сравнение старых и новых объектов VNode, добавление, изменение и удаление реальных элементов DOM с помощью алгоритма DOM Diff.

До сих пор весьnew VueПроцесс рендеринга завершен.

В данной статье основное внимание уделяетсяrenderфункциональная часть. научился пользоватьсяrenderфункции для создания компонентов и изучения ихcreateElement.

Последнее, что нужно сказать, это то, что, хотя вышеизложенное основано на обученииrenderфункция, но статья включает в себя много знаний о Vue, и она немного запутана. Новички получают необходимые им очки знаний самостоятельно. Поскольку я также новичок в вопросах знаний, связанных с Vue, если в статье что-то не так, пожалуйста, пройдите мимо великих богов, чтобы исправить их.

Оригинал от: пустыня