二、Vue数据响应式原理

最新推荐文章于 2023-08-01 16:37:15 发布

weixin_43791795

最新推荐文章于 2023-08-01 16:37:15 发布

阅读量141

点赞数

分类专栏： vue 文章标签： vue vue原理 Object.defineProperty vue数据响应原理

本文链接：https://blog.csdn.net/weixin_43791795/article/details/97304869

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Object.defineProperty

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

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

使用

<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<script>
  // 声明一个空对象
  const obj = {}
  // 通过Object.defineProperty向obj添加一个x属性，
  // 属性值是42
  Object.defineProperty(obj, 'x', {
    value: 42,
    // 这里设置为false，那么value是不可修改的
    // 是出于数据保护的
    writable: false
  })
</script>
</body>
</html>

浏览器操作图
在这里插入图片描述

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

get()

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

浏览器操作图
在这里插入图片描述
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>

浏览器操作图
在这里插入图片描述

简单的视图响应数据实例

<!DOCTYPE html>
<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>Document</title>
</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>

浏览器操作图
图一
在这里插入图片描述
图二

简单的数量加

<!DOCTYPE html>
<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>Document</title>
</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>