VUE基础回顾6

Posted 2020-11-22 shcs

1.ref

　　ref可以直接访问元素，而不需要使用querySelector或者其他dom节点的原生方法。

　　<div ref = "box"></div> 

　　在js中，这个原生会被存到this.$ref这个对象中，对应的键名就是为这个元素的ref属性设置的值  使用this.$ref.box访问这个元素

　　在组件中这个属性尤为有用。同一组件的代码可能在页面中出现多次，这从根本上不能为组件内的元素添加唯一类名而使用querySelector来选择该元素，相比之下ref只包含当前组件内部元素引用，总是指向该组件内的对应元素。

 

2.生命周期

　　例：如果将一个函数设置为一个组件或vue实例的created属性，他会在组件创建完成时调用。

　　8个主要生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。每个的作用这里不做过多的说明。

　　注意点：在vue2.0中，mounted钩子触发时并不能保证元素已经被添加到DOM上。想要保证元素被添加可以使用vue.nextTick()方法，也是使用this.$nextTick()调用,并同时传入一个回调函数

　　　　在回调函数中添加需要在元素被添加到DOM之后运行的代码