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元素，如果有多个元素，那么只返回最后一个）