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缓存的组件停用时触发).

组件不会被重新创建，而是保持上次时刻的状态