精华内容
下载资源
问答
  • Vue渲染DOM节点

    千次阅读 2019-05-17 09:07:33
    在渲染真实DOM的过程中,Vue引进了虚拟DOM的概念,虚拟DOM作为JS对象和真实DOM中间的一个缓冲存,极大的优化了JS频繁操作DOM的性能问题 浏览器的渲染流程 当浏览器接收到一个Html文件时,JS引擎和浏览器的渲染引擎...

    Virtual DOM

    Vue实例挂载的最后一个环节:渲染DOM节点。在渲染真实DOM的过程中,Vue引进了虚拟DOM的概念,虚拟DOM作为JS对象和真实DOM中间的一个缓冲存,极大的优化了JS频繁操作DOM的性能问题

    • 浏览器的渲染流程
      当浏览器接收到一个Html文件时,JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度,它首先会将html文件解析成一个DOM树,与此同时,浏览器将识别并加载CSS样式,并和DOM树一起合并为一个渲染树。有了渲染树后,渲染引擎将计算所有元素的位置信息,最后通过绘制,在屏幕上打印最终的内容。而JS引擎的作用是通过DOM相关的API去操作DOM对象,而当我们操作DOM时,很容易触发到渲染引擎的回流或者重绘。
    • 回流: 当我们对DOM的修改引发了元素尺寸的变化时,浏览器需要重新计算元素的大小和位置,最后将重新计算的结果绘制出来,这个过程称为回流。
    • 重绘: 当我们对DOM的修改只单纯改变元素的颜色时,浏览器此时并不需要重新计算元素的大小和位置,而只要重新绘制新样式。这个过程称为重绘。
      很显然回流比重绘更加耗费性能
      通过了解浏览器基本的渲染机制,我们很容易联想到当不断的通过JS修改DOM时,不经意间会触发到渲染引擎的回流或者重绘,而这个性能开销是非常巨大的。因此为了降低开销,我们可以做的是尽可能减少DOM操作。
    • 缓冲层-虚拟DOM
      虚拟DOM是优化频繁操作DOM引发性能问题的产物。虚拟DOM(下面称为Virtual DOM)是将页面的状态抽象为JS对象的形式,本质上是JS和真实DOM的中间层,当我们想用JS脚本大批量进行DOM操作时,会优先作用于Virtual DOM这个JS对象,最后通过对比将要改动的部分通知并更新到真实的DOM。尽管最终还是操作真实的DOM,但Virtual DOM可以将多个改动合并成一个批量的操作,从而减少 dom 重排的次数,进而缩短了生成渲染树和绘制所花的时间。
      我们看一个真实的DOM包含了什么:
      在这里插入图片描述
      浏览器将一个真实DOM设计得很复杂,不仅包含了自身的属性描述,大小位置等定义,也囊括了DOM拥有的浏览器事件等。正因为如此复杂的结构,我们频繁去操作DOM或多或少会带来浏览器性能问题。而作为数据和真实DOM之间的一层缓冲,Virtual DOM 只是用来映射到真实DOM的渲染,因此不需要包含操作 DOM的方法,只要在对象中重点关注几个属性即可。
    // 真实DOM
    <div id="real"><span>dom</span></div>
    
    // 真实DOM对应的JS对象
    {
        tag: 'div',
        data: {
            id: 'real'
        },
        children: [{
            tag: 'span',
            children: 'dom'
        }]
    }
    
    
    • Vnode
      Vue源码在渲染机制的优化上,同样引进了virtual dom的概念,它是用Vnode这个构造函数去描述一个DOM节点。
    var VNode = function VNode (tag,data,children,text,elm,context,componentOptions,asyncFactory) {
        this.tag = tag; // 标签
        this.data = data;  // 数据
        this.children = children; // 子节点
        this.text = text;
        ···
        ···
      };
    

    Vnode定义的属性也差不多有20几个,这里列举大部分属性,只重点关注几个关键属性:标签名,数据,子节点。其他的属性都是用来扩展Vue的灵活性。

    • Vnode的创建
      先简单回顾一下挂载的流程,挂载的过程调用的是Vue实例上$mount方法,而$mount的核心是mountComponent方法。在这之前,如果我们传递的是template模板,会经过一系列的模板编译过程,并根据不同平台生成对应代码,浏览器对应的是render函数;如果传递的是render函数,则忽略模板编译过程。有了render函数后,调用vm._render()方法会将render函数转化为Virtual DOM,最终利用vm._update()Virtual DOM渲染为真实的DOM
    Vue.prototype.$mount = function(el, hydrating) {
        ···
        return mountComponent(this, el)
    }
    function mountComponent() {
        ···
        updateComponent = function () {
            vm._update(vm._render(), hydrating);
        };
    }
    

    vm._render()方法会将render函数转化为Virtual DOM,我们看源码中如何定义的。

    // 引入Vue时,执行renderMixin方法,该方法定义了Vue原型上的几个方法,其中一个便是 _render函数
    renderMixin();//
    function renderMixin() {
        Vue.prototype._render = function() {
            var ref = vm.$options;
            var render = ref.render;
            ···
            try {
                vnode = render.call(vm._renderProxy, vm.$createElement);
            } catch (e) {
                ···
            }
            ···
            return vnode
        }
    }
    

    抛开其他代码,_render函数的核心是render.call(vm._renderProxy, vm.$createElement)部分,vm.$createElement方法会作为render函数的参数传入。这个参数也是在手写render函数时使用的createElement参数的由来

    展开全文
  • 通过__vue__属性在DOM中添加开发提示的Vue开发__vue__ 即时识别DOM中的所有Vue组件及其在代码库中的位置 :person_raising_hand: 为什么? :glowing_star: 与浏览器无关的最小替代品! :woman_detective: 无需再...
  • vue获取到dom节点 Vue-stickto (vue-stickto) A vue directive that support multiple DOM Node stick to top automatically. 支持多个DOM节点的vue指令会自动粘贴到顶部。 View demo 查看演示 Download Source ...

    vue获取到dom节点

    Vue-stickto (vue-stickto)

    A vue directive that support multiple DOM Node stick to top automatically.

    支持多个DOM节点的vue指令会自动粘贴到顶部。

    安装 (Install)

    npm install vue-stickto

    (use)

    1. import

      进口

    import Vue from 'vue'
    import VueStickto from 'vue-stickto'
    Vue.use(VueStickto)
    1. simply add the directive into a tag

      只需将指令添加到标签中

    <div v-stickto>
        
    </div>
    1. see the result

      看到结果

    如果您使用脚本标签导入 (If you're using script tag to import)

    copy the dist/VueStickto.js to the place wherever you want and <script src="[path]Vuestickto.js"/>

    dist/VueStickto.js复制到您想要的位置,然后<script src="[path]Vuestickto.js"/>

    翻译自: https://vuejsexamples.com/a-vue-directive-that-support-multiple-dom-node-stick-to-top-automatically/

    vue获取到dom节点

    展开全文
  • vue2.x 中如何获取 DOM

    万次阅读 2017-11-18 20:37:33
    vue1x如何获取 DOMvue1.x如何获取 DOM?答案是使用 v-el在 vue1.x 中,在一个组件中,为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素。 注意: 因为 HTML 不区分大小写,cameCase 名字比如 v-el...

    vue1.x如何获取 DOM?

    答案是使用 v-el

    在 vue1.x 中,在一个组件中,为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素。

    注意:
    因为 HTML 不区分大小写,cameCase 名字比如 v-el:someEl 将转为全小写。可以用 v-el:some-el 设置 this.$els.someEl

    示例:

    <span v-el:msg>hello</span>
    <span v-el:other-msg>world</span>
    
    // 调用
    this.$els.msg.textContent  // -> "hello"
    this.$els.otherMsg.textContent  // -> "world"
    

    在 vue1.x 中还有一个 v-ref 指令,有必要提一下

    在 vue1.x 中,在父组件上注册一个子组件的索引,便于直接访问。不需要表达式。必须提供参数 id。可以通过父组件的 $refs 对象访问子组件。

    注意:
    因为 HTML 不区分大小写,camelCase 名字比如 v-ref:someRef 将全转为小写。可以用 v-ref:some-ref 设置 this.$refs.someRef

    示例:

    <comp v-ref:child></comp>
    <comp v-ref:some-child></comp>
    
    // 使用
    this.$refs.child
    this.$refs.someChild
    

    如果 v-refv-for 一起用时,ref 是一个数组或对象,包含相应的子组件。

    示例:

    <comp v-ref:list v-for="item in list"></comp>
    
    // 使用
    this.$refs.list  // 值是一个数组
    

    结论:在 vue1.x 中:
    v-el 给 DOM 元素注册一个索引,便于通过所属实例的 $els 访问这个元素。
    v-ref 子组件注册一个索引,便于直接访问,可以通过父组件的 $refs 对象访问子组件。


    vue2.x如何获取 DOM?

    那么,在 vue2.x 中,上面两种情况要如何处理呢?

    一个 ref 就可以了

    ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

    <!-- vm.$refs.p will be the DOM node -->
    <p ref="p">hello</p>
    
    <!-- vm.$refs.child will be the child comp instance -->
    <child-comp ref="child"></child-comp>
    

    v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

    关于 ref 注册事件的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们-它们还不存在。 $refs 也不是响应式的,因此你不应该视图用它在模版中做数据绑定。


    扩展:
    这意味着原来
    v-el:my-element 将写成这样:ref="myElement"
    v-ref:my-component 变成了这样:ref="myComponent"
    绑定在一般元素上时,ref 指 DOM 元素,绑定在组件上时,ref 为一组件实例。

    因为 v-ref 不再是一个指令而是一个特殊的属性,它也可以被动态定义了。这样和 v-for 结合的时候是很有用的:

    <p v-for="item in items" v-bind:ref="'item' + item.id"></p>
    

    以前 v-el / v-refv-for 一起使用将产生一个 DOM 数组或者组件数组,因为没法给每个元素一个特定名字。现在你还仍然可以这样做,给每个元素一个同样的 ref

    <p v-for="item in items" ref="items"></p>
    

    和 1.x 中 不同,$refs 不是响应的,因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能是它们响应。

    另一方面,设计 $refs 主要是提供给 js 程序访问的,并不建议在模版中过度依赖使用它。因为这意味着在实例之外去访问实例状态,未被了 Vue 数据驱动的思想。

    ---------------------------(正文完)------------------------------------
    一个 Vue 的学习交流群,想进来面基的,可以点击这个logoVue学习交流,或者手动search群号:685486827


    写在最后: 约定优于配置-------软件开发的简约原则.
    -------------------------------- (完)--------------------------------------

    我的:
    个人网站: https://neveryu.github.io/neveryu/
    Github: https://github.com/Neveryu
    新浪微博: https://weibo.com/Neveryu

    更多学习资源请关注我的新浪微博…

    展开全文
  • Vue本机DOM Vue本机和React本机DOM示例。 Vue原生 React本机DOM 运作方式 通常,React Native的工作方式如下。 该示例如下所示! Vue Native将Vue转换为React,因此React Native将应用程序代码识别为React。 ...
  • vue 虚拟DOM的原理

    2020-10-14 17:29:51
    主要介绍了vue 虚拟DOM的原理,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
  • vue虚拟dom详解

    2020-08-28 22:11:26
    vue1.0 并没有虚拟dom这玩意,而是是采用数据绑定、依赖收集的方式去观察数据变化并保留对实际 DOM 元素的引用,当有数据变化时进行对应的操作,每一个观测的render Watcher 对应的就是一个真实的DOM节点。...

    从 vue1.x 设计理念说起

    对vue发展史比较熟悉的同学,应该知道这件事:

    vue1.0 并没有虚拟dom这玩意,而是采用数据绑定、依赖收集的方式去观察数据变化并保留对实际 DOM 元素的引用,当有数据变化时进行对应的操作,每一个观测的render Watcher 对应的就是一个真实的DOM节点

    好处是少量数据更新对比Virtual DOM 性能更好,坏处是大量数据更新、初始渲染性能、对比Virtual DOM  性能更差

    渲染列表时当数据全新的时候,需要销毁之前的所有实例,重新创建所有实例,最后再进行一次渲染, 相比Vir

    展开全文
  • 主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
  • vue 3.0 使用ref获取dom元素

    万次阅读 热门讨论 2020-09-24 16:00:52
    Vue 2.x获取DOM <div ref="myRef"></div> this.$refs.myRef Vue 3.0获取DOM <template> <div :ref="setRef">获取DOM元素</div> </template> <script> import { ...
  • vue如何判断dom的class

    2020-08-27 15:43:39
    主要介绍了vue如何判断dom的class,vue点击给dom添加class然后获取含有class的dom文件,具体内容详情大家参考下本
  • vue-stickto 简体中文 A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令) Online Demo Here Install npm install vue-stickto 简体中文 A vue ...
  • vue获取DOM

    2018-11-19 16:05:17
    vue 中ref 的使用注意事项 最近看别人的项目发现有些语法不能理解,所以百度进行了学习。现在总结一下。 ref 有两种用法 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用...
  • Vue 动态修改dom样式

    万次阅读 2018-07-23 16:11:45
    Vue 的核心是允许是模板语法来声明式的将数据渲染进DOM系统 修改dom样式的思路,无非就是两步: 获取dom 修改样式 一、 vm.$el 修改dom样式 获取dom节点 根节点,即被挂载的dom &amp;lt;div id=&...
  • vue中的虚拟dom

    千次阅读 2019-12-24 21:31:16
    vue为什么引入虚拟DOM? vue中虚拟DOM干了啥? vue中的虚拟DOM如何创建的? vue中的Vnode类 patch 创建新增节点 删除废弃节点 修改需要更新的节点 vue中虚拟DOM的优化 具体思路 具体实现 vue为什么引入虚拟DOM...
  • dom-diff算法 快速启动 npm run start
  • 揭秘Vue中的Virtual Dom

    千次阅读 2019-06-26 12:38:49
    Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并大大降低了内存消耗。那么,什么是Virtual DOM?为什么需要Virtual DOM?它是通过什么方式去提升页面渲染效率的呢?这是本文所要探讨的问题。 ...
  • DOM事件 vue @change

    千次阅读 2019-02-25 16:11:03
    vue @change即v-on:change 类似于js onchange 事件会在域的内容改变时发生。 @change用于el-select时,使用是正常的 @change用于el-input时,测试并非@change的问题,极可能出现在v-bind:class: 问题 1 ...
  • 下面小编就为大家分享一篇基于vue1和vue2获取dom元素的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue组件转换成dom元素 维克隆尼 (vue-cloneya) A vue component to clone DOM elements. Vue组件,用于克隆DOM元素。 View demo 查看演示 Download Source 下载源 安装 (Install) yarn add vue-cloneya # or ...
  • 主要介绍了vue监听dom大小改变案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点,但 Vue 的 Virtual Dom 实现(复刻自 snabbdom)是更加轻量化的,因此也就比 React 的实现更高效。 看到火到不行的国产前端框架vue也在用别人的 Virtual Dom...
  • [Vue源码分析] Virtual DOM

    千次阅读 热门讨论 2018-10-25 02:11:45
    最近小组有个关于vue virtual dom的分享会,提前准备一下...... [Vue源码分析]Virtual DOM 本文章涉及源码版本为Vue 2.5.2 为什么使用virtual dom 做一件事一般都先问问为什么,那么为什么使用virtual dom?真正的 ...
  • 本篇文章主要介绍了vue指令以及dom操作详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 由于出现了一个新的css属性: ,我选择了以前的工作vue-keep-ratio ,使用一种更具适应性(但很hack)的方法来实现keep dom ratio :beer_mug: 什么 这是保持dom比率的一个重要组成部分。 (仅在CSS中) 演示: ...
  • vue中操作dom

    2018-10-18 06:19:39
    **vue中如何操作底层DOM** 前言: 其实在没有学习前端框架之前使用dom操作非常的普遍,但是前端框架的一个好处就是避免使用dom底层操作,安全并且高效,但是有时候我们又不可避免的使用它,所以vuedom操作留了一...
  • vue 获取dom 1.使用res <div class="cover" ref="div"></div> 2.使用this.refs[′name′]或this.refs['name'] 或 this.refs[′name′]或this.refs.name,即可获取dom节点 this.$refs['div'] 3.获取dom的...
  • vue 虚拟dom和diff算法详解

    万次阅读 多人点赞 2021-02-23 16:23:54
    虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验。那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与作用 什么是虚拟dom ...
  • VUE获取DOM节点的方法

    千次阅读 2020-08-29 14:39:48
    vue获取DOM节点 在vue项目中,获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。 <template> <div class="contaier" ref="box" style="width...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 114,576
精华内容 45,830
关键字:

domvue

vue 订阅