在vue中获取this.refs为空

在javascript里可以用原生方法去获取dom节点，而在vue中获取的方式是用this$refs[dom]

this$refs[dom]获取时得到undefined

vue里有个生命周期

大部分人遇到的这个问题都是在created里去获取的

下面主要简单介绍下生命周期里其中的两个：

如果在created方法里this$refs[dom]去获取dom节点是获取不到的，因为dom还没有被渲染出来，而在mounted方法里是可以拿到的

分析该过程，可拆分成两个步骤：

该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative; 子 mask 容器设置 position: absolute;并且其宽、高、偏移值根据鼠标当前位置动态计算

该部分逻辑实际上可拆分为 4 个步骤：

1 给 box 绑定 mousedown 事件

2 mousemove 事件，比较简单，只是更新 end_x，end_y 坐标

3 mouseup 事件，移除 mousemove、mouseup 事件，并调用判断方法

4 处理框选逻辑

难点是如何判断元素是否被框选住

问题可转化为 框选矩形是否与 checkbox 矩形 相交或者包含在内,即 两矩形是否相交或者存在包含关系

假定矩形 A1 左上角坐标为 (x1,y1);矩形宽度为 width1,高度为 height1;

假定矩形 A2 左上角坐标为 (x2,y2);矩形宽度为 width2,高度为 height2;

画图分析，只看水平方向：

由图可以得出，x 方向上：

令 maxX = Mathmax(x1 + width1, x2 + width2)

令 minX = Mathmax(x1, x2)

若相交或包含则必满足： maxX - minX <= width1 + width2;

同理可以容易得到 y 轴相交的判断

使用 ElementgetBoundingClientRect()获取 dom 元素位置信息

该部分逻辑如下，比较简单

难点已经攻破，遍历 checkbox 集合，每个 checkbox 都执行上面的矩形相交判断，并进行相应的勾选处理，此处不再多累述

源码

END

app$data：传进去的内容

app$props：当前组件接收到的props 对象

app$el：HTML节点

app$options：Vue里面的选项，option对里面的数据修改是没有作用的

app$optionsrender：赋值是有作用的，不过要等下一次有值发生变化，重新渲染时，才会发生变化

app$optionsrender = (h) =>{

return h('div',{},'new render function')

}

app$root：整个vue最上层的根节点

app$root === app

app$children

<item><div>app$children</div></item>

app$slots

app$scopedSlots

app$refs 模板引用

app$isServer

app$watch：监听值的变化

const unWatch = app$watch('text',(newText,oldText) => {

})

注销的方法：unWatch()；

在组件里面的写法

watch：没用的时候要销毁掉，不然会导致内存溢出。

通过watch属性放的，app用完后会自己注销。

事件监听：

app {a} ${b}');

});

${}：字符串模板

$emit 触发事件，同一个对象，可以传数据

app$emit('test',1,2)

$on的区别

$once:只监听一次

vue响应式框架

app$forceUpdate();重新渲染，会强制一直重新渲染，导致性能不好。

app$set(appobj,'a',i)重新赋值

app$delete

app$nextTick：vue是异步渲染，希望每次对dom节点的 *** 作，都渲染出来。

所有的指令都是以 v-开头，有些有缩写。

注意：默认情况下，我们在dom上面的value都是字符串，如果需要变成数字，前面加bind

<input type = 'checkbok' :value='1' v-model='arr' >

能使用

_捎谠_s采用的是html、css、js是静态资源，没有模块化，在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库，可以有如下方法实现:

1在indexhtml页面使用script标签引入

_比灰部梢允褂_dn的地址。这样引入后的内容是全局的，可以在所有地方使用。

Map

2在mainjs中使用windowmoduleName

_ar THREE = windowTHREE var GLTFLoader = THREEGLTFLoader

_ueprototypeTHREE = THREE

以上就是关于在vue中获取this.refs为空全部的内容，包括:在vue中获取this.refs为空、原生JS 实现框选功能（Vue）、vue实例属性方法，生命周期，数据绑定，computed和watch，原生指令等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！