vue中ref（$refs）用法和作用

1、ref 加在普通元素上，用this$refsname 获取到的是dom元素

2、ref 加在子组件上，用this$refsname  获取到的是 组件实例，可以使用组件的所有方法 。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

注意：

1、 ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期  mounted(){} 钩子中调用 ，或者 在 this$nextTick(()=>{}) 中调用 。

2、如果ref 是通过v-for 循环出来的， 有多个重名，那么ref的值会是一个数组  ，此时要拿到单个的ref 只需要循环就可以了。

<div id="ref-outside-component" v-on:click="consoleRef">

    <component-father ref="outsideComponentRef" ></component-father>

    <p>ref在外面的组件上</p>

</div>

    var refoutsidecomponentTem={

        template:"<div class='childComp'><h5>我是子组件</h5></div>"

    };

    var refoutsidecomponent=new Vue({

        el:"#ref-outside-component",

        components:{

            "component-father":refoutsidecomponentTem

        },

        methods:{

            consoleRef:function () {

                consolelog(this); // #ref-outside-component    vue实例

                consolelog(this$refsoutsideComponentRef);  // divchildComp vue实例，组件实例

            }

        }

    });

<div id="ref-outside-dom" v-on:click="consoleRef" >

  <component-father> </component-father>

  <p ref="outsideDomRef" >ref在外面的元素上</p>

</div>

    var refoutsidedomTem={

        template:"<div class='childComp'><h5>我是子组件</h5></div>"

    };

    var refoutsidedom=new Vue({

        el:"#ref-outside-dom",

        components:{

            "component-father":refoutsidedomTem

        },

        methods:{

            consoleRef:function () {

                consolelog(this); // #ref-outside-dom    vue实例

                consolelog(this$refsoutsideDomRef);  //  <p>标签dom元素 ref在外面的元素上</p>

            }

        }

    });

<div id="ref-inside-dom">

    <component-father></component-father>

    <p>ref在里面的元素上</p>

</div>

    var refinsidedomTem={

        template:"<div class='childComp' v-on:click='consoleRef'>" +

                      "<h5 ref='insideDomRef' >我是子组件</h5>" +

                  "</div>",

        methods:{

            consoleRef:function () {

                consolelog(this);  // divchildComp  vue实例

                consolelog(this$refsinsideDomRef);  // <h5 >我是子组件</h5>

            }

        }

    };

    var refinsidedom=new Vue({

        el:"#ref-inside-dom",

        components :{

            "component-father":refinsidedomTem

        }

    });

<div id="ref-inside-dom-all">

    <ref-inside-dom-quanjv></ref-inside-dom-quanjv>

</div>

    Vuecomponent ("ref-inside-dom-quanjv",{

        template:"<div class='insideFather'> " +

                    "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +

                    "  <p>ref在里面的元素上--全局注册 </p> " +

                  "</div>",

        methods:{

            showinsideDomRef:function () {

                consolelog(this); //这里的this其实还是divinsideFather

                consolelog(this$refsinsideDomRefAll); // <input  type="text">

            }

        }

    });

    var refinsidedomall=new Vue({

        el:"#ref-inside-dom-all"

    });

转自:>

1vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

2核心：关于VUE双向数据绑定，其核心是 ObjectdefineProperty()方法；

3介绍一下ObjectdefineProperty()方法

（1）ObjectdefineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）

（2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

这样我们就能实现js的双向数据绑定，也对这个方法有初步的了解 ；

这个例子实现的效果是：随着文本框输入文字的变化，span中会同步显示相同的文字内容；这样就实现了 model => view 以及 view => model 的双向绑定。

通过添加事件监听keyup来触发set方法，而set再修改了访问器属性的同时，也修改了dom样式，改变了span标签内的文本。

1实现效果

先来看一下vue双向数据绑定是如何进行的，以便我们确定好思考方向

2任务拆分

拆分任务可以让我们的思路更加清晰：

（1）将vue中的data中的内容绑定到输入文本框和文本节点中

（2）当文本框的内容改变时，vue实例中的data也同时发生改变

（3）当data中的内容发生改变时，输入框及文本节点的内容也发生变化

3开始任务1——绑定内容

我们先了解一下 DocuemntFragment（碎片化文档） 这个概念，你可以把他认为一个dom节点收容器，当你创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。

而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，最后我再把容器直接插入到文档就可以了！浏览器只回流了1次。

注意：还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。

举个例子：

可以看到，我的app中有两个子节点，一个元素节点，一个文本节点

但是，当我通过DocumentFragment 劫持数据一下后

注意：我的碎片化文档是将子节点都劫持了过来，而我的id为app的div内已经没有内容了。

同时要主要我while的判断条件。判断是否有子节点，因为我每次appendChild都把node中的第一个子节点劫持走了，node中就会少一个，直到没有的时候，child也就变成了undefined，也就终止了循环。

来实现内容绑定

我们要考虑两个问题，一个是如何绑定要input上，另一个是如何绑定要文本节点中。

这样思路就来了，我们已经获取到了div的所以子节点了，就在DocumentFragment里面，然后对每一个节点进行处理，看是不是有跟vm实例中有关联的内容，如果有，修改这个节点的内容。然后重新添加入DocumentFragment中。

首先，我们写一个处理每一个节点的函数，如果有input绑定v-model属性或者有{{ xxx }}的文本节点出现，就进行内容替换，替换为vm实例中的data中的内容

然后，在向碎片化文档中添加节点时，每个节点都处理一下。

创建Vue的实例化函数

效果图如下：

我们成功将内容都绑定到了输入框与文本节点上！

4、实现任务2——view => model

对于此任务，我们从输入框考虑，输入框的问题，输入框如何改变data。我们通过事件监听器keyup，input等，来获取到最新的value，然后通过ObjectdefineProperty将获取的最新的value，赋值给实例vm的text，我们把vm实例中的data下的text通过ObjectdefineProperty设置为访问器属性，这样给vmtext赋值，就触发了set。set函数的作用一个是更新data中的text，另一个等到任务三再说。

首先实现一个响应式监听属性的函数。一旦有赋新值就发生变化

然后，实现一个观察者，对于一个实例 每一个属性值都进行观察。

改写编译函数，注意由于改成了访问器属性，访问的方法也产生变化，同时添加了事件监听器，把实例的text值随时更新

实例函数中，观察data中的所有属性值，注意增添了observe

最终我们改变input中的内容能改变data中的数据，单页面却没有刷新

4、实现任务3——model => view

通过修改vm实例的属性 该改变输入框的内容 与 文本节点的内容。

这里涉及到一个问题 需要我们注意，当我们修改输入框，改变了vm实例的属性，这是1对1的。

但是，我们可能在页面中多处用到 data中的属性，这是1对多的。也就是说，改变1个model的值可以改变多个view中的值。

这就需要我们引入一个新的知识点：

订阅/发布者模式

订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。

发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应 *** 作

1

举个例子：

之前提到的set函数的第二个作用 就是来提醒订阅者 进行noticy *** 作，告诉他们：“我的text变了！” 文本节点变成了订阅者，接到消息后，立马进行update *** 作

回顾一下，每当 new 一个 Vue，主要做了两件事：第一个是监听数据：observe(data)，第二个是编译 HTML：nodeToFragement(id)。

在监听数据的过程中，我们会为 data 中的每一个属性生成一个主题对象 dep。

在编译 HTML 的过程中，会为每个与数据绑定相关的节点生成一个订阅者 watcher，watcher 会将自己添加到相应属性的 dep 容器中。

我们已经实现：修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法。

接下来我们要实现的是：发出通知 depnotify() => 触发订阅者的 update 方法 => 更新视图。

这里的关键逻辑是：如何将 watcher 添加到关联属性的 dep 中。

注意： 我把直接赋值的 *** 作改为了 添加一个 Watcher 订阅者

那么，Watcher又该做些什么呢？

首先，将自己赋给了一个全局变量 Deptarget；

其次，执行了 update 方法，进而执行了 get 方法，get 的方法读取了 vm 的访问器属性，从而触发了访问器属性的 get 方法，get 方法中将该 watcher 添加到了对应访问器属性的 dep 中；

再次，获取属性的值，然后更新视图。

最后，将 Deptarget 设为空。因为它是全局变量，也是 watcher 与 dep 关联的唯一桥梁，任何时刻都必须保证 Deptarget 只有一个值。

最终我们就实现了这个双向数据绑定功能，虽然很繁琐，但我相信，你多打几遍，一定会对你有所帮助，加油吧!!

首先来了解一下JS的运行机制。

JS执行是单线程的，它是基于事件循环的。

这里主线程的执行过程就是一个 tick ，而所有的异步结果都是通过任务队列来调度。 Event Loop 分为宏任务和微任务，无论是执行宏任务还是微任务，完成后都会进入到一下 tick ， 并在两个 tick 之间进行UI渲染 。

由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。为了确保得到更新后的DOM，所以设置了 VuenextTick() 方法。

是Vue的核心方法之一，官方文档解释如下：

先简单介绍下 MutationObserver ：MO是HTML5中的API，是一个用于监视DOM变动的接口，它可以监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等。

调用过程是要先给它绑定回调，得到MO实例，这个回调会在MO实例监听到变动时触发。这里MO的回调是放在 microtask 中执行的。

nextTick 的实现单独有一个JS文件来维护它，在 src/core/util/next-tickjs 中。

nextTick 源码主要分为两块：能力检测和根据能力检测以不同方式执行回调队列。

由于宏任务耗费的时间是大于微任务的，所以在浏览器支持的情况下，优先使用微任务。如果浏览器不支持微任务，再使用宏任务。

延迟调用优先级如下：

Promise > MutationObserver > setImmediate > setTimeout

next-tickjs 对外暴露了 nextTick 这一个参数，所以每次调用 VuenextTick 时会执行：

这里的 callbacks 没有直接在 nextTick 中执行回调函数的原因是保证在同一个 tick 内多次执行 nextTick ，不会开启多个异步任务，而是把这些异步任务都压成一个同步任务，在下一个 tick 执行完毕。

noop 的定义如下

语法 ： VuenextTick([callback, context])

参数 ：

Vue实例方法 vm$nextTick 做了进一步封装，把context参数设置成当前Vue实例。

使用 VuenextTick() 是为了可以获取更新后的DOM 。

触发时机：在同一事件循环中的数据变化后，DOM完成更新，立即执行 VuenextTick() 的回调。

应用场景：

26 版本优先使用 microtask 作为异步延迟包装器，且写法相对简单。而25 版本中，nextTick 的实现是 microTimerFunc、macroTimerFunc 组合实现的，延迟调用优先级是：Promise > setImmediate > MessageChannel > setTimeout，具体见源码。

接下来我们主要讨论在什么情况下新增节点。之所以讨论什么情况下需要新增节点，本质上是为了使用JavaScript的计算成本来换取DOM的 *** 作成本。如果一个节点已经存在于DOM中,那就不需要重新创建一个同样的节点去替换已经存在的节点。事实上，只有那些因为状态的改变而新增的节点在DOM中并不存在时，我们才需要创建一个节点并插入到 DOM中。首先，新增节点的一个很明显的场景就是，当oldVnode不存在而 vnode存在时，就需要使用vnode生成真实的DOM元素并将其插入到视图当中去。这通常会发生在首次渲染中。因为首次渲染时，DOM中不存在任何节点，所以 oldVnode是不存在的。

以上就是关于vue中ref（$refs）用法和作用全部的内容，包括:vue中ref（$refs）用法和作用、vue封装树形组件、理解VUE2双向数据绑定原理和实现等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！