Vue3 Responsive Data

What is responsive data

"Responsive" means that when the data changes, Vue will notify the code that uses the data. For example, data is used in view rendering, and the view is automatically updated when the data changes.

Using "data hijacking" combined with "publisher-subscriber" mode, hijack the setter and getter of each property through the "Object.defineProperty()" method, publish a message to the subscriber when the data changes, and trigger the corresponding monitoring callback .

---

1.1: Reactive Data for Options API

<script>
export default {
  data: () => ({
    count: "abc",
  }),
  // 方法节点：
  methods: {
    changeCount() {
      this.count += "=";
    },
  },
};
</script>

---

1.2: Reactive data for composite APIs

<script setup>
// 引入 API 函数 ref()
import { reactive, ref, toRef, toRefs } from "vue";
// 数据源
let count = ref("abc");

// reactive 对原始数据类型是无效的
// let num = reactive("ABC");
let emp = reactive({
  name: "Jack",
  age: 19,
});

// 所有ref来审明对象类型的数据源
let obj = ref({
  name: "张三",
  age: 18,
});

// 使用 toref() 函数
let obj_two = {
  age: 20,
};
let myTitle = toRef(obj_two, "age");
// 获取的时候，通过 .value
console.log(myTitle.value);

// 使用 toRefs() 函数
let state = reactive({
  foo: 1,
  ber: 2,
});
let stateAsRefs = toRefs(state);
state.foo++;
console.log(stateAsRefs.foo.value);

// 方法节点：
function changeCount() {
  console.log(count);
  // count.value += "=";
  // 修改对象类型的响应式数据
  obj.value.age += 1;
  emp.age += 1;
}
</script>

---

1.3: ref() function

See the code in 1.2 for specific usage

• Using the ref() method, we can create any type of responsive data, which needs to be obtained through .value
• When the value is an object type, it will automatically convert its .value with reactive()
• ref receives an internal value and returns a responsive ref object
  • Any type => returns a ref object
• Parameters can pass any data type. When passing object types, it can also maintain deep responsiveness, so the applicability can be large. When defining data in setup, it is recommended to use ref first, which is convenient for splitting logic and business decoupling.

---

1.4: reactive() function

See the code in 1.2 for specific usage

• The reactive() function is only valid for object types (object, array), and invalid for Number, String, and Boolean primitive types.
• The reactive() function receives a common object and returns the responsive proxy of the common object;
• Use user.name = "new name" to modify the value
• Implemented internally based on proxy
• It can be obtained directly when obtaining the data value, without adding .value
• Parameters can only be passed in object types

---

1.5: toRef() function

See the code in 1.2 for specific usage

• It is used to create a new ref for the property on the source responsive object, so as to maintain the responsiveness of its source object;
• Receive two parameters: 1. Source object 2. Property name, return a ref data
• For example: using the props data passed by the parent component, when a property should remain responsive.
• Get the value directly in the Template (template), get the value in js, and get it through .value
• After toRef, the ref data is not a copy of the original data, but a reference. If you change the result, the value of the original data will also change at the same time.
• Does not trigger an update of the UL interface

---

1.6: toRefs() function

See the code in 1.2 for specific usage

• toRefs is used to convert a reactive object into a normal object, but each property in it will point to the corresponding property of the original object. It is still responsive, and is often used for destructuring assignment in es6. Because when directly deconstructing a responsive object, the destructured data will no longer be responsive, and using toRefs can solve this problem
• You need to add .value when getting data worth
• The ref data after toRefs is no longer a copy of the original data, but a reference. Changing the value of the data also changes the value of the original data.
• The function is actually similar to toRef, except that toRef is manually assigned one by one, while toRefs is automatically assigned.

---

Summarize:

The above is the principle and function of vue3 responsive data. If you don’t understand it, you can ask me in the comment area or chat with me privately. Some new functions will be released in the future, so stay tuned.
My other articles: https://blog.csdn.net/weixin_62897746?type=blog