vue 响应式原理 Object.defineProperty(obj,‘属性名A‘,options);

目录

  • self
    • 简单讲解
    • [1. 视图影响数据](#1. 视图影响数据)
    • [2. 数据影响视图](#2. 数据影响视图)
    • [3. 视图数据双向影响](#3. 视图数据双向影响)
    • 页面展示
  • 百度

self

简单讲解

get和set方法是ES5中提供的,因为是方法,所以可以进行判断,get 一般是要通过 return 返回的;而 set 是设置,不用返回

  • Object.defineProperty(obj,'属性名A',options);
  • options:{ set:function(){},get:function(){} }
  • 当获取 obj.'属性名A' 的时候,可以在设置或者获取的时候加一些行为
  • obj.属性名A = '1234'; //赋值会触发set函数
  • obj.属性名A; //获取会触发get函数

1. 视图影响数据

只有 视图影响数据

  • 在 键盘事件 中直接对 对象的属性 进行赋值 就可以 实现改变数据。
html 复制代码
<body>
	<!-- 视图 -->
	<input type="text" id="ipt">
	<script>
		// 数据
		var store = {
			info: ''
		}
		var ipt = document.querySelector('#ipt')
		ipt.addEventListener('keyup', function(e) {
			// console.log(888);
			// console.log(e.target.value)
			store.info = e.target.value
			
		})
	</script>
</body>

2. 数据影响视图

只有 数据影响视图

  • 使用方法 Object.defineProperty() 配置项中 set 方法进行设置
  • 【因为】使用 方法对属性 进行 修改 时,当 属性的值 发生 改变,就会触发 set 方法
  • set 方法中对 input 进行 赋值
  • 就实现了 数据影响视图
html 复制代码
<body>
	<!-- 视图 -->
	<input type="text" id="ipt">
	<script>
		// 数据
		var store = {
			info: ''
		}
		var ipt  = document.querySelector("#ipt")
		Object.defineProperty(store, "info", {
			set: function(newv) {
				// console.log(777)
				console.log(newv)
				ipt.value = newv
			}
		})
	</script>
</body>

3. 视图数据双向影响

  • 视图影响数据
    1. input 的 value 发生改变 ---> 即 视图发生改变
    2. 触发键盘弹起事件,在键盘事件中对属性进行赋值,属性值发生改变,但其实属性值并未真正改变 (1 和 2 是数据响应实现的效果,不是原理)
    3. 【因为】用了 Object.defineProperty() 方法对属性值进行修改,就只能通过方法中配置项中的 get 方法的 return 对属性值进行修改,其他地方修改的属性值没用,只能是知道属性值变了触发 set 方法
    4. set 方法中 使用 中间量对属性改变的值进行保存(set 方法的参数就是改变的属性值)
    5. get 方法中 return 中间量
    6. 就实现了视图影响数据
  • 数据影响视图
    1. 数据发生改变 ---> 即 对象的属性发生改变
    2. 触发 方法 Object.defineProperty() 中配置项中的 set 方法(set 方法的参数就是改变的属性值)
    3. set 方法中对 视图进行修改 ---> 即 对 inputvalue 进行修改
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>
    <!-- 视图 -->
    <input type="text" id="ipt" />
    <!-- <span id="content"></span> -->
    <script>
      /** ** 数据 ****/
      var store = {
        info: ''
      }
      var temp
      var ipt = document.querySelector('#ipt')
      var content = document.querySelector('#content')
      ipt.addEventListener('keyup', function(e) {
        console.log('"触发键盘事件"----', '触发键盘事件')
        store.info = e.target.value
        // content.innerText = 'input中数据:' + store.info
      })
      Object.defineProperty(store, 'info', {
        /**** set 方法 该属性值发生改变就会触发 ****/
        set: function(newv) {
          console.log('set方法调用------', 'set方法调用')
          console.log('set方法中 newv ------', newv)
          ipt.value = newv
          // store.info = newv
          temp = newv
        },
        /**** get 方法 用该属性的时候触发 ****/
        get: function() {
          console.log('get方法调用------', 'get方法调用')
          // getter 要有 return
          return temp
        }
      })
    </script>
  </body>
</html>

页面展示

百度

vue.js利用Object.defineProperty实现双向绑定

  • 在Vue.js中,可以使用Object.defineProperty来实现数据的响应式,从而实现双向绑定。以下是一个简单的示例,展示如何使用Object.defineProperty来创建一个简单的双向绑定输入框:
html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js 双向绑定示例</title>
  </head>
  <body>
    <div id="app">
      <input v-model="message" placeholder="编辑我" />
      <p>输入的消息是: {{ message }}</p>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          message: ''
        }
      })

      // 使用Object.defineProperty实现响应式
      let data = {}
      Object.defineProperty(data, 'message', {
        get() {
          return vm.message
        },
        set(newValue) {
          vm.message = newValue
        }
      })

      // 当输入框的值变化时,data.message也会更新
      // 当data.message更新时,Vue的响应式系统会更新视图
    </script>
  </body>
</html>

在这个例子中,我们创建了一个Vue实例,并通过v-model指令绑定了输入框到message数据属性。同时,我们使用Object.defineProperty监听data.message的变化,并在其发生变化时更新Vue实例的响应式数据。这样,无论是视图层的更新还是数据层的更新,都会同步到彼此,实现了所谓的双向绑定。

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试