Vue3 Refs和Ref详解

关于Vue3中的数据相应的问题，下面例子：

Vue.createApp({
  template: `<div>{{ nameObj.name }}</div>`,
  setup() {
      const { reactive } = Vue
      const nameObj = reactive({name:'lilei',age:18})
      
      setTimeout(() => {
          nameObj.name = 'hanmeimei'
      },2000)
      return {
          nameObj
      }
  }
}).mount('#root')

这个时候我们可能联想到了es6中关于解构赋值的内容，我们是不是可以将上面例子中的nameObj通过结果解构的方式获取内部的name，然后直接将name返回呢？也就是将代码写成这样

Vue.createApp({
  template: `<div>{{ name }}</div>`,
  setup() {
      const { reactive,toRefs } = Vue
      const nameObj = reactive({name:'lilei',age:18})
              let { name } = nameObj
      setTimeout(() => {
          name.value = 'hanmeimei'
      },2000)
      return {
          name
      }
  }
}).mount('#root')

在实际运行中，我们发现，页面上的内容并没有变成hanmeimei，这个时候，我们需要引入Vue3中的另外一个内容，我们应该把代码修改成这样，才能实现数据和页面的响应式

Vue.createApp({
  template: `<div>{{ name }}</div>`,
  setup() {
      const { reactive,toRefs } = Vue
      const nameObj = reactive({name:'lilei',age:18})
      let { name } = toRefs(nameObj)
      setTimeout(() => {
          name.value = 'hanmeimei'
      },2000)
      return {
          name
      }
  }
}).mount('#root')

同样，和toRefs很类似的还有toRef，代码实例是这样的

Vue.createApp({
  template: `<div>{{ age }}</div>`,
  setup() {
      const { reactive,toRef } = Vue
      const nameObj = reactive({name:'lilei'})
      let age = toRef(nameObj,'age')
      setTimeout(() => {
          age.value = 'hanmeimei'
      },2000)
      return {
          age
      }
  }
}).mount('#root')

关于Vue3中的Refs和Ref详情的文章就介绍至此，更多相关Vue3中的Refs和Ref内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

闭包，是javascript的一大理解难点，网上关于闭包的文章也很多，但是很少有能让人看了就彻底明白的文章。究其原因，我想是因为闭包涉及了一连串的知识点。只有把这一连串的知识点都理解透彻，实现一个概念的闭环，才可以真正理 ...