前端歌谣-第玖拾肆课-捌拾-实现对象的响应式原理

最新推荐文章于 2024-08-13 11:12:51 发布

前端歌谣

最新推荐文章于 2024-08-13 11:12:51 发布

阅读量342

点赞数 10

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_41632427/article/details/134666222

版权

歌谣-最强学习合集专栏收录该内容

114 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue应用中使用`initMixin`和`state.js`进行组件初始化，重点讲解了数据的初始化过程以及`observe`和`defineReactive`函数的作用，展示了如何在Vue实例中处理数据的读取和设置操作。

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

目录结构

在这里插入图片描述

index.js

import { initMixin } from "./init"
function Vue(options){
      this._init(options)
}
initMixin(Vue)

export default Vue

init.js


import { initState } from "./state"
export function initMixin(Vue){
    Vue.prototype._init=function(options){
        // $options 获取用户的配置
        const vm=this
        vm.$options=options
        initState(vm)
    }
}

state.js

export function initState(vm){
    const opts=vm.$options
    if(opts.data){
        initData(vm)
    }
}
function initData(vm){
    let data=vm.$options.data
    typeof data==='function'?data.call(this):data
    console.log(data)
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./vue"></script>
    <script>
       const vm=new Vue({
        data(){
          return {
            name:'geyao',
            age:20
          } 
        }
       })
    </script>
</body>
</html>

配置文件

{
  "name": "geyaohandvue2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -cw"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "rollup": "^2.79.1",
    "rollup-plugin-babel": "^4.4.0"
  }
}

observe—index.js

class Observer{
    constructor(data){
        this.walk(data)
    }
    walk(data){
        Object.keys(data).forEach(key=>defineReacttive(data,key,data[key]))
    }
}
export function defineReacttive(target,key,value){
    observe(value)
      Object.defineProperty(target,key,{
        get(){
            console.log("用户取值了")
            return value
        },
        set(newValue){
            console.log("用户设置值了")
            if(newValue===value) return
            value=newValue
        }
      })
}
export function observe(data){
    if(typeof data!=='object'||data==null){
        return;
    }
    return new Observer(data)
    // 判断一个对象是否被劫持
}