Vue 구현의 세 단계(코드 포함)

이 글은 Vue 구현(코드 포함)에 대한 3단계 설명을 제공합니다. 이는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Vue는 오늘날 널리 사용되는 프레임워크입니다. Vue가 인기 있는 이유는 대략 다음과 같습니다.

1. DOM 구조를 변경하는 전통적인 작업은 매우 낭비적인 작업입니다(즉, 느립니다).
2. DOM 구조를 변경하는 논리를 js 레이어에 넣으면 성능이 향상될 수 있습니다.
3. 데이터와 뷰의 분리는 객체지향 프로그래밍에 더 가깝습니다. mvvm

vue의 구현도 React처럼 가상 DOM을 사용하여 구현됩니다. 템플릿을 통해.

vue를 구현하는 단계는 아마도 다음 세 단계일 것입니다.

1. 응답성: vue는 dota의 각 속성 값 변경을 어떻게 모니터링합니까?
2. 템플릿 엔진: Vue의 템플릿은 어떻게 구문 분석되고 지침은 어떻게 처리되나요?
3. 템플릿 렌더링: 데이터의 데이터를 템플릿에 추가하고 HTML로 렌더링하는 방법은 무엇입니까?

1단계: 반응형

반응성 구현은 주로 개체 메서드에 의존합니다.

Object.defineProperty

이 메서드는 개체의 속성 변경을 모니터링하고 논리적 처리를 수행할 수 있습니다

dome 다음과 같습니다. :

    var obj={}
    var _name ='zhangsan'
    Object.defineProperty(obj,'name',{
        get:function() {
            console.log('get')
            return _name
        },
        set: function(newVal) {
            console.log('set')
            _name=newVal
        }
    })

여기서 name 값을 변경하거나 name 값에 액세스하면 인쇄된 정보를 얻을 수 있습니다

그리고 vue의 시뮬레이션 구현은 아마도 다음과 같을 것입니다.

        var vm ={}
        var data={name:'张三',age:20}
        var key,value;
        for(key in data) {
            (function(key){
                Object.defineProperty(vm,key,{  //绑定到vm上
                    get:function(){
                        console.log('get')
                        return data[key];
                    },
                    set:function(newVal){
                        console.log('set');
                        data[key]=newVal
                    }
                })
            })(key)  //闭包处理
        }

사실 Java를 공부한 학생들은 익숙할 것입니다. 이를 통해 Get 및 set 메소드를 Java 클래스에서 직접 생성할 수 있습니다.

2단계: 템플릿 구문 분석

다음 이유로 템플릿을 js 코드로 변환해야 합니다.
1. js 이를 달성하려면.
2. 가상 돔의 렌더링은 js를 사용하여 이루어져야 합니다. (렌더링 기능)

템플릿 1

    <div id="app">
        <p>{{price}}</p>
    </div>

템플릿 1로 변환된 렌더

           with(this) { //this就是vm
                return _c(
                    'p',
                    {
                        attrs:{'id':'app'}
                    },
                    [
                        // _c是createElement
                        // _v是createTextVNode
                        // _s是toString方法
                        _c('p',[_v(_s(price))])
                    ]
                )
            }

템플릿 2

    <div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>

템플릿 2로 변환된 렌더

           with (this) {
                return _c(
                    'p',
                    { attrs: { "id": "app" } },
                    [
                        _c(
                            'p',
                            [
                                _c(
                                    'input',
                                    {
                                        //指令
                                        directives: [
                                            {
                                                name: "model",
                                                rawName: "v-model",
                                                value: (title),    //vm.title
                                                expression: "title"
                                            }
                                        ],
                                        domProps: {
                                            "value": (title) //vm.title 
                                        },
                                        on: {
                                            "input": function ($event) {
                                                if ($event.target.composing) return;
                                                title = $event.target.value
                                            }
                                        }
                                    }
                                ),
                                _v(" "),
                                _c(
                                    'button',
                                    {
                                        on: { "click": add }  //vm.add
                                    },
                                    [
                                        _v("submit")
                                    ]
                                )
                            ]
                        ),
                        _v(" "),
                        _c(
                            'p',
                            [
                                _c(
                                    'ul',
                                    _l(
                                        (list), function (item) {
                                            return _c(
                                                'li',
                                                [
                                                    _v(_s(item))
                                                ]
                                            )
                                        }
                                    )
                                )
                            ]
                        )
                    ]
                )
                 }

렌더링에 사용된 렌더 함수입니다

3단계: 템플릿 추가 데이터 html

vm._update(Vnode) {
    const prevVonde=vm._Vnode
    vm._Vnode=Vnode;
    if(!prevVnode) {  //如果没有之前的vnode，第一次渲染
        vm.$el=vm._patch_(vm.$el,Vnode)
    }else {
        vm.$el=vm._patch_(prevVnode,Vnode)
    }
}
function updataComponent() {
    //vm._reander就是解析模板的rende函数，返回了一个vnode
    vm._update(vm._render())
}

로 렌더링됩니다. vm_.patch_에는 복잡한 diff 알고리즘이 포함되어 있습니다. 렌더링은 DOM의 차이를 기반으로 하며 많은 재귀 호출을 사용하며 세계에서 가장 빠른 무술은 깨지지 않습니다.

위 내용은 Vue 구현의 세 단계(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!