Vue组件,生命周期
1.Vue中的组件
组件, 类似于模版, 模块. 在项目需要重用某个模块(头部、尾部、新闻。。。)的时候,可以将模块抽取成组件,其它页面中注册组件并引用。
这里有两种组件的注册类型:
全局注册和局部注册。
通过 Vue.component
全局注册:
Vue.component('my-component-name', {
// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue
) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。
全局注册虽然很方便,但有以下几个问题:
- 全局注册,但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中。
- 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性。
相比之下,局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确,并且对 tree-shaking 更加友好。
局部注册需要使用 components
选项:
<script>
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
}
}
</script>
<template>
<ComponentA />
</template>
对于每个 components
对象里的属性,它们的 key 名就是注册的组件名,而值就是相应组件的实现。
请注意:局部注册的组件在后代组件中并不可用。在这个例子中,ComponentA
注册后仅在当前组件可用,而在任何的子组件或更深层的子组件中都不可用。
体验:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<sangyu v-for="item in items" v-bind:sang="item"></sangyu>
</div>
<script>
Vue.component("sangyu",{
props: ["sang"],
template: "<li>{
{sang}}</li>"
});
new Vue({
el: "#app",
data: {
items: ["Java","前端","MySQL"]
}
});
</script>
</body>
</html>
2.Vue的生命周期
vue在生命周期中有这些状态:
- beforeCreate:创建VUE对象之前执行,此时data中的数据还未初始化,el还未关联到对应的id
- created:创建VUE对象之后执行,此时data中的数据已经初始化,但el还未关联到对应的id,插值表达式没有替换
- beforeMount:对象挂载之前执行,此时el已经关联到对应对象,但{ {}}表达式还未加载
- mounted:对象挂载之后执行,此时{ {}}表达已经加载,执行完mounted之后开始正常执行js代码
- beforeUpdate:data数据更新前执行,此时data中和vue中的dom的数据已经更新,但是{ {}}表达式中引用的还没有更新
- updated:数据更新后执行,{ {}}表达式中引用也更新
- beforeDestory:vue对象销毁前执行
- destroyed:vue对象销毁后执行
Vue在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。那么,在这些vue钩子中,vue实例到底执行了那些操作
<div id="app">
{
{info}}
</div>
<!-- js -->
<script>
// if不成立则没有元素,show不成立则元素存在但是display为none
//创建vue对象,指定vue监控的区域
var v = new Vue({
el: "#app",//el表示为当前vue绑定的区域
data: {
//data表示在vue对象中存放的modal数据
info: "hello world",
},
//创建之前 : 啥都没有
beforeCreate: function () {
show('创建之前',this);
},
//创建之后 :data有了
created: function () {
show('创建之后',this);
},
//挂载之前 :el有了,info没有替换
beforeMount: function () {
show('挂载之前',this);
},
//挂载之后 :el有了,info有替换
mounted: function () {
show('挂载之后',this);
},
//修改之前 : vue中data修改了,但是document的data没有修改
beforeUpdate: function () {
show('修改之前',this);
},
//修改之后 : vue中data修改了,document的data也修改了
updated: function () {
show('修改之后',this);
},
//销毁之前 :
beforeDestroy: function () {
show('销毁之前',this);
},
//销毁之后 :
destroyed: function () {
show('销毁之后',this);
}
});
//定义一个函数用于观察vue中的信息
function show(process,obj){
//process表示为阶段字符串,obj为vue对象
console.log(process);
console.log('vue对象中data的数据:'+obj.info);
console.log('vue中挂载的el对象:');
console.log(obj.$el);
console.log(document.getElementById('app').innerHTML);
console.log('----------------------------------');
}
//手动销毁vue对象
v.$destroy();
</script>
属性:
vm.$el
获取Vue实例关联的DOM元素;
vm.$data
获取Vue实例的data选项(对象)
vm.$options
获取Vue实例的自定义属性(如vm.$options.methods,获取Vue实例的自定义属性methods)
vm.$refs
获取页面中所有含有ref属性的DOM元素(如vm.$refs.hello,获取页面中含有属性ref = “hello”的DOM元素,如果有多个元素,那么只返回最后一个)