标准化开发时的嵌套：
在实际开发中，通常会创建一个 APP 组件作为根组件，由这个根组件去管理其它的组件，而 Vue 实例只需要管理这个 APP 组件就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue2标准化开发时的嵌套</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="APP"></div>
<script>
// 创建组件一
const FrameHead = {
template: `
<div>
<p>{{name}}</p>
</div>
`,
data() {
return {
name:"组件一"
}
}
}
// 创建组件二
const FrameBody = {
template: `
<div>
<p>{{name}}</p>
</div>
`,
data() {
return {
name:"组件二"
}
}
}
// 创建最大的根组件，由它来管理其它的组件
const app = {
template: `
<div>
<frame-head></frame-head>
<frame-body></frame-body>
</div>
`,
components:{
FrameHead,
FrameBody
}
}
const vm = new Vue({
template:`<app></app>`,
el: "#APP",
components: {app}
});
</script>
</body>
</html>
VueComponent 构造函数【扩展】：
<div id="APP">
<my-code></my-code>
</div>const MyCode = Vue.extend({
template: `
<div>
<p>{{name}}</p>
</div>
`,
data() {
return {
name:"你好呀！"
}
}
})
console.log(MyCode); // VueComponent
const vm = new Vue({
el: "#APP",
components: {
MyCode
}
});注：其实组件就是一个构造函数 VueComponent 。
关于 VueComponent：
- 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 自动生成的。
- 我们只要使用组件，Vue 解析时就会帮我们创建这个组件的实例对象，也就是 Vue 帮我们执行了 new VueComponent(options) 这个构造函数。
- 特别注意：每次调用 Vue.extend，返回的都是一个全新的 VueComponent 。- 组件中的 this 指向：data 函数、methods 中的函数、watch 中的函数、computed 中的函数，它们的 this 均是【VueComponent 实例对象】。
- Vue 实例中的 this 指向：data 函数、methods 中的函数、watch 中的函数、computed 中的函数，它们的 this 均是【Vue 实例对象】。
Vue 实例与 VueComponent 的内置关系：
// 查看 VueComponent 和 Vue 实例的关系
console.log( MyCode.prototype.__proto__ === Vue.prototype ); // true
- 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象 VueComponent 可以访问到 Vue 原型上的属性和方 法。
注：Vue 强制更改了 VueComponent 的原型对象指向 Object 的原型对象的隐式链，将其改到指向 Vue 的原型对象上。
原创作者：吴小糖
创作时间：2023.5.17
