【Vueの高度な知識】Vueの3つの要素(応答式+テンプレート+render関数)を詳しく述べる

Vueの3要素は何ですか?
応答:

    //           ？
    let obj = {};
    let name = 'zhangsan';
    Object.defineProperties(obj, name, {get : function() {
      console.log('name' , name)
    }, set : function() {
        console.log('name' , name)
    }})
    
    
    // 1.      Object.defineProperty
    // 2.  data      vm   
    let mv = {};
        let data = {
            price: 100,
            name: 'zhangsan'
        };
        for (let key in data) {
            (function (key) {
                Object.defineProperty(mv, key, {
                    get: function () {
                        console.log('get val');
                        return data[key];
                    },
                    set: function (val) {
                        console.log('set val');
                        data[key] = val;
                    }
                })
            })(key);
        }

Vueでテンプレートをどのように解析しますか?
テンプレートは何ですか?

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

 // 1(*****).             ………………(vue       )
 // 2.      ， v-if, v-for
 // 3.  html    ，        
 // 4.         html   
 // 5(*****).          JS  ，  ：
 //   （1）   (v-if v-for)：   JS    （    ）
 //    (2)    HTML     ，   JS    
 //    (3)   ，           JS  （render  ）

render関数?
withの使い方

var obj = {
    name: 'zhangsan',
    age: 20,
    getAddress(){
        alert('shanghai');
    }
}

//    with
function fn() {
  alert(obj.name);
  alert(obj.age);
  obj.getAddress();
}

//   with(      ！！！)
function fn1() {
  with(obj){
      alert(name);
      alert(age);
      getAddress();
  }
}

fn();
fn1();

render関数の実現メカニズム?

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

//   with          this
with(this) {
    return _c(                          // this._c
        'div',
        {
            attrs: {"id" : "app"}       // id=app
        },
        [
            _c('p', [_v(_s(price))])    // this._c('p', [_v(_s(price))])
        ]
    )
}


//        render  
var vm = new Vue({
        el: '#app',
        data: {
            price: 100
        }
    });

    function render() {
        with (vm) {
            return _c(
                'div',
                {
                    attrs: {'id': 'app'}
                },
                [
                    _c('p', [_v(_s(price))])
                ]
            );
        }
    }

    function render() {
        return vm._c(
            'div',
            {
                attrs: {'id': 'app'}
            },
            [
                // vm._v          
                // vm._s         
                // vm._c      DOM  
                vm._c('p', [vm._v(vm._s(price))])
            ]

        );
    }

render関数とvdom?

<div id="app">
        <div>
            <input type="text" v-model="title">
            <button @click="add">submitbutton>
        div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}li>
            ul>
        div>
    div>

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

// view --->  data --->   input      --->        data
// data --->  view ---> defineProperty --->         

vm._cは何ですか.render関数は何を返しますか.

vdom:jsを使用してDOm構造をシミュレート

snabdom:h関数とpatch関数Vueのv_c:snabdom関数に相当するh関数patch関数:初回レンダリングとデータ更新トリガ

    vm._update(vnode) {
        const prevNode = vm._vnode;
        vm._vnode = vnode;
        if (!prevNode) {
            //        
            vm.$el = vm.__patch__(vm.$el, vnode);
        }
        else{
            vm.$el = vm.__patch__(prevNode, vnode);
        }
    }
    
    //     vue  （  data      ，Object.defineProperty）
    function updateComponent() {
      vm._update(vm._render());
    }