vue的init.js

最新推荐文章于 2024-09-09 16:52:42 发布

vues

最新推荐文章于 2024-09-09 16:52:42 发布

阅读量741

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/hbwang_716/article/details/113840633

版权

vue 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

本文深入探讨了Vue.js的初始化过程，包括`initMixin`函数如何设置实例的初始化方法，以及`$mount`方法中如何将模板转化为渲染函数生成虚拟DOM。特别地，当用户未提供`render`选项时，Vue会尝试从`template`或`el`元素获取模板并使用`compileToFunction`编译为渲染函数。

摘要由CSDN通过智能技术生成

1、 initMixin(Vue)

2、把模板转化成对应的渲染函数 => 虚拟dom

import { compileToFunction } from "./compiler/index";

export function initMixin(Vue){
    Vue.prototype._init=function(options){
        const vm=this;

        vm.$options=options;
        initState(vm);
        if(vm.$options.el){
            vm.$mount(vm.$options.el);
        }
    }
    Vue.prototype.$mount=function(el){
        const vm=this;
        const options =vm.$options;
        el=document.querySelector(el);
        // 把模板转化成  对应的渲染函数 => 虚拟dom
        // vnode => diff 更新虚拟dom

        console.log(el);
        // 没有render 用template，目前render
        if(!options.render){  
            let template=options.template;
            // 用户也没有传递template  就取el的内容作为模板
            if(!template && el){
                template=el.outerHTML;
                let render=compileToFunction(template);
                options.render=render;
            }
            // options.render; 就是渲染函数
        }
    }
}