Vue —— 响应式解析

简单介绍 defineReactive


<html lang="en">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, intial-scale=1">
	<title>Vue 响应式解析title>
  head>

  <body>
	<div id="app">div>

	<script>
	  const app = document.getElementById('app')

	  // 对单个对象使用响应式绑定
	  function defineReactive(obj, key, val) {
    
		// 监听嵌套对象
		observe(val)
		Object.defineProperty(obj, key, {
    
		  get() {
    
			console.log(`get ${
      key}: ${
      val}`)
			return val
		  },
		  // 除了要改变资深的值
		  // 还要触发与之相关值的变化
		  set(newVal) {
    
			if (newVal !== val) {
    
			  // 保证如果 newVal 是对象,再次做响应式处理
			  observe(newVal)
			  val = newVal
			  update()
			}
		  }
		})
	  }

	  // 数据更新后要触发的更新动作,如通知视图发生变化
	  function update() {
    
		app.innerText = obj.foo
	  }

	  // 使对象的第一层数据变成响应式
	  function observe(obj) {
    
		if (typeof obj !== 'object' || obj === null) return
		Object.keys(obj).forEach((key) => {
    
		  defineReactive(obj, key, obj[key])
		})
	  }
	  
	  // 处理对象动态新增的属性
	  function set(obj, key, val) {
    
		defineReactive(obj, key, val)
	  }
	script>
  body>
html>

手撸 Vue

先上图
Vue —— 响应式解析_第1张图片
接下来会将上图各部分分开解析

使用


<html>
<head>
  <meta charset="utf-8">
  <meta name

你可能感兴趣的:(Vue,vue,前端,javascript)