自学前端,想学习一下vue的源码
首先,一开始学习写页面的时候,都是使用的html,css,js,如果需要绑定js里的数据,那么则需要通过js操作dom。
我的理解:vue或者其他的这些前端框架都是想让我们专注于数据和页面,简化代码中间dom和js的交互。
那具体是如何做的呢
1.初始化
首先,创建一个最基本的页面
<div>hello</div>
<script src="vue.js"></script>
<script>
console.log(Vue)
new Vue({
el:'#app',
data:{
},
props:{
},
watch:{
}
})
</script>
而在vue.js里面,我们会创建一个Vue的构造函数
function Vue(options){
this._init(options)
}
Vue.prototype._init=function(options){
console.log(options)
}
export default Vue
这里会打印传过来的参数
但是代码需要进行修改
function Vue(options){
this._init(options)
}
在_init里面console.log()相当于进行一些操作
创建init.js,并且在里面设置Vue的prototype
export function initMixin(Vue){
Vue.prototype._init=function(options){
console.log(options)
}
}
同时引入到刚才的Vue里面
import {
initMixin } from "./init"
function Vue(options){
this._init(options)
}
initMixin(Vue)
export default Vue
相当于我们先要进行初始化
initMixin.js
export function initMixin(Vue){
Vue.prototype._init=function(options){
// console.log(options)
let vm=this//this是vue的实例
console.log(vm)
vm.$options=options
//初始化状态
initState(vm)
}
}
j创建一个vm的实例,将options传入,再进行一些初始化。
initState.js
对options里面的对象一一进行初始化
export function initState(vm){
let opts=vm.$options
console.log('11')
console.log(opts)
//判断
if (opts.props){
initProps(vm)
}
if (opts