vue.js 在mounted，this.nextTick中 *** 作dom，报错是什么原因

在一个对象通过点击按钮增添数组，用Vueset却只能一次按下按钮增添一个，想问下如何才能动态增加数组看varscreens={};addScreen:function(){Vueset(thisscreens,'children',[]);},现在改为varscreens=[];

ref 主要有两种用法：

1、ref 加在普通的元素上，获取页面中所有含有ref属性的DOM元素。

使用的时候用this$refs（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this refs（ref值）方法（） 就可以使用了。

每个组件都有$el属性，用于获取该组件内的html元素，在mounted生命周期中才有效。

vm el获取Vue实例关联的DOM元素)，在mounted生命周期中才有效。

比方说上述想获取自定义组件tabControl，并获取它的OffsetTop。

则需要先获取该组件 , 再取OffsetTop。

在组件内设置 属性 ref='一个名称(tabControl2)', 然后通过 this el来获取组件中的DOM元素

打印ref="chatContent"的dom元素

this refsbot$el拿到组件内的html元素

van-field被当做组件对待,一直以为它得到是dom元素

el 是Vue实例的挂载目标。在实例挂载之后，元素可以用 vm$el 访问。

挂载阶段还没开始的时候， $el 属性是不可见的。Vue生命周期mounted阶段， el 被新创建的 vm$el 替换,这个时候Vue实例的挂载目标确定， DOM渲染完毕。在这个Vue实例当中，也就可以使用 vm$el 访问到 el 了。具体参考 Vue文档API

el 的作用，用于指明 Vue 实例的挂载目标。

重点关注：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版

参考 >

最近两周一直在做一个数据统计与管理系统,今天晚上在做一个需求;

场景:在父页面有一些数据表格,数据表格后面有一个 *** 作是跳转到 "我的下级"页面,要求跳转到我的下级页面之后，从我的下级页面

返回到父页面的时候,需要回到父页面跳转之前的位置;(如图;)

当时我的请求什么的都放在mounted里面;我的想法是当我进子页面时把当前的分页(第几页),以及各种搜索条件当做页面跳转的参数发给子页面，

然后由子页面返回的时候再把这些参数赋给父页面的data里面的数据，然后进行Axios请求(_)我当时觉得可行,但是在真正做起来的时候出问题了,数据的值是发生变化了，因为我用watch监听了一下；发现 当我从子页面返回的时候,currentPage(分页—当前第几页)是先赋值成默认值1,再

从1赋值成3;我寻思着，这也没错啊，页面初始化渲染先赋值默认值，但是，奇怪的事发生了，我的页面数据显示的是第三页，但是!!!我的分页组件却是第一页高亮!!!

百思不得其解,于是去百度，百度也没有出什么东西

于是自己思考这个问题,我就想mounted的性质-------实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问;

然后我就觉得 是不是css样式是跟data里面的默认值一起进行加载然后渲染到DOM上的,然后我mounted的时候css已经跟随着data的原始值

渲染到了DOM上，这样的话虽然我的值虽然改变了，但是css还是按照data默认值进行动态渲染css了

然后我就用created试了下，果然成功了

因为created的时候VUE实例还没有挂载到DOM上，这时候也可以访问到Data;经过百度后得到了如下结果;

实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组

也就是说我可以在created的时候更改data的默认值,然后data里面的数据在挂载DOM上的时候已经被改变了，原来如此啊

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误，

这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：

<template>

<div style="display: block;" ref="abc">

<!-- -->

</div>

</template>

<script>

export default {

mounted () {

consolelog(this$refsabcstylecssText)

}

}

</script>

结果是 display: block;

如果我们给一个div设定全屏背景图，就需要获取屏幕高度进行赋值:

<template>

<div ref="nana">

<!-- -->

</div>

</template>

<script>export default {

mounted () {

let w = windowinnerWidth || documentdocumentElementclientWidth || documentbodyclientWidth;

let h = windowinnerHeight || documentdocumentElementclientHeight || documentbodyclientHeight;

this$refsnanastyleheight = h +'px';

}

}

之前在公司做项目，一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题，就是在mounted(){}钩子里面使用this$refsxxx，打印出来的却是undefined？

DOM结构已经渲染出来了，但是如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态 *** 作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的。

所以如果在mounted钩子中使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM节点，这些判断下的DOM还没渲染，返回来的只能是undefined，因为在mounted阶段他们根本不存在！！！

如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理)，此时，ref、数据等等全部都挂载到DOM结构上去，在update阶段使用this$refsxxx，就100%能找到该DOM节点。

updated与mounted不同的是，在每一次的DOM结构更新，vue都会调用一次updated(){}钩子函数！而mounted仅仅渲染完成时只执行一次而已。

简单来说，只要在调试的时候，能看到元素的存在，在updated阶段都可以使用this$refsxxx找到对应的DOM节点！

ref官宣:

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

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

vue里有个生命周期

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

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

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

create 和 mounted 相关

另外在标红处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

这里我们在 chrome console里执行以下命令

下面就能看到data里的值被修改后，将会触发update的 *** 作。

有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy *** 作，后续就不再受vue控制了。

这么多钩子函数，我们怎么用呢，我想大家可能有这样的疑问吧，我也有，哈哈哈。

我们从图中看两个节点：

其实两者比较好理解，通常created使用的次数多一般用于接口获取数据，而mounted通常是在一些插件的使用或者组件的使用中进行 *** 作，比如插件chartjs的使用: var ctx = documentgetElementById(ID) ; 通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。下面看一个例子（用组件）。

可以看到输出如下：

可以看到都在created赋予初始值的情况下成功渲染出来了。

但是同时看console台如下：

可以看到第一个报了错，实际是因为找不到id，getElementById(ID) 并没有找到元素，原因如下：

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去 *** 作html的dom节点，一定找不到相关的元素而在mounted中，由于此时html已经渲染出来了，所以可以直接 *** 作dom节点，故输出了上图结果。

以上就是我自己总结的mounted和mounted的区别，写的比较简陋，记录下来，加深印象。

以上就是关于vue.js 在mounted，this.nextTick中 *** 作dom，报错是什么原因全部的内容，包括:vue.js 在mounted，this.nextTick中 *** 作dom，报错是什么原因、vm.$refs及$el、VUE开发 mounted 踩坑记等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！