web前端：关于vue里的$refs属性

　　Vue的设计与其他e-on产品秉承同一理念，即从用户角度出发进行设计的干净整齐的用户界面。所有的功能和控制均隐藏在深层面板中，需要时可轻松调用。

　　vue js的极大程度的帮助减少了对dom的操作，他主要通过添加ref属性，但是当获取this.$refs属性时，稍有不注意就会输出undefined导致我们对dom节点的操作报错。

　　this.$refs.xxx为undefined的几种情况记录：

　　1、在created里钩子函数中调用

　　原因：created（）在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(dataobserver)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。所以this.$refs压根就调不到那个dom,因为页面还没有挂载上去。

　　解决：在mounted()钩子函数中调用

　　注意：在此种情况中，元素节点一定是直接写在html中的，而不是通过数据或者条件渲染的

　　2、数据或条件渲染（v-if,v-show）之后的调用

　　原因：

　　/**ref

　　本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的

　　$refs不是响应式的，只在组件渲染完成后才填充

　　用于元素或子组件注册引用信息，注册完成，将会注册在父组件$refs对象上

　　调用对象是否和v-if结合使用

　　ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。

　　*/

　　解决：可以通过setTimeOut(()=>{...},0)来实现

　　代码说明：

　　<template>

　　<div>

　　<pref="testText">thisisatestdata</p>

　　<pv-if="msg"ref="msgText">{{msg}}</p>

　　<button@click="handleClick">点一下</button>

　　</div>

　　</template>

　　<script>

　　import{setTimeout}from'timers';

　　exportdefault{

　　data(){

　　return{

　　text:'messageshow',

　　msg:''

　　}

　　},

　　created(){

　　console.log(this.$refs.testText)//undefined

　　//this.$refs.testText.style.color='#f00'

　　},

　　mounted(){

　　console.log(this.$refs.testText)//<pdata-v-5752faac=""style="color:rgb(255,0,0);">thisisatestdata</p>

　　console.log(this.$refs.msgText)//undefined

　　this.$refs.testText.style.color='#f00'

　　},

　　methods:{

　　handleClick(){

　　this.msg='msgshow'

　　console.log(this.$refs.msgText)//undefined

　　setTimeout(()=>{

　　this.$refs.msgText.style.color='#eee'

　　console.log(this.$refs.msgText)//<pdata-v-5752faac=""style="color:rgb(238,238,238);">msgshow</p>

　　},0)

　　}

　　}

　　}

　　Vue的OpenGL预览引擎可以使高端GPU和多核系统的效率最大化。引擎与一个强大的多线程架构相辅相成，能够有效利用高性能显卡制作高质量视觉表现效果。