vue3双向数据绑定原理

最新推荐文章于 2025-06-04 09:35:03 发布

@lwg

最新推荐文章于 2025-06-04 09:35:03 发布

阅读量565

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/lwg112233/article/details/120725035

本文详细探讨了Vue3中实现双向数据绑定的原理，包括使用ref和toRefs进行别名与实例获取，结合reactive创建响应式数据，通过getCurrentInstance获取组件实例，以及在setup方法内进行数据操作，最终实现数据的渲染和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 通过ref起别名,通过$refs获取实例、绑定input事件、将值定义在响应数据rective中

<input type="text" ref="reftxt" @input="getValue" :value="txt">

1.2 导入需要的钩子 reactive(响应数据)、toRefs（将响应数据转结果对象）、 getCurrentInstance(获取实例，相当于this)

import {reactive,toRefs,getCurrentInstance} from "vue"

1.3 在setup方法中操作

export default{
  name:"Home",
  setup() {  //相当于vue2 beforeCreate 和created
   const state = reactive({
     txt:'',//1.绑定
   })
   let {ctx} =getCurrentInstance()// 2.获取实例
    const getValue=()=>{
       console.log('触发了');
       //this.$refs.reftxt.value    vue2语法
       state.txt=ctx.$refs.reftxt.value //vue3语法 3. 赋值
    }
    return {  //4.返回出去
    //  state,
     ...toRefs(state),
     getValue,
    }
  }
}

1.4 渲染数据

{{txt}}

总：

<template>
<!-- 双向数据绑定原理 -->
  <div class="container">

  <input type="text" ref="reftxt" @input="getValue" :value="txt">
  {{txt}}

  </div>
</template>

<script >
import {reactive,toRefs,getCurrentInstance} from "vue"

export default{
  name:"Home",
  setup() {
   const state = reactive({
     txt:'',//绑定
   })
   let {ctx} =getCurrentInstance()//获取实例
    const getValue=()=>{
       console.log('触发了');
       //this.$refs.reftxt.value    vue2语法
       state.txt=ctx.$refs.reftxt.value //vue3语法
    }
    return {
    //  state,
     ...toRefs(state),
     getValue,
    }
  }
}
</script>