二、Vue数据响应式原理

Object.defineProperty

vue实现数据响应式就是通过Object.defineProperty实现的

vue不支持IE8的原因之一就是因为Object.defineProperty不支持IE8,可以通过can i use网站查询。使用方法可以通过MDN查询

使用


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
<script>
  // 声明一个空对象
  const obj = {}
  // 通过Object.defineProperty向obj添加一个x属性,
  // 属性值是42
  Object.defineProperty(obj, 'x', {
    value: 42,
    // 这里设置为false,那么value是不可修改的
    // 是出于数据保护的
    writable: false
  })
script>
body>
html>

浏览器操作图
二、Vue数据响应式原理_第1张图片

Object.defineProperty里的get()和set()

get()

<script>
  // 声明一个空对象
  const obj = {}
  
  Object.defineProperty(obj, 'x', {
    // get()return的值也是不能修改的
    get() {
      return 'abcdefg'
    }
  })
script>

浏览器操作图
二、Vue数据响应式原理_第2张图片
get()取值,set()赋值

<script>
  // 声明一个空对象
  const obj = {}

  // y做一个中间值,用于过渡
  var v = 20

  // 使用Object.defineProperty来为obj定义一个x的值
  Object.defineProperty(obj, 'x', {
  
    // get()是取值, 每次调用obj.x这个get方法会自动执行,它return的值就是上面的v
    get() {
      return v
    },
    
    // set()是赋值
    // 这里的newValue就是等号后面的40
    // 当每次使用obj.x = 某个值  来赋值的时候  这个set方法会自动执行,
    // set方法的参数就是你要设置的那个值
    set(newValue) {
      // 把新值赋给v,那么下次在执行obj.x取出来的就是新值
      v = newValue
    }
  })
script>

浏览器操作图
二、Vue数据响应式原理_第3张图片

简单的视图响应数据实例


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <div id="root">div>
  <script>
    // 声明一个空对象
    const obj = {}

    // y做一个中间值
    var y = 20

    Object.defineProperty(obj, 'x', {
      // get()是取值
      get() {
        return y
      },
      // set()是赋值
      set(newValue) {
        y = newValue
         // 每次赋值后,重新调渲染DOM
        setRootValue()
      }
    })
	// 渲染DOM方法
    const setRootValue = () => {
      document.querySelector('#root').innerHTML = obj.x
    }
	
	//初次渲染
    setRootValue()
  script>
body>
html>

浏览器操作图
图一
二、Vue数据响应式原理_第4张图片
图二
二、Vue数据响应式原理_第5张图片

简单的数量加


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <div id="root">
    <span id="count">span>
    <button onclick="increaseCount()">+button>
  div>
  <script>
    // 声明一个空对象
    const obj = {}

    // y做一个中间值
    var y = 20

    Object.defineProperty(obj, 'x', {
      // get()是取值
      get() {
        return y
      },
      // set()是赋值
      set(newValue) {
        y = newValue
        // 每次赋值后,重新调渲染DOM
        setRootValue()
      }
    })

    // 渲染DOM方法
    const setRootValue = () => {
      document.querySelector('#count').innerHTML = obj.x
    }

    // 按钮点击事件
    const increaseCount = () => {
      obj.x += 1
    }

	//初次渲染
    setRootValue()
  script>
body>
html>

浏览器操作图
点击➕号就可以实现数量的加
二、Vue数据响应式原理_第6张图片

你可能感兴趣的:(vue)