vue源码1（vm初始化和data的数据监测）

luck060606

已于 2023-08-16 15:19:39 修改

阅读量77

点赞数

文章标签： vue.js 前端 javascript

于 2023-08-14 15:29:45 首次发布

本文链接：https://blog.csdn.net/luck060606/article/details/132270694

版权

本文探讨了Vue框架的初始化过程，包括创建Vue构造函数、数据代理以及数据模板的编译。在初始化阶段，Vue构造函数接收options并进行操作。数据代理确保对data的访问和修改都能被监测。对于包含对象和数组的数据，Vue使用Observer类进行深度劫持。模板编译部分，Vue根据render、template或el生成渲染函数，实现数据与视图的绑定。

摘要由CSDN通过智能技术生成

自学前端，想学习一下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