首页 > 其他分享 >Vue——renderMixin【十八】

Vue——renderMixin【十八】

时间:2023-04-28 18:33:50浏览次数:49  
标签:function Vue render 十八 vm vnode ._ renderMixin

前言

经过lifecycleMixin再接下来就到了renderMixin,接下来咱们就看看renderMixin中到底有什么;

内容

renderMixin位于src/core/instance/render.ts下;

export function renderMixin(Vue: typeof Component) {
    // install runtime convenience helpers
    // 挂载各种私有方法
    installRenderHelpers(Vue.prototype)

    // $nextTick定义
    // https://v2.cn.vuejs.org/v2/api/#vm-nextTick
    Vue.prototype.$nextTick = function (fn: (...args: any[]) => any) {
        return nextTick(fn, this)
    }

    // _render定义 || 将模板转为VNode
    // https://v2.cn.vuejs.org/v2/api/#render
    Vue.prototype._render = function (): VNode {
        const vm: Component = this
        const { render, _parentVnode } = vm.$options

        if (_parentVnode && vm._isMounted) {
            // 作用域插槽
            vm.$scopedSlots = normalizeScopedSlots(
                vm.$parent!,
                _parentVnode.data!.scopedSlots,
                vm.$slots,
                vm.$scopedSlots
            )
            if (vm._slotsProxy) {
                syncSetupSlots(vm._slotsProxy, vm.$scopedSlots)
            }
        }

        // set parent vnode. this allows render functions to have access
        // to the data on the placeholder node.
        vm.$vnode = _parentVnode!
        // render self
        let vnode
        try {
            // There's no need to maintain a stack because all render fns are called
            // separately from one another. Nested component's render fns are called
            // when parent component is patched.
            setCurrentInstance(vm)
            currentRenderingInstance = vm
            vnode = render.call(vm._renderProxy, vm.$createElement)
        } catch (e: any) {
            handleError(e, vm, `render`)
            // return error render result,
            // or previous vnode to prevent render error causing blank component
            /* istanbul ignore else */
            if (__DEV__ && vm.$options.renderError) {
                try {
                    vnode = vm.$options.renderError.call(
                        vm._renderProxy,
                        vm.$createElement,
                        e
                    )
                } catch (e: any) {
                    handleError(e, vm, `renderError`)
                    vnode = vm._vnode
                }
            } else {
                vnode = vm._vnode
            }
        } finally {
            currentRenderingInstance = null
            setCurrentInstance()
        }
        // if the returned array contains only a single node, allow it
        if (isArray(vnode) && vnode.length === 1) {
            vnode = vnode[0]
        }
        // return empty vnode in case the render function errored out
        if (!(vnode instanceof VNode)) {
            if (__DEV__ && isArray(vnode)) {
                warn(
                    'Multiple root nodes returned from render function. Render function ' +
                    'should return a single root node.',
                    vm
                )
            }
            vnode = createEmptyVNode()
        }
        // set parent
        vnode.parent = _parentVnode
        return vnode
    }
}

总结

1. 私有方法挂载
2. $nextTick定义
3. _render定义

标签:function,Vue,render,十八,vm,vnode,._,renderMixin
From: https://www.cnblogs.com/wangyang0210/p/17362920.html

相关文章

  • vue3 ts 网易云信 未读数 手动设置已读已废弃
    vue3ts网易云信未读数//未读数清空$uikit.resetSessionUnread(store.sessionId.value);调用接口nim.resetSessionUnread('sessionId')重置会话未读数。将此会话未读数置为0,之后收到消息重新计算未读数。调用接口nim.setCurrSession('sessionId')设置当前会话。将此会......
  • vue3 获取asset文件夹下所有资源文件列表
     参考链接:https://www.jianshu.com/p/0f4386d19c07importpathfrom"path"; constgetLayerBgs=function(){ constimgs:any=[]; //获取所有背景图层 //读取文件的路径是否遍历文件的子目录匹配文件正则表达式 constfiles=require.context("@/a......
  • Vue项目如何配置、切换主题颜色(mixin + scss方式,简单高效)
    Action一.首先,引入scss依赖(node-sass,sass-loader)npminstallnode-sasssass-loader--save-dev1二.项目样式文件目录介绍1.此处我将项目中的公共样式文件放到了src/style目录下,其中index.scss是以供全局使用的一些基本样式,在main.js文件中引入即可全局使用(图2)。_theme.scs......
  • vue3 + ts + vite 封装 request
    npmiaxios目录 request.ts (直接复制可用)importaxiosfrom"axios";import{showMessage}from"./status";//引入状态码文件import{ElMessage}from"element-plus";//引入el提示框,这个项目里用什么组件库这里引什么//设置接口超时时间axios.defa......
  • vue3自定义指令实现el-select下拉加载更多
    1.新建js文件exportdefault(app)=>{app.directive('loadmore',{beforeMount(el,binding){constelement=el.querySelector('.t-select__dropdown');element.addEventListener('scroll',()=>{co......
  • Vue2.0和3.0区别
    一、项目初始化2.0初始化,vueinit<模板名称(webpack比较常用)>[项目名称]vueinitwebpackcli2-test3.0初始化,vuecreate[项目名称]vuecreatecli3-test二、目录结构对比2.0目录结构 3.0目录结构 3.0版本中项目环境变量配置文件没有了(dev.env.js/prod.env.js......
  • Vue2.0版本升级到vue3.0
    vue版本的升级主要步骤:一、首先需要卸载你之前的vue2.0版本输入cmd–>回车–>进入dos界面输入命令查询vue的版本:vue-Vorvue-Version输入命令卸载目前vue版本:npmuninstall-gvue-cli再输入vue版本查询命令,提示“不是可执行的命令”则表示卸载成功了。二、安装新......
  • Vue插件图片预览hevue-img-preview
    安装#安装npminstallhevue-img-preview--save#main.js引入importhevueImgPreviewfrom'hevue-img-preview'Vue.use(hevueImgPreview)#使用#//给任意对象添加任意事件,例如<img:src="imgurl"@click="previewImg(imgurl)">#//在事件里调用方法进行预......
  • 动力节点老杜Vue框架教程【五】Vuex
    Vue.js是一个渐进式MVVM框架,目前被广泛使用,也成为前端中最火爆的框架Vue可以按照实际需要逐步进阶使用更多特性,也是前端的必备技能动力节点老杜的Vue2+3全家桶教程已经上线咯!学习地址:https://www.bilibili.com/video/BV17h41137i4/视频将从Vue2开始讲解,一步一个案例,知识点......
  • 在vue中使用websocket
    封装根据项目的目录结构,在相应的文件夹下创建一个js文件,用来封装一个websocket类,假如项目中用到js的地方很多,最好把文件放在全局公共文件夹中;exportclassWS{ constructor(config){  this.ws=null;  this.url=null;  this.config=config;  ......