Function updateDOMProps

vue.js:10515–10583

(oldVnode, vnode)

     *   更新真实dom的props属性
     *  */
    function updateDOMProps(oldVnode, vnode) {

        if (isUndef(oldVnode.data.domProps) && isUndef(vnode.data.domProps)) {
            return
        }
        var key, cur;
        var elm = vnode.elm;
        var oldProps = oldVnode.data.domProps || {}; //获取旧的props属性
        var props = vnode.data.domProps || {}; //获取新的props
        // clone observed objects, as the user probably wants to mutate it
        //克隆观察到的对象，因为用户可能希望对其进行修改
        if (isDef(props.__ob__)) { //如果是props添加了观察者，重新克隆他，这样就可以修改了
            props = vnode.data.domProps = extend({}, props);
        }
        consolelog(props)
        consolelog(oldProps)

        for (key in oldProps) { //循环旧的props属性，如果没有定义了 就给空
            if (isUndef(props[key])) {
                elm[key] = '';
            }
        }
        for (key in props) { //循环新的props属性
            cur = props[key]; //获取props 的值
            // ignore children if the node has textContent or innerHTML,
            // as these will throw away existing DOM nodes and cause removal errors
            // on subsequent patches (#3360)
            //忽略子节点，如果节点有textContent或innerHTML，
            //因为这将丢弃现有的DOM节点并导致删除错误
            //其后的修补程式(#3360)
            if (
                key === 'textContent' ||
                key === 'innerHTML'
            ) {
                if (vnode.children) {
                    vnode.children.length = 0;
                }
                if (cur === oldProps[key]) {
                    continue
                }
                // #6601 work around Chrome version <= 55 bug where single textNode
                // replaced by innerHTML/textContent retains its parentNode property
                // #6601解决Chrome版本<= 55的bug，其中只有一个textNode
                //被innerHTML/textContent替换后，保留了它的parentNode属性
                if (elm.childNodes.length === 1) { //文本节点
                    elm.removeChild(elm.childNodes[0]);
                }
            }

            if (key === 'value') {
                // store value as _value as well since
                // non-string values will be stringified
                //将value存储为_value以及since
                //非字符串值将被字符串化
                elm._value = cur;
                // avoid resetting cursor position when value is the same
                // 当值相同时，避免重置光标位置
                var strCur = isUndef(cur) ? '' : String(cur); //转义成字符串