Vue中的响应式变量ref

Vue中的响应式变量ref

1、什么是 ref？

ref() 函数：它返回一个包含 value 属性的对象，value 持有实际的数据值。ref 是一个用于创建响应式数据的函数。当用 ref 创建一个变量时，这个变量的值发生变化时，Vue 会自动更新相关的界面。

const userList = ref()

onMounted(() => {
  console.log("页面加载")
  axios.get("http://localhost:8080/UserDemo/getAllUser").then((res) => {
    console.log("后端返回的数据为：", res)
    userList.value = res.data
  })

为什么需要 .value

访问和修改值

为了访问或修改 ref 引用中的值，必须使用 .value 属性。这是因为 ref 包装器让 Vue 能够追踪对这个值的读取和写入操作，从而实现响应式更新。

为什么这样设计

• 响应式系统的需求：Vue 的响应式系统需要知道哪些数据被访问和修改，以便在数据变化时更新视图。使用 .value 属性使 Vue 能够拦截这些操作，从而实现响应式更新。
• 明确的数据访问：通过 .value 明确表明你在操作 ref 包装的值，而不是操作其他普通对象或变量。

2、什么是插值？

Vue 的响应式特性：当数据发生变化时，Vue 会自动重新计算页面中的相关插值并更新到页面上。

插值语法：使用 {{}} 传入变量，相当于形参。

自动解包：

• 模板中的 ref：在 Vue 的模板中，Vue 会自动解包 ref 引用。因此，{{userList.value}} 会报错，因为不需要显式地使用 .value，直接使用 {{userList}} 即可显示其中的数据。
• v-for 指令：当使用 v-for 指令遍历数组时，Vue 会自动解包每个数组元素，并在循环内提供一个变量（例如 user）来代表当前遍历的数组元素。因此，可以在循环内部直接访问这个变量的属性。

3、如何进行绑定渲染

插值表达式使用双大括号 {{ }} 将数据绑定到 HTML 中，最常见的用法是在文本内容中插入数据：通过id进行挂载data里面的内容

<div id="app">
  <p>{{ message }}</p>
</div>


var vm = new Vue({
  el: '#app',  // 指定 Vue 实例挂载的元素，这里是 id 为 'app' 的元素
  data: {  // 数据对象，用来存储 Vue 实例的数据
    message: 'Hello, Vue!'  // 数据属性，名为 message，初始值为 'Hello, Vue!'
  }
});

4、({})中的{}写法？什么是对象字面量语法？

在 JavaScript 中，使用花括号 {} 可以创建一个对象。对象由一组键值对组成，每个键值对之间使用逗号 , 分隔。键（属性名）可以是字符串或标识符，值可以是任何合法的 JavaScript 表达式。

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    greet: function() {
      alert(this.message);
    }
  }
});

解释每个部分：

1. new Vue({}):
   • new Vue() 创建一个 Vue 实例，括号内的 {} 是 JavaScript 中的对象字面量。
   • 这个对象字面量用来配置 Vue 实例的各种选项。
2. 选项对象:
   • el: '#app'：指定 Vue 实例将会挂载到页面中 id 为 app 的元素上。
   • data: { message: 'Hello, Vue!' }：定义 Vue 实例的数据对象，这里包含一个 message 属性，初始值为 'Hello, Vue!'。
   • methods: { greet: function() { alert(this.message); } }：定义 Vue 实例的方法，这里有一个 greet 方法，用来弹出一个包含 message 数据的警告框。
3. 对象字面量:
   • 在 JavaScript 中，{} 表示一个对象字面量，用来定义对象的属性和方法。
   • 对象字面量中的属性和方法可以是静态的值或函数，用逗号 , 分隔不同的属性和方法。