Compared with the components in Vue, it has a deeper understanding, and there is less pressure when you want source code analysis in the later stage; Then you have to learn VueComponent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueComponent Constructor</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
</div>
</body>
<script src="indexJS.js"></script>
</html>
Vue.config.productionTip = false
const school = Vue.extend({
template:`
<div>
<h2>School name:{{name}}</h2>
<h2>School address:{{address}}</h2>
</div>
`,
data(){
return{
name: 'bilibili',
address: 'Shanghai'
}
}
})
new Vue({
el: '#root',
components:{school}
})
After studying one component, other components are the same
Let's output school
console.log(school)
@ ƒ VueComponent (options) {
this._init(options);
}
Not an array, not a general object, is essentially a constructor
VueComponent is not only called, but also called with the new keyword
Every call to Vue extend. All returned is a new VueComponent!!
const hello = Vue.extend({
template:`<h2>{{msg}}</h2>`,
data(){
return{
msg:'How do you do!'
}
}
})
console.log('@',school)
console.log('#',hello)
@ ƒ VueComponent (options) {
this._init(options);
}
# ƒ VueComponent (options) {
this._init(options);
}
It looks the same, but it's different
console.log('@',school === hello)
@ false
school.a = 100
console.log('school.a=',school.a,'hello.a=',hello.a)
school.a= 100 hello.a= undefined
Search in the source code:
Vue.extend = function (extendOptions) {
/*......*/
var Sub = function VueComponent (options) {
this._init(options);
};
/*........*/
return Sub
};
As soon as you call Vue Extend creates a variable (Sub) for you
The value of Sub is
var Sub = function VueComponent (options) {
this._init(options);
};
It return s Sub
VueComponent is now defined and returned to you; Not sharing a VueComponent
VueComponent also has a data broker
As like as two peas, the output of VueComponent is the instance object, but this instance object is exactly the same as vm.
The data in the data is proxied to the VueComponent, and this in extend() refers to the VueComponent, which can be abbreviated as vc. The functions of vc and vm are the same
const vm = new Vue({
el: '#root',
components:{
school,
hello
}
})
> vm
< Vue {_uid: 0, _isVue: true, $options: {...}, _renderProxy: Proxy, _self: Vue, ...}
$attrs: (...)
$children: Array(2)
0: VueComponent {_uid: 1, _isVue: true, $options: {...}, _renderProxy: Proxy, _self: VueComponent, ...}
1: VueComponent {_uid: 2, _isVue: true, $options: {...}, _renderProxy: Proxy, _self: VueComponent, ...}
length: 2
summary
About VueComponent:
1. The essence of the school component is a VueComponent(options). And it's not defined by the programmer. It's Vue Generated by extend.
2. We just need to write < school / > or < School > < / School > Vue will help us create an instance object of the school component when parsing, that is, Vue will help us execute: new VueComponent(options)
3. Special attention: every time Vue is called extend. All returned is a new VueComponent!!
4. About this point:
(1). In component configuration:
The data function, the functions in methods, the functions in watch, and the functions in computed all have this as the VueComponent instance object.
(2). In the new vue() configuration:
The data function, the functions in methods, the functions in watch, and the functions in computed all have this as Vue instance object
**5. The instance object of VueComponent, hereinafter referred to as VC (also known as component instance object). The functions in methods, watch and computed are all VueComponent instance objects.
(2). In the new vue() configuration:
The data function, the functions in methods, the functions in watch, and the functions in computed all have this as Vue instance object
**5. The instance object of VueComponent is hereinafter referred to as the function in VC (also known as component instance object), the function in watch and the function in computed. Their this is VueComponent instance object.
(2). In the new vue() configuration:
The data function, the functions in methods, the functions in watch, and the functions in computed all have this as Vue instance object
**5. The instance object of vuecomponent, hereinafter referred to as VC (also known as: component instance object) * *? VC (also known as: component instance object)? Is: component instance object)