一个Todolist 表单 带你弄清楚ref 响应式数据 和动态绑定数据

哈喽哈喽，我是你们的金樽清酒。最近不是放假了嘛，闲来无聊，那肯定是把原先没弄明白的vue的知识点搞清楚啦，然后呀我就想能不能自己敲一个小demo，来弄明白vue中的各种数据的传递。据我所了解，vue中的数据分为三种，props，ref和computed。那我们今天就来学一下ref吧。

ref

在Vue.js中，ref可以用于创建响应式对象。当你使用ref创建一个变量时，它会返回一个包含value属性的对象。这个value属性是一个响应式的、可观察的值。

下面是一个简单的例子：

htmlCopy code
<template>
  <div>
    <p>{{ myValue }}</p>
    <button @click="updateValue">Update Value</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式变量
    const myValue = ref('Initial Value');

    // 创建的 myValue 是一个包含 value 属性的对象
    // 你可以通过 myValue.value 获取其值

    // 提供数据给模板
    return {
      myValue
    };
  },
  methods: {
    updateValue() {
      // 修改 myValue 的值
      this.myValue.value = 'Updated Value';
    }
  }
};
</script>

在这个例子中，ref函数用于创建一个包含初始值 'Initial Value' 的响应式变量 myValue。然后，通过模板中的插值 {{ myValue }} 将该值渲染到页面上。当点击按钮时，调用 updateValue 方法，修改 myValue.value 的值，这会自动触发页面的重新渲染。

需要注意的是，访问和修改 myValue 的值时，使用 myValue.value。Vue 3 的 ref 是为了更明确地表示变量是响应式的，而不是直接暴露变量的值。

注意！！！！！！！ 用ref的时候数据一定要加.value。

小demo

<template>
  <div>
    <h1>钟氏珠宝店</h1>
    <input v-model="inputValue" />
    <button @click="handleAddItem">添加商品
    </button>
    <button @click="deleteAddItem">删除商品
    </button>
    <div id="app">
      <ul>
        <li v-for="(item, index) in data">{{ [index] }}{{ item }}</li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const data = ref([])


const handleAddItem = () => {//往数组里面添加数据
  data.value.push(inputValue.value)
  console.log(data.value)
  inputValue.value = ''
}
const deleteAddItem = () => {//往数组里面删除数据
  data.value = data.value.filter(item => item !== inputValue.value);
  console.log(data.value)
  inputValue.value = ''
}


</script> 

<style lang="less" scoped>
h1 {
  text-align: center;
}
</style>

代码解析：首先在页面上放置了一个list列表，然后创建了一个ref响应式数组data数据源。然后用v-for循环数组里面的数据并渲染在页面上。创建了响应式数组之后当然得需要创建一个input框，再创建一个ref字符串，并动态绑定到input框里面。再创建两个按钮，绑定两个点击事件，一个将数据添加进data数组，一个data数组里面得元素。这样一个小demo就完成了。

demo效果

总结

总的来说，ref 在Vue.js中是一个多功能的工具，既能够让你在模板中获取引用，又能够帮助你创建响应式的数据，使得应用的状态能够更方便地与视图同步。

原文链接：https://juejin.cn/post/7324165965205930034 作者：jinzunqinjiu