ref和动态组件

ref--------指引

另一种获取表单值的方法
是Vue环境中一个内置的属性.它可以使用this.$refs可以快速拿到DOM对象.
在vue中可以用jquery,可以用原生js里DOM操作获取元素,也可以用ref获取元素,但是都要尽可能减少这种操作,因为mvvm的核心就是尽可能的减少DOM操作.尽可能不要把jquery引入到vue里做事情.
v-model是经过虚拟DOM,而ref是直接操作DOM,v-model是优化过的,而ref是简单粗暴.
 
 
 

全局与局部组件

 
 
 
局部组件里的data一样是用return返回,
props:{
    name:{type:String,required:true}
}
然后子组件可以用v-text='name';拿到从父组件传过来的name的值.
 
Eg:若子组件加了生命周期函数mounted,执行顺序是什么?
 
一定是优先子组件全部加载完成,才会轮到父组件mounted加载完成。
 
 
 

动态组件

<keep-alive>
        <component is='组件名'></component>
</keep-alive>
这样给tab切换提供了一种新的方法,且它的数据也会保留着,keep-alive可以让内部模块出于激活状态。
 
示例:选项卡输入框。
①:如果用v-if做,则之前输入的内容在切换选项卡的时候会被清空,因为v-if的原理就是删除DOM节点.
②:如果用v-show的话也可以完成,因为它只是显示隐藏,但是可能性能方面不会那么完美.
③:动态组件:
这样只需要写一个component,节省代码量.
且Keep-alive可以提高用户体验
动态组件还有两个额外的生命周期
只有被keep-alive包裹的结构才有activated这个钩子函数(会在被keep-alive缓存的组件被激活时自动触发).---------------与之相对的有deactivated(当keep-alive缓存的组件停用时触发).
组件不会被重新创建,而是保持上次时刻的状态
 
posted @ 2020-07-14 14:48  落木兮  阅读(1206)  评论(0编辑  收藏  举报