vue的模拟

仅供自己学习使用

1:vue都会有一个初始的模板

    <div id="container">
        {
  {count.math}}{
  {username}}
        <div v-html="htmlStr">
        </div>
        <input type="text" v-model="classes" />
        <button v-on:click="handleClick">改名</button>
        <div v-bind:id="myId">66666</div>
        {
  {allName}}
    </div>

2：实例化vue定义自己的状态,生命周期等

        var vm = new Vue({
           el:'#container',
           data:{
               username:'zhangsan',
               htmlStr:'<b>1901优秀高薪</b>',
               classes:'1901',
               myId:'werioijfo',
               count:{
                   math:90
               }
           },
           computed:{
               allName(){
                   return this.username + this.myId
               }
           },
           created(){//实例化之前执行
               console.log('craeted')
           },
           update(){
               console.log('值发生了改变')
           },
           mounted(){//dom挂在之后执行
                console.log('mounted生命周期')
               setTimeout(()=>{
                   this.htmlStr = `<span style="color:red">1901优秀高薪</span>`
                   this.count.math = 85
                   this.myId = 'ppppppp'
               },3000)
           },
           methods:{
               handleChange(e){
                   console.log(e.target.value)
               },
               handleClick(){
                   console.log(this)
                   this.username = 'wangwu'
               }
           }
       })

实现vue的实例

//定义vue类
class Vue{
    //接受参数
    constructor(options){
        // debugger;
        //挂载到this中
        this.$options = options
        this.$el = options.el
        this.$update = options.update
        
        //属性代理
        new Observer(this)
    }
}

1:将当前的实例挂载到vue上;

实现属性代理

//实例化订阅
class Observer{
    constructor(vm){
        //挂载
        this.$vm = vm
        //将options.data上的所有的属性代理到vm上
        this.proxyOptionsToVm(vm.$options.data,vm)
        //将计算属性代理到实例上
        this.proxyComputedToVm(vm.$options.computed,vm)
        //递归代理data上的所有层级属性,添加订阅模式
        this.proxyData(vm.$options.data)
    }
    proxy