Vue3 Other New features 1

This is the 25th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

If you feel helpful, please click 👍 to encourage you

The response formula of VUe2

• Core:

• • Objects: Hijacking (monitoring/intercepting) the reading and modification of existing attribute values of objects via defineProperty
  • Array: Element hijacking is achieved by overwriting the array’s update element method

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})
Copy the code

• The problem

• • The interface does not automatically update newly added attributes or delete existing attributes
  • Arr [1] = {}

Response formula of Vue3

• Core:

• • Through Proxy(Proxy): intercept any (13) operation of any data attribute, including reading and writing of attribute value, adding attribute, deleting attribute, etc..
  • Reflect: Dynamically performs a specific action on the corresponding property of the proxied object

<script>
   
    const user = {
      name: "John".age: 12
    };

    /* proxyUser is a proxy object, and user is a proxy object
    const proxyUser = new Proxy(user, {
			
      // Gets an attribute value of the target object
      get(target, prop) {
        console.log('hijacked the get ()', prop)
        return Reflect.get(target, prop)
      },
			
      // Modify an attribute value of the target object/add an attribute value to the target object
      set(target, prop, val) {
        console.log('hijacked set ()', prop, val)
        return Reflect.set(target, prop, val); / / (2)
      },

      // Deletes an attribute value on the target object
      deleteProperty (target, prop) {
        console.log('Hijack delete attribute', prop)
        return Reflect.deleteProperty(target, prop)
      }
    });
    // Read the target object property values through the proxy object
    console.log(proxyUser===user)
    console.log(proxyUser.name, proxyUser.age)
    // Set the target object property value through the proxy object
    proxyUser.name = 'bob'
    proxyUser.age = 13
    console.log(user)
    // Add attributes to the target object via the proxy object
    proxyUser.sex = 'male'
    console.log(user)
    // Delete the properties of the target object through the proxy object
    delete proxyUser.sex
    console.log(user)
  </script>
Copy the code

• Convert a reactive object into a normal object where each attribute is a ref
• Application: toRefs is useful when returning a reactive object from a synthesized function so that the component can decompose the returned object without losing the reactive

The use of torefs

• Problem: All property values deconstructed by Reactive objects are non-reactive
• Solution: toRefs allows you to convert all raw properties of a reactive object to reactive REF properties

<template>
  <div>
    name:{{name}}
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  name: ' '.setup() {
    const state = reactive({
      name: 'hzw'});const state2 = toRefs(state);
    setInterval(() = > {
      state.name += '= = =';
    }, 1000);
    return {
      // Deconstructed properties of objects returned through toRefs are also reactive. state2, }; }});</script>
Copy the code

Hooks encapsulation

• Reusable functional functions encapsulated using Vue3’s composite API
• Custom hooks function similar to the mixin technology in VUe2

• The advantage of custom hooks: it is clear where the reusable functional code is coming from and easier to understand

Example: Collect the coordinates of the page clicked by the user

//app.vue
<template>
  <div>
    <h2>x:{{x}},y:{{y}}</h2>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
import useMousePosition from './hooks/useMousePosition';

export default defineComponent({
  name: 'App'.setup() {
    const { x, y } = useMousePosition();
    return{ x, y, }; }});</script>
Copy the code

//hooks/useMousePosition.ts

import { onBeforeUnmount, onMounted, ref } from 'vue';
export default() = > {const x = ref(-1);
  const y = ref(-1);
  const clickHandler = (event: MouseEvent) = > {
    x.value = event.pageX;
    y.value = event.pageY;
  };
  onMounted(() = > {
    window.addEventListener('click', clickHandler);
  });
  onBeforeUnmount(() = > {
    window.removeEventListener('click', clickHandler);
  });
  return {
    x,
    y
  };
};
Copy the code