vue3双向数据绑定原理

最新推荐文章于 2024-08-23 09:31:32 发布

@lwg

最新推荐文章于 2024-08-23 09:31:32 发布

阅读量514

点赞数

文章标签： vue.js javascript

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

版权

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

摘要由CSDN通过智能技术生成

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,
    }
  }
}<